restructure and style

serenity-kit · Jun 7, 2024 · a31d253 · a31d253
1 parent daa3f9d
commit a31d253
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -125,7 +125,7 @@ TODO better version where the token is also never exposed to the network so not
   - fix input active for iOS
   - fix iOS of add item
   - show members and invitation link as menu
-  - split nav into login/register and authed part
+  - proper login/signup redirect
 
 - use expo-secure-store for the sessionKey
 - encrypt MMKV storage on iOS and Android

diff --git a/apps/app/src/app/(app)/_layout.tsx b/apps/app/src/app/(app)/_layout.tsx
@@ -0,0 +1,34 @@
+import { Drawer } from "expo-router/drawer";
+import { useWindowDimensions } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { DrawerContent } from "../../components/drawerContent";
+import { useIsPermanentLeftDrawer } from "../../hooks/useIsPermanentDrawer";
+
+export default function Layout() {
+  const isPermanentLeftDrawer = useIsPermanentLeftDrawer();
+  const { width: fullWidth } = useWindowDimensions();
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Drawer
+        drawerContent={DrawerContent}
+        screenOptions={{
+          drawerType: isPermanentLeftDrawer ? "permanent" : "front",
+          drawerStyle: {
+            width: isPermanentLeftDrawer ? 240 : fullWidth,
+          },
+          overlayColor: "transparent",
+          drawerPosition: "left",
+          headerShown: isPermanentLeftDrawer ? false : true,
+          // headerLeft: () => {
+          //   return <PanelLeft />;
+          // },
+          headerTitle: () => null,
+          // drawerStyle: {
+          //   width: 240,
+          // },
+        }}
+      />
+    </GestureHandlerRootView>
+  );
+}
diff --git a/apps/app/src/app/index.tsx → apps/app/src/app/(app)/index.tsx b/apps/app/src/app/index.tsx → apps/app/src/app/(app)/index.tsx
diff --git a/apps/app/src/app/list-invitation/[token].tsx → ...src/app/(app)/list-invitation/[token].tsx b/apps/app/src/app/list-invitation/[token].tsx → ...src/app/(app)/list-invitation/[token].tsx
@@ -4,11 +4,11 @@ import * as sodium from "react-native-libsodium";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 import { Text } from "~/components/ui/text";
-import { useLocker } from "../../hooks/useLocker";
-import { acceptInvitation } from "../../utils/acceptInvitation";
-import { getHashParameter } from "../../utils/getHashParam";
-import { getSessionKey } from "../../utils/sessionKeyStorage";
-import { trpc } from "../../utils/trpc";
+import { useLocker } from "../../../hooks/useLocker";
+import { acceptInvitation } from "../../../utils/acceptInvitation";
+import { getHashParameter } from "../../../utils/getHashParam";
+import { getSessionKey } from "../../../utils/sessionKeyStorage";
+import { trpc } from "../../../utils/trpc";
 
 const Invitation: React.FC = () => {
   const acceptDocumentInvitationMutation =

diff --git a/apps/app/src/app/list/[listId].tsx → apps/app/src/app/(app)/list/[listId].tsx b/apps/app/src/app/list/[listId].tsx → apps/app/src/app/(app)/list/[listId].tsx
@@ -9,17 +9,17 @@ import { Checkbox } from "~/components/ui/checkbox";
 import { Input } from "~/components/ui/input";
 import { Text } from "~/components/ui/text";
 import { X } from "~/lib/icons/X";
-import { DocumentInvitation } from "../../components/documentInvitation";
-import { SubtleInput } from "../../components/subtleInput";
-import { UpdateDocumentNameForm } from "../../components/updateDocumentNameForm";
-import { useLocker } from "../../hooks/useLocker";
-import { useYArray } from "../../hooks/useYArray";
-import { deserialize } from "../../utils/deserialize";
+import { DocumentInvitation } from "../../../components/documentInvitation";
+import { SubtleInput } from "../../../components/subtleInput";
+import { UpdateDocumentNameForm } from "../../../components/updateDocumentNameForm";
+import { useLocker } from "../../../hooks/useLocker";
+import { useYArray } from "../../../hooks/useYArray";
+import { deserialize } from "../../../utils/deserialize";
 import {
   documentPendingChangesStorage,
   documentStorage,
-} from "../../utils/documentStorage";
-import { serialize } from "../../utils/serialize";
+} from "../../../utils/documentStorage";
+import { serialize } from "../../../utils/serialize";
 
 const websocketEndpoint =
   process.env.NODE_ENV === "development"
