Merge pull request #63 from JimTheCat/CU-8696pcy8n_Create-friends-pag…

…e_Patryk-Kosiski Cu 8696pcy8n create friends page patryk kosiski
JimTheCat · Dec 2, 2024 · 4f12795 · 4f12795
2 parents f10008e + 608bec2
commit 4f12795
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 1 deletion.
diff --git a/frontend/src/Components/FriendDetailed/FriendDetailed.tsx b/frontend/src/Components/FriendDetailed/FriendDetailed.tsx
@@ -0,0 +1,26 @@
+import {Avatar, Card, Group, Stack, Text} from "@mantine/core";
+import {useNavigate} from "react-router-dom";
+
+export const FriendDetailed = (props: { friend: any }) => {
+
+  const navigate = useNavigate();
+
+  return (
+    <Card
+      p="lg"
+      withBorder
+      shadow={"lg"}
+      onClick={() => navigate(`/profile/${props.friend.tag}`)}
+      style={{cursor: "pointer"}}
+    >
+      {/*Friend detailed view*/}
+      <Group justify="space-between">
+        <Avatar src={props.friend.avatar} size={"lg"} radius={180}/>
+        <Stack gap={0}>
+          <Text>{props.friend.name}</Text>
+          <Text>{props.friend.tag}</Text>
+        </Stack>
+      </Group>
+    </Card>
+  );
+}
diff --git a/frontend/src/Components/FriendDetailed/index.tsx b/frontend/src/Components/FriendDetailed/index.tsx
@@ -0,0 +1 @@
+export * from './FriendDetailed';
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
@@ -61,7 +61,7 @@ export const Navbar = () => {
               <MenuButton icon={<IconHome/>} text={"Strona główna"} href={"/mainpage"}/>
               <MenuButton icon={<IconZoom/>} text={"Wyszukaj"} href={"/search"}/>
               <MenuButton icon={<IconPencil/>} text={"Napisz post"} href={"/createpost"}/>
-              <MenuButton icon={<IconUsers/>} text={"Znajomi"} href={"placeholder2"}/>
+              <MenuButton icon={<IconUsers/>} text={"Znajomi"} href={"/friends"}/>
               <MenuButton icon={<IconUsersGroup/>} text={"Grupy"} href={"placeholder3"}/>
               <MenuButton icon={<IconUserPlus/>} text={"Obserwowani"} href={"placeholder4"}/>
               <MenuButton icon={<IconUserHeart/>} text={"Matching"} href={"placeholder5"}/>

diff --git a/frontend/src/Pages/Friends/Friends.tsx b/frontend/src/Pages/Friends/Friends.tsx
@@ -0,0 +1,46 @@
+import {Card, Center, Group, SimpleGrid, Text, Title} from "@mantine/core";
+import {FriendDetailed} from "../../Components/FriendDetailed";
+
+type SuggestedUser = {
+  id: number;
+  name: string;
+  avatar: string;
+  tag: string;
+};
+
+const dummyUsers: SuggestedUser[] = [
+  {id: 1, name: "Alice Johnson", avatar: "https://via.placeholder.com/40", tag: "@alicejohnson"},
+  {id: 2, name: "Bob Smith", avatar: "https://via.placeholder.com/40", tag: "@bobsmith"},
+  {id: 3, name: "Charlie Brown", avatar: "https://via.placeholder.com/40", tag: "@charliebrown"},
+  {id: 4, name: "David Johnson", avatar: "https://via.placeholder.com/40", tag: "@davidjohnson"},
+  {id: 5, name: "Eve Johnson", avatar: "https://via.placeholder.com/40", tag: "@evejohnson"},
+  {id: 6, name: "Frank Johnson", avatar: "https://via.placeholder.com/40", tag: "@frankjohnson"},
+  {id: 7, name: "Grace Johnson", avatar: "https://via.placeholder.com/40", tag: "@gracejohnson"},
+  {id: 8, name: "Hannah Johnson", avatar: "https://via.placeholder.com/40", tag: "@hannahjohnson"},
+  {id: 9, name: "Isaac Johnson", avatar: "https://via.placeholder.com/40", tag: "@isaacjohnson"},
+  {id: 10, name: "Jack Johnson", avatar: "https://via.placeholder.com/40", tag: "@jackjohnson"},
+  {id: 11, name: "Katie Johnson", avatar: "https://via.placeholder.com/40", tag: "@katiejohnson"},
+];
+
+export const Friends = () => {
+  return (
+    <Center>
+      <Card shadow="sm" padding="lg" m={"md"} radius="md" w={"fit-content"} withBorder>
+        <Group justify={"space-between"} align={"flex-start"}>
+          <Title mb={"md"} order={2}>
+            List of friends
+          </Title>
+          <Text>
+            Total friends: {dummyUsers.length}
+          </Text>
+        </Group>
+        {/*List of friends*/}
+        <SimpleGrid cols={3} spacing="lg">
+          {dummyUsers.map((user) => (
+            <FriendDetailed key={user.id} friend={user}/>
+          ))}
+        </SimpleGrid>
+      </Card>
+    </Center>
+  )
+}
diff --git a/frontend/src/Pages/Friends/index.tsx b/frontend/src/Pages/Friends/index.tsx
@@ -0,0 +1 @@
+export * from './Friends'
diff --git a/frontend/src/Pages/Root/Root.tsx b/frontend/src/Pages/Root/Root.tsx
@@ -8,6 +8,7 @@ import {Recovery} from "../Recovery";
 import {Profile} from "../Profile";
 import {Search} from "../Search";
 import {Post} from "../Post";
+import {Friends} from "../Friends";
 import {Settings} from "../Settings";
 
 export const Root = () => {
@@ -21,6 +22,7 @@ export const Root = () => {
         <Route path="/search" element={<Search/>}/>
         <Route path="/profile/:userTag" element={<Profile/>}/>
         <Route path="/createpost" element={<Post/>}/>
+        <Route path="/friends" element={<Friends/>}/>
       </Route>
       <Route path="/settings" element={<Settings/>}/>