Merge pull request #54 from JimTheCat/CU-8696hrm29_Create-profile-pag…

…e_Patryk-Kosiski

Cu 8696hrm29 create profile page patryk kosiski

frontend/package.json

@@ -31,11 +31,13 @@
     "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
+    "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.13",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/react-i18next": "^8.1.0",
     "@vitejs/plugin-react": "^4.3.2",
+    "dompurify": "^3.1.7",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",

frontend/src/Components/Cards/ProfileAboutMe/ProfileAboutMe.tsx

@@ -0,0 +1,11 @@
+import {Card, Text} from "@mantine/core";
+import {InnerHtmlHandler} from "../../InnerHtmlHandler/InnerHtmlHandler.tsx";
+
+export const ProfileAboutMe = (props: { htmlContent: string }) => {
+  return (
+    <Card shadow="sm" padding="lg" radius="md" w={500} withBorder>
+      <Text size={"lg"}>O mnie</Text>
+      <InnerHtmlHandler innerHtml={props.htmlContent}/>
+    </Card>
+  );
+}

frontend/src/Components/Cards/ProfileAboutMe/index.tsx

@@ -0,0 +1 @@
+export * from './ProfileAboutMe'

frontend/src/Components/Cards/ProfileFriends/ProfileFriends.tsx