@@ -120,15 +120,17 @@ const List: React.FC<Props> = () => {
       />
 
       <View className="flex flex-row items-center gap-2 px-6">
-        <Input
-          placeholder="What needs to be done?"
-          onChangeText={(value) => setNewTodoText(value)}
-          value={newTodoText}
-          autoCapitalize="none"
-          autoCorrect={false}
-          autoComplete="off"
-          numberOfLines={1}
-        />
+        <View className="flex flex-1">
+          <Input
+            placeholder="What needs to be done?"
+            onChangeText={(value) => setNewTodoText(value)}
+            value={newTodoText}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoComplete="off"
+            numberOfLines={1}
+          />
+        </View>
         <Button
           className="add"
           onPress={(event) => {
@@ -153,7 +155,16 @@ const List: React.FC<Props> = () => {
                 console.log("checked", index);
               }}
             />
-            <SubtleInput value={entry} />
+            <View className="flex flex-1">
+              <SubtleInput
+                placeholder="What needs to be done?"
+                value={entry}
+                numberOfLines={1}
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoComplete="off"
+              />
+            </View>
             <Button
               variant="ghost"
               size="icon"

diff --git a/apps/app/src/app/_layout.tsx b/apps/app/src/app/_layout.tsx
@@ -6,18 +6,13 @@ import {
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { httpBatchLink } from "@trpc/client";
-import { SplashScreen } from "expo-router";
-import { Drawer } from "expo-router/drawer";
+import { Slot, SplashScreen } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect, useState } from "react";
-import { useWindowDimensions } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { NAV_THEME } from "~/lib/constants";
 import { useColorScheme } from "~/lib/useColorScheme";
-import { DrawerContent } from "../components/drawerContent";
 import "../global.css";
-import { useIsPermanentLeftDrawer } from "../hooks/useIsPermanentDrawer";
 import useLoadingLibsodium from "../hooks/useLoadingLibsodium";
 import { trpc } from "../utils/trpc";
 
@@ -103,11 +98,6 @@ export default function Layout() {
     })
   );
 
-  const isPermanentLeftDrawer = useIsPermanentLeftDrawer();
-  const { width: fullWidth } = useWindowDimensions();
-
-  console.log(isPermanentLeftDrawer);
-
   if (!isLoadingComplete) {
     return null;
   }
@@ -118,37 +108,8 @@ export default function Layout() {
         <SafeAreaProvider>
           <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
             <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-            {/* <Stack>
-              <Stack.Screen
-                name="index"
-                options={{
-                  // Hide the header for all other routes.
-                  title: "Lists",
-                }}
-              />
-            </Stack> */}
 
-            <GestureHandlerRootView style={{ flex: 1 }}>
-              <Drawer
-                drawerContent={DrawerContent}
-                screenOptions={{
-                  drawerType: isPermanentLeftDrawer ? "permanent" : "front",
-                  drawerStyle: {
-                    width: isPermanentLeftDrawer ? 240 : fullWidth,
-                  },
-                  overlayColor: "transparent",
-                  drawerPosition: "left",
-                  headerShown: isPermanentLeftDrawer ? false : true,
-                  // headerLeft: () => {
-                  //   return <PanelLeft />;
-                  // },
-                  headerTitle: () => null,
-                  // drawerStyle: {
-                  //   width: 240,
-                  // },
-                }}
-              />
-            </GestureHandlerRootView>
+            <Slot />
 
             {/* Default Portal Host (one per app) */}
             {/* <PortalHost /> */}

diff --git a/apps/app/src/app/login.tsx b/apps/app/src/app/login.tsx
@@ -1,4 +1,4 @@
-import { router, useLocalSearchParams } from "expo-router";
+import { Link, router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { View } from "react-native";
 import { Text } from "~/components/ui/text";
@@ -16,7 +16,7 @@ const Login = () => {
   const { addItem } = useLocker();
 
   return (
-    <View className="max-w-md mr-auto ml-auto">
+    <View className="max-w-md mr-auto ml-auto min-w-80 mt-32">
       <AuthForm
         onSubmit={async ({ password, username }) => {
           const loginResult = await login({
@@ -41,7 +41,7 @@ const Login = () => {
           }
           router.navigate("/");
         }}
-        children={<Text>Login</Text>}
+        children="Login"
         isPending={isPending}
       />
 
@@ -53,6 +53,12 @@ const Login = () => {
           <Text>Failed to log in</Text>
         </View>
       )}
+
+      <View className="mt-8 text-center">
+        <Link href="/register" className="text-center">
+          Sign up here
+        </Link>
+      </View>
     </View>
   );
 };

diff --git a/apps/app/src/app/register.tsx b/apps/app/src/app/register.tsx
@@ -1,4 +1,4 @@
-import { router, useLocalSearchParams } from "expo-router";
+import { Link, router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { View } from "react-native";
 import { Text } from "~/components/ui/text";
@@ -16,7 +16,7 @@ const Register = () => {
   const { addItem } = useLocker();
 
   return (
-    <View className="max-w-md mr-auto ml-auto">
+    <View className="max-w-md mr-auto ml-auto min-w-80 mt-32">
       <AuthForm
         onSubmit={async ({ password, username }) => {
           const result = await registerAndLogin({
@@ -41,17 +41,23 @@ const Register = () => {
           }
           router.navigate("/");
         }}
-        children={<Text>Register</Text>}
+        children="Sign up"
         isPending={isPending}
       />
       {error && (
         <View className="mt-4">
           <AlertCircle className="h-4 w-4" />
           {/* TODO proper styling */}
           <Text>Error</Text>
-          <Text>Failed to register</Text>
+          <Text>Failed to sign up</Text>
         </View>
       )}
+
+      <View className="mt-8 text-center">
+        <Link href="/login" className="text-center">
+          Login here
+        </Link>
+      </View>
     </View>
   );
 };

diff --git a/apps/app/src/components/authForm.tsx b/apps/app/src/components/authForm.tsx
@@ -16,7 +16,7 @@ export const AuthForm = ({ onSubmit, isPending, children }: Props) => {
 
   return (
     <View>
-      <Text className="text-xl text-center font-semibold mb-8 mt-12">
+      <Text className="text-3xl text-center font-semibold mb-8 mt-12">
         {children}
       </Text>
 
@@ -53,7 +53,7 @@ export const AuthForm = ({ onSubmit, isPending, children }: Props) => {
             onSubmit({ username, password });
           }}
         >
-          {children}
+          <Text>{children}</Text>
         </Button>
       </View>
     </View>

diff --git a/apps/app/src/components/documentInvitation.tsx b/apps/app/src/components/documentInvitation.tsx
@@ -55,7 +55,7 @@ export const DocumentInvitation: React.FC<Props> = ({
   }
 
   return (
-    <View className="flex gap-2 pt-2 px-6">
+    <View className="flex flex-col gap-2 pt-2 px-6">
       {documentInvitationQuery.data ? (
         <Text>
           You have one invitation link ({documentInvitationQuery.data.token})
@@ -77,7 +77,6 @@ export const DocumentInvitation: React.FC<Props> = ({
           id={id}
           value={`${window.location.origin}/list-invitation/${documentInvitationQuery.data?.token}#key=${seed}`}
           readOnly
-          className="w-72 h-40"
           multiline
         />
       )}

diff --git a/apps/app/src/components/drawerContent.tsx b/apps/app/src/components/drawerContent.tsx
@@ -49,12 +49,7 @@ export const DrawerContent: React.FC = () => {
       }}
     >
       <View className="gap-4">
-        <Link href="/login">
-          <Text>Login</Text>
-        </Link>
-        <Link href="/register">Register</Link>
-
-        <View className="flex flex-row px-4 items-center gap-2">
+        <View className="flex flex-row px-4 items-center gap-2 pt-4">
           <View className="bg-slate-200 w-10 h-10 rounded-full items-center justify-center">
             <Text>{meQuery.data?.username.substring(0, 2)}</Text>
           </View>
@@ -93,7 +88,7 @@ export const DrawerContent: React.FC = () => {
                   <ListTodo width={16} height={16} />
                 </Text>
                 <Text className="text-xl" numberOfLines={1}>
-                  {name}
+                  {name || "Untitled"}
                 </Text>
               </Link>
             );