rememberry-io · Laurin-Notemann · Apr 13, 2024 · Apr 13, 2024
diff --git a/frontend/package.json b/frontend/package.json
@@ -47,7 +47,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "2.4.1",
-    "reactflow": "11.10.2",
+    "reactflow": "11.11.1",
     "sharp": "0.32.6",
     "tailwind-merge": "1.14.0",
     "tailwindcss": "3.3.3",

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -3,11 +3,9 @@ import "./globals.css";
 // self-host google font, served from deployment domain, not per request
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { cookies } from "next/headers";
 import React from "react";
-import { FetchUser } from "../components/authentication/FetchUser";
-import { userLoader } from "../lib/services/authentication/userloader";
 import Providers from "./providers";
+import { UserProvider } from "@frontend/components/authentication/UserProvider";
 
 // only consider or include the Latin subset of characters
 const inter = Inter({ subsets: ["latin"] });
@@ -24,10 +22,6 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const session = cookies().get("auth_session")?.value;
-
-  const user = await userLoader(session);
-
   return (
     <html lang="en">
       {/* children prop refers to the page component that the client sees atm */}
@@ -38,7 +32,7 @@ export default async function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <FetchUser user={user}>{children}</FetchUser>
+          <UserProvider>{children}</UserProvider>
         </Providers>
       </body>
       {/* condition needed to check the authentication status */}

diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
@@ -1,25 +1,31 @@
 "use client";
+import { FormField } from "@frontend/components/authentication/FormField";
+import { Header } from "@frontend/components/layout/Header";
 import { Button } from "@frontend/components/ui/button";
 import {
   Card,
   CardContent,
   CardHeader,
   CardTitle,
 } from "@frontend/components/ui/card";
-import { FormField } from "@frontend/components/authentication/FormField";
+import { useUserStore } from "@frontend/lib/services/authentication/userStore";
 import * as Tabs from "@radix-ui/react-tabs";
 import { Form, Formik } from "formik";
 import { useRouter } from "next/navigation";
 import { useLoginUser } from "../../lib/services/authentication/useLoginUser";
 import { useRegisterUser } from "../../lib/services/authentication/useRegisterUser";
+import { TitleHeader } from "@frontend/components/ui/title-header";
 
 export default function Login() {
   const register = useRegisterUser();
   const login = useLoginUser();
   const router = useRouter();
 
   return (
-    <div className="z-10 absolute top-0 left-0 w-full h-full flex items-center justify-center">
+    <div className="top-0 left-0 w-full h-full items-center justify-center">
+      <Header
+        middleHeaderItems={<TitleHeader>Welcome to rememberry</TitleHeader>}
+      />
       <div className="z-10 relative flex flex-col items-center justify-center min-h-screen">
         <Tabs.Root defaultValue="login" className="w-[400px] h-[480px] ">
           <Tabs.List className="dark:bg-dark-800 h-10 rounded-md bg-muted p-1 text-muted-foreground grid w-fit grid-cols-2">

diff --git a/frontend/src/app/logout/TestLogout.tsx b/frontend/src/app/logout/TestLogout.tsx
diff --git a/frontend/src/app/logout/page.tsx b/frontend/src/app/logout/page.tsx
diff --git a/frontend/src/app/map/[id]/page.tsx b/frontend/src/app/map/[id]/page.tsx
@@ -34,6 +34,9 @@ import ReactFlow, {
   useStoreApi,
 } from "reactflow";
 import "reactflow/dist/style.css";
+import { Card, CardContent } from "@frontend/components/ui/card";
+import { DifficultyPicker } from "@frontend/components/layout/DifficultyPicker";
+import { TitleHeader } from "@frontend/components/ui/title-header";
 
 const nodeTypes = {
   node: NodeMemo,
@@ -247,10 +250,8 @@ const Map: FC<MapProps> = ({ nodesProp, edgesProp, mapId, mapName }) => {
       className="flex flex-col justify-items-center"
     >
       <Header
-        mapName={mapName}
-        openHandler={() => setIsSidebarOpen(!isSidebarOpen)}
-        isOpen={isSidebarOpen}
-        toggleSidebar={toggleSidebar}
+        middleHeaderItems={<TitleHeader>{mapName}</TitleHeader>}
+        rightHeaderItems={<DifficultyPicker />}
       />
 
       <Toaster position="bottom-center" reverseOrder={false} />
@@ -285,7 +286,6 @@ const Map: FC<MapProps> = ({ nodesProp, edgesProp, mapId, mapName }) => {
       >
         <ReactFlowBackground />
         {/* <MiniMap /> */}
-        <Controls showInteractive={false} />
 
         <Footer>
           <Button

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,4 +1,3 @@
-// root page
 "use client";
 import { MapPreviewCard } from "@frontend/components/maps/MapPreviewCard";
 import { DialogTwoInputs } from "@frontend/components/map-node-dialog/DialogTwoInputs";
@@ -12,14 +11,17 @@ import { useGetMapByUserId } from "@frontend/lib/services/maps/useGetMapsByUserI
 import { useUpdateMap } from "@frontend/lib/services/maps/useUpdateMap";
 import { Box } from "@radix-ui/themes";
 import { useRouter } from "next/navigation";
-import "reactflow/dist/style.css";
+import { Header } from "@frontend/components/layout/Header";
+import { TitleHeader } from "@frontend/components/ui/title-header";
 
 export default function Home() {
   const { isLoading, maps } = useGetMapByUserId();
 
-  const userId = useUserStore((state) => state.user?.id || null);
-  const createMap = useCreateMap();
+  const userStore = useUserStore();
+
   const router = useRouter();
+
+  const createMap = useCreateMap();
   const deleteMap = useDeleteMap();
   const updateMap = useUpdateMap();
 
@@ -34,7 +36,7 @@ export default function Home() {
     closeDialog,
   } = useCreateOrUpdateMapDialog();
 
-  if (!userId || isLoading) return null;
+  if (!userStore.user || isLoading || !maps) return <></>;
 
   const mapsSortedByDescendingCreatedDate = maps.sort(
     (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
@@ -44,12 +46,12 @@ export default function Home() {
    * handles the creation or editing of a map.
    */
   const createOrUpdateMap = async (name: string, description: string) => {
-    if (userId) {
+    if (userStore.user!.id) {
       if (isCreate) {
         const [_err, map] = await createMap({
           name,
           description,
-          userId: userId,
+          userId: userStore.user!.id,
         });
         if (map) {
           router.push("/map/" + map.id);
@@ -75,9 +77,11 @@ export default function Home() {
 
   return (
     <div className="relative w-full h-full">
-      <h1 className="flex flex-col justify-center items-center mt-16 text-2xl text-primary font-medium">
-        Which map do you want to learn today?
-      </h1>
+      <Header
+        middleHeaderItems={
+          <TitleHeader>Which map do you want to learn today?</TitleHeader>
+        }
+      />
       <div className="z-10 absolute top-0 left-0 h-screen">
         {dialogOpen && (
           <DialogTwoInputs
@@ -94,24 +98,20 @@ export default function Home() {
         <div id="body" className="flex content-start p-20 flex-wrap">
           {mapsSortedByDescendingCreatedDate.map(
             (map: { id: string; name: string; description: string }) => (
-              <>
-                <div className="outline-none   mx-5 my-5" key={map.id}>
-                  <Box>
-                    <MapPreviewCard
-                      map={map}
-                      openEditMapDialog={openDialog}
-                      deleteMap={deleteMap}
-                    />
-                  </Box>
-                </div>
-              </>
+              <div className="outline-none   mx-5 my-5" key={map.id}>
+                <Box>
+                  <MapPreviewCard
+                    map={map}
+                    openEditMapDialog={openDialog}
+                    deleteMap={deleteMap}
+                  />
+                </Box>
+              </div>
             ),
           )}
         </div>
         <Footer>
-          <>
-            <Button onClick={() => openDialog(true)}>Add Map</Button>
-          </>
+          <Button onClick={() => openDialog(true)}>Add Map</Button>
         </Footer>
       </div>
     </div>

diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
@@ -0,0 +1,84 @@
+"use client";
+import { FormField } from "@frontend/components/authentication/FormField";
+import { Header } from "@frontend/components/layout/Header";
+import { Button } from "@frontend/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@frontend/components/ui/card";
+import { TitleHeader } from "@frontend/components/ui/title-header";
+import { Form, Formik } from "formik";
+import { useState } from "react";
+import { useUserStore } from "../../lib/services/authentication/userStore";
+
+export default function Profile() {
+  const { user } = useUserStore();
+
+  const [initialValues, _setInitialValues] = useState({
+    username: user?.username || "",
+    email: user?.email || "",
+    password: "",
+  });
+
+  const handleUpdate = async () => {};
+
+  return (
+    <div className="top-0 left-0 w-full h-full items-center justify-center">
+      <Header
+        middleHeaderItems={<TitleHeader>Hello {user?.username}</TitleHeader>}
+      />
+      <div className="z-10 relative flex flex-col items-center justify-center min-h-screen">
+        <div className="w-[400px] h-[480px]">
+          <Formik initialValues={initialValues} onSubmit={handleUpdate}>
+            {({ isSubmitting }) => (
+              <Form>
+                <Card className="dark:bg-dark-800 dark:border-dark-800 p-4">
+                  <CardHeader>
+                    <CardTitle>Do you want to do some changes? 🫐</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-col gap-1.5">
+                      <FormField
+                        id="username"
+                        type="text"
+                        key={initialValues.username}
+                        placeholder="Wolfie"
+                      />
+                      <FormField
+                        id="email"
+                        type="email"
+                        key={initialValues.email}
+                        placeholder="[email protected]"
+                      />
+                      <FormField
+                        id="password"
+                        type="password"
+                        key={initialValues.password}
+                        placeholder="New Password"
+                      />
+                      <FormField
+                        id="passwordCheck"
+                        type="password"
+                        key={""}
+                        placeholder="New Password"
+                      />
+                    </div>
+                    <Button
+                      className="w-fit"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      Update Profile
+                    </Button>
+                  </CardContent>
+                </Card>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      </div>
+    </div>
+  );
+}