Merge pull request #57 from JimTheCat/CU-8696pcxy1_Create-Search-page…

…_Patryk-Kosiski Cu 8696pcxy1 create search page patryk kosiski
JimTheCat · Nov 20, 2024 · 105c637 · 105c637
2 parents 779e7ea + 1338c91
commit 105c637
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 9 deletions.
diff --git a/frontend/src/Components/Buttons/Menu/MenuButton.tsx b/frontend/src/Components/Buttons/Menu/MenuButton.tsx
@@ -1,21 +1,35 @@
 import {Button} from "@mantine/core";
 import React from "react";
+import {useLocation} from "react-router";
+import {useNavigate} from "react-router-dom";
 
 type MenuButtonProps = {
   text: string;
   icon: React.ReactNode;
+  href?: string;
 }
 
 export const MenuButton = (props: MenuButtonProps) => {
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const isActive = location.pathname === props.href;
+
   return (
     <Button
-      variant={"subtle"}
+      variant={isActive ? "outline" : "subtle"}
       size={"md"}
       leftSection={props.icon}
       autoContrast
       fullWidth
       justify={"flex-start"}
       color={"gray"}
+      onClick={() => {
+        if (props.href) {
+          navigate(props.href)
+        }
+      }}
     >
       {props.text}
     </Button>

diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
@@ -58,14 +58,14 @@ export const Navbar = () => {
         <Card mt={"lg"} p={"xs"} display={"flex"} h={"100%"} withBorder>
           <Stack justify={"space-between"} h={"100%"}>
             <Box>
-              <MenuButton icon={<IconHome/>} text={"Strona główna"}/>
-              <MenuButton icon={<IconZoom/>} text={"Wyszukaj"}/>
-              <MenuButton icon={<IconPencil/>} text={"Napisz post"}/>
-              <MenuButton icon={<IconUsers/>} text={"Znajomi"}/>
-              <MenuButton icon={<IconUsersGroup/>} text={"Grupy"}/>
-              <MenuButton icon={<IconUserPlus/>} text={"Obserwowani"}/>
-              <MenuButton icon={<IconUserHeart/>} text={"Matching"}/>
-              <MenuButton icon={<IconMail/>} text={"Wiadomości"}/>
+              <MenuButton icon={<IconHome/>} text={"Strona główna"} href={"/mainpage"}/>
+              <MenuButton icon={<IconZoom/>} text={"Wyszukaj"} href={"/search"}/>
+              <MenuButton icon={<IconPencil/>} text={"Napisz post"} href={"placeholder1"}/>
+              <MenuButton icon={<IconUsers/>} text={"Znajomi"} href={"placeholder2"}/>
+              <MenuButton icon={<IconUsersGroup/>} text={"Grupy"} href={"placeholder3"}/>
+              <MenuButton icon={<IconUserPlus/>} text={"Obserwowani"} href={"placeholder4"}/>
+              <MenuButton icon={<IconUserHeart/>} text={"Matching"} href={"placeholder5"}/>
+              <MenuButton icon={<IconMail/>} text={"Wiadomości"} href={"placeholder6"}/>
             </Box>
             <Box>
               <MenuButton icon={<IconSettings/>} text={"Ustawienia"}/>

diff --git a/frontend/src/Components/SuggestedUsers/SuggestedUsers.tsx b/frontend/src/Components/SuggestedUsers/SuggestedUsers.tsx
@@ -0,0 +1,41 @@
+import {Avatar, Button, Card, Divider, Group, Stack, Text} from "@mantine/core";
+
+type SuggestedUser = {
+  id: number;
+  name: string;
+  avatar: string;
+  tag: string;
+};
+
+const suggestedUsers: 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"},
+];
+
+export const SuggestedUsers = () => {
+  return (
+    <Card p="lg" withBorder mt="lg">
+      <Text size="lg" mb="sm">
+        Suggested Users
+      </Text>
+      <Divider mb={"md"}/>
+      <Group>
+        {suggestedUsers.map((user) => (
+          <Group key={user.id} justify="flex-start">
+            <Group>
+              <Avatar src={user.avatar} size={"lg"} radius={180}/>
+              <Stack gap={0}>
+                <Text>{user.name}</Text>
+                <Text>{user.tag}</Text>
+              </Stack>
+            </Group>
+            <Button variant="light" size="xs">
+              Follow
+            </Button>
+          </Group>
+        ))}
+      </Group>
+    </Card>
+  );
+};
diff --git a/frontend/src/Components/SuggestedUsers/index.tsx b/frontend/src/Components/SuggestedUsers/index.tsx
@@ -0,0 +1 @@
+export * from './SuggestedUsers';
diff --git a/frontend/src/Pages/Root/Root.tsx b/frontend/src/Pages/Root/Root.tsx
@@ -6,6 +6,7 @@ import {Register} from "../Register";
 import {NotFound} from "../NotFound";
 import {Recovery} from "../Recovery";
 import {Profile} from "../Profile";
+import {Search} from "../Search";
 
 export const Root = () => {
   return(
@@ -15,6 +16,7 @@ export const Root = () => {
       <Route path="/passwordrecovery" element={ <Recovery/>} />
       <Route element={<Layout/>}>
         <Route path="/mainpage" element={ <MainPage/> }/>
+        <Route path="/search" element={<Search/>}/>
         <Route path="/profile/:userTag" element={<Profile/>}/>
       </Route>
       <Route path="*" element={ <NotFound/> }/>

diff --git a/frontend/src/Pages/Search/Search.tsx b/frontend/src/Pages/Search/Search.tsx
@@ -0,0 +1,93 @@
+import {Autocomplete, AutocompleteProps, Avatar, Box, ComboboxItem, Group, OptionsFilter, Text} from '@mantine/core';
+import {useState} from 'react';
+import {IconSearch, IconX} from "@tabler/icons-react";
+import {SuggestedUsers} from "../../Components/SuggestedUsers";
+import {useNavigate} from "react-router-dom";
+
+type SuggestedUser = {
+  id: number;
+  name: string;
+  avatar: string;
+  tag: string;
+};
+
+// Mockowe dane użytkowników
+const users: SuggestedUser[] = [
+  {id: 1, name: 'Emily Johnson', avatar: 'https://via.placeholder.com/40', tag: '@emily'},
+  {id: 2, name: 'Ava Rodriguez', avatar: 'https://via.placeholder.com/40', tag: '@ava'},
+  {id: 3, name: 'Olivia Chen', avatar: 'https://via.placeholder.com/40', tag: '@olivia'},
+  {id: 4, name: 'Ethan Barnes', avatar: 'https://via.placeholder.com/40', tag: '@ethan'},
+  {id: 5, name: 'Mason Taylor', avatar: 'https://via.placeholder.com/40', tag: '@mason'},
+  {id: 6, name: "Jan Kowalski", avatar: 'https://via.placeholder.com/40', tag: '@johndoe'},
+];
+
+const usersData = users.reduce((acc, user) => {
+  acc[user.name] = {avatar: user.avatar, tag: user.tag};
+  return acc;
+}, {} as Record<string, { avatar: string; tag: string }>);
+
+const renderAutocompleteOption: AutocompleteProps['renderOption'] = ({option}) => (
+  <Group gap="sm">
+    <Avatar src={usersData[option.value].avatar} size={36} radius="xl"/>
+    <div>
+      <Text size="sm">{option.value}</Text>
+      <Text size="xs" opacity={0.5}>
+        {usersData[option.value].tag}
+      </Text>
+    </div>
+  </Group>
+);
+
+export const Search = () => {
+  const [query, setQuery] = useState('');
+  const navigate = useNavigate();
+
+  const convertedData = users
+    .map((user) => ({
+      value: user.name,
+      label: user.name,
+      tag: user.tag,
+      avatar: user.avatar,
+    }));
+
+  // Dane do Autocomplete (nazwy użytkowników i tagi użytkowników)
+  const optionsFilter: OptionsFilter = ({options, search}) => {
+
+    if (!search) {
+      return options;
+    }
+
+    return (options as ComboboxItem[]).filter((option) => {
+      const searchLower = search.toLowerCase();
+      return option.value.toLowerCase().includes(searchLower) || usersData[option.value].tag.toLowerCase().includes(searchLower);
+    });
+  };
+
+  const handleClear = () => {
+    setQuery('');
+  }
+
+  return (
+    <Box p="xl" w="60dvw">
+      <Autocomplete
+        data={convertedData}
+        leftSection={<IconSearch/>}
+        rightSection={query ? <IconX onClick={handleClear} style={{cursor: "pointer"}}/> : null}
+        renderOption={renderAutocompleteOption}
+        maxDropdownHeight={300}
+        placeholder="Wyszukaj"
+        filter={optionsFilter}
+        limit={5}
+        size="xl"
+        radius="xl"
+        value={query}
+        onChange={setQuery}
+        onOptionSubmit={(value) => {
+          navigate(`/profile/${usersData[value].tag}`)
+        }}
+      />
+
+      <SuggestedUsers/>
+    </Box>
+  );
+};
diff --git a/frontend/src/Pages/Search/index.tsx b/frontend/src/Pages/Search/index.tsx
@@ -0,0 +1 @@
+export * from './Search';
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -3,6 +3,7 @@ import {createRoot} from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
 import i18next from "i18next";
 import {createTheme, MantineProvider} from "@mantine/core";
 import {BrowserRouter} from "react-router-dom";