@@ -0,0 +1,31 @@
+import {Card, Grid, Group, Image, Text, UnstyledButton} from "@mantine/core";
+import {DummyFriendsType} from "../../../Services/Constants/DummyUser.tsx";
+import {useNavigate} from "react-router-dom";
+
+export const ProfileFriends = (props: { friends: DummyFriendsType }) => {
+
+  const navigate = useNavigate();
+
+  return (
+    <Card shadow="sm" px="lg" pt={"lg"} radius="md" w={400} withBorder>
+      <Group justify={"space-between"} mb={15}>
+        <Text size={"lg"}>Friends</Text>
+        <UnstyledButton onClick={() => navigate("https://www.google.com")} c="dimmed">
+          Wyświetl wszystko
+        </UnstyledButton>
+      </Group>
+
+      <Grid gutter={"xs"} align={"center"}>
+        {props.friends.friendsDetails!.map((friend, index) => {
+          return (
+            <Grid.Col span={4}>
+              <Image key={index} src={friend.profilePicture} alt={"Photo " + index} w={"auto"} h={100} radius={180}
+                     fit={"contain"}/>
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+
+    </Card>
+  );
+}

frontend/src/Components/Cards/ProfileFriends/index.tsx

@@ -0,0 +1 @@
+export * from './ProfileFriends.tsx'

frontend/src/Components/Cards/ProfileMultimedia/ProfileMultimedia.tsx

@@ -0,0 +1,30 @@
+import {Card, Grid, Group, Image, Text, UnstyledButton} from "@mantine/core";
+import {Multimedia} from "../../../Services/Constants/DummyMultimedia.tsx";
+import {useNavigate} from "react-router-dom";
+
+export const ProfileMultimedia = (props: { multimedia: Multimedia[] }) => {
+
+  const navigate = useNavigate();
+
+  return (
+    <Card shadow="sm" px="lg" pt={"lg"} radius="md" w={400} withBorder>
+      <Group justify={"space-between"} mb={15}>
+        <Text size={"lg"}>Multimedia</Text>
+        <UnstyledButton onClick={() => navigate("https://www.google.com")} c="dimmed">
+          Wyświetl wszystko
+        </UnstyledButton>
+      </Group>
+
+      <Grid gutter={"xs"} align={"center"}>
+        {props.multimedia.map((media, index) => {
+          return (
+            <Grid.Col span={4}>
+              <Image key={index} src={media.url} alt={media.type} w={"auto"} h={100} fit={"contain"}/>
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+
+    </Card>
+  );
+}

frontend/src/Components/Cards/ProfileMultimedia/index.tsx

@@ -0,0 +1 @@
+export * from './ProfileMultimedia'

frontend/src/Components/Cards/ProfileTop/CardProfileTop.tsx

@@ -0,0 +1,53 @@
+import {Box, Card, Group, Image, Skeleton, Stack, Text} from "@mantine/core";
+import {DummyUserType} from "../../../Services/Constants/DummyUser.tsx";
+import {useState} from "react";
+
+
+export const CardProfileTop = (props: { userDetails: DummyUserType }) => {
+
+  const [isProfilePictureLoaded, setIsProfilePictureLoaded] = useState(false);
+
+  return (
+    <Card shadow="sm" padding="lg" radius="md" w={"fit-content"} withBorder>
+      <Card.Section withBorder w={500}>
+        <Image h={150} fit={"cover"}
+               src={"https://c4.wallpaperflare.com/wallpaper/264/666/478/3-316-16-9-aspect-ratio-s-sfw-wallpaper-preview.jpg"}/>
+      </Card.Section>
+
+      <Box pos={"relative"} top={-35}>
+        <Group>
+          <Box>
+            {!isProfilePictureLoaded && (
+              <Skeleton
+                circle
+                height={120}
+              />
+            )}
+            <Image
+              src={props.userDetails.profilePicture}
+              w={"auto"}
+              h={120}
+              fit={"cover"}
+              onLoad={() => setIsProfilePictureLoaded(true)}
+              radius={180}
+              bd={"2px solid dimmed"}
+              display={isProfilePictureLoaded ? "block" : "none"}
+            />
+          </Box>
+          <Stack justify="flex-end" gap={0} mt={"lg"}>
+            <Group justify={"center"} gap={"xs"} align={"baseline"}>
+              <Text size={"xl"}>{props.userDetails.name} {props.userDetails.surname}</Text>
+              <Text size={"sm"} c="dimmed">{props.userDetails.pronouns}</Text>
+            </Group>
+            <Text size={"md"} c="dimmed">{props.userDetails.tag}</Text>
+          </Stack>
+        </Group>
+
+        <Stack justify={"flex-start"} gap={0} mt={'md'}>
+          <Text>Dołączył/a: {props.userDetails.joiningDate}</Text>
+          <Text>Znajomi: {props.userDetails.friends?.totalFriends}</Text>
+        </Stack>
+      </Box>
+    </Card>
+  );
+}

frontend/src/Components/Cards/ProfileTop/index.tsx

@@ -0,0 +1 @@
+export * from "./CardProfileTop"

frontend/src/Components/InnerHtmlHandler/InnerHtmlHandler.tsx

@@ -0,0 +1,22 @@
+import {TypographyStylesProvider} from "@mantine/core";
+import DOMPurify from 'dompurify';
+
+export const InnerHtmlHandler = (props: { innerHtml: string }) => {
+
+  //TODO: Define allowed tags and attributes for DOMPurify sanitizer
+  // const allowedArgs = {
+  //   ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li', 'br'],
+  //   ALLOWED_ATTR: ['href', 'title'],
+  // }
+
+  // Validate innerHtml to prevent XSS
+  const sanitizedHtml = DOMPurify.sanitize(props.innerHtml);
+
+  return (
+    <TypographyStylesProvider>
+      <div
+        dangerouslySetInnerHTML={{__html: sanitizedHtml}}
+      />
+    </TypographyStylesProvider>
+  );
+}

frontend/src/Components/Layout/Layout.tsx

@@ -1,39 +1,23 @@
-import {ActionIcon, AppShell, Group, MantineColor, Title, useMantineColorScheme} from "@mantine/core";
-import {IconMoonStars, IconSun} from '@tabler/icons-react';
-import {Outlet, useNavigate} from "react-router-dom";
+import {AppShell, Skeleton} from "@mantine/core";
+import {Outlet} from "react-router-dom";
 
 export const Layout = () => {
-
-  const navigate = useNavigate();
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
-
   return (
     <AppShell
-      header={{
-        height: 70,
-      }}
+      navbar={{width: 300, breakpoint: 'xs'}}
     >
-      <AppShell.Header>
-        <Group justify={"space-between"}>
-          <Title
-            order={2}
-            onClick={() => {
-              navigate("/")
-            }}
-            style={{cursor: 'pointer'}}>
-            Reimbursement Calculation App</Title>
-          <ActionIcon
-            variant="outline"
-            color={dark ? "yellow" as MantineColor : "blue" as MantineColor} // I don't know what happened here but works ¯\_(ツ)_/¯
-            onClick={() => toggleColorScheme()}
-            title="Toggle color scheme"
-          >
-            {dark ? <IconSun size={18}/> : <IconMoonStars size={18}/>}
-          </ActionIcon>
-        </Group>
-      </AppShell.Header>
-      <Outlet/>
+      {/*TODO: Modify a navbar*/}
+      <AppShell.Navbar p="md">
+        Navbar
+        {Array(15)
+          .fill(0)
+          .map((_, index) => (
+            <Skeleton key={index} h={28} mt="sm" animate={false}/>
+          ))}
+      </AppShell.Navbar>
+      <AppShell.Main>
+        <Outlet/>
+      </AppShell.Main>
     </AppShell>
   );
 }

frontend/src/Pages/MainPage/MainPage.tsx

@@ -1,7 +1,9 @@
+import {Box, Title} from "@mantine/core";
+
 export const MainPage = () => {
     return (
-        <div>
-            <h1>Main Page</h1>
-        </div>
+      <Box p={"md"}>
+        <Title order={1}>Main page</Title>
+      </Box>
     )
 }

frontend/src/Pages/Profile/Profile.tsx

@@ -0,0 +1,39 @@
+import {useParams} from "react-router-dom";
+import {DummyUser} from "../../Services/Constants/DummyUser.tsx";
+import {CardProfileTop} from "../../Components/Cards/ProfileTop";
+import {Box, Group, Stack} from "@mantine/core";
+import {ProfileAboutMe} from "../../Components/Cards/ProfileAboutMe";
+import {ProfileMultimedia} from "../../Components/Cards/ProfileMultimedia";
+import {DummyMultimedia} from "../../Services/Constants/DummyMultimedia.tsx";
+import {ProfileFriends} from "../../Components/Cards/ProfileFriends";
+
+export const Profile = () => {
+
+  const {userTag} = useParams();
+
+  if (DummyUser && DummyUser.tag === userTag) {
+    return (
+      <Box px={"xl"} py={"xs"}>
+        <Group align={"flex-start"} justify={"center"} gap={70}>
+          <Stack>
+            <CardProfileTop userDetails={DummyUser}/>
+            <ProfileAboutMe htmlContent={DummyUser.profileDetails ? DummyUser.profileDetails : ""}/>
+
+            {/*TODO: Implement post map*/}
+            {/*Here should be post map*/}
+          </Stack>
+          <Stack>
+            <ProfileMultimedia multimedia={DummyMultimedia}/>
+            <ProfileFriends friends={DummyUser.friends!}/>
+          </Stack>
+        </Group>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      Undefined
+    </>
+  );
+}

frontend/src/Pages/Profile/index.tsx

@@ -0,0 +1 @@
+export * from './Profile'

frontend/src/Pages/Root/Root.tsx

@@ -1,10 +1,11 @@
 import {Route, Routes} from "react-router-dom";
-import { Layout } from "../../Components/Layout";
-import { MainPage } from "../MainPage";
+import {Layout} from "../../Components/Layout";
+import {MainPage} from "../MainPage";
 import {Login} from "../Login";
 import {Register} from "../Register";
 import {NotFound} from "../NotFound";
 import {Recovery} from "../Recovery";
+import {Profile} from "../Profile";
 
 export const Root = () => {
   return(
@@ -14,6 +15,7 @@ export const Root = () => {
       <Route path="/passwordrecovery" element={ <Recovery/>} />
       <Route element={<Layout/>}>
         <Route path="/mainpage" element={ <MainPage/> }/>
+        <Route path="/profile/:userTag" element={<Profile/>}/>
       </Route>
       <Route path="*" element={ <NotFound/> }/>
     </Routes>