Merge pull request #86 from JimTheCat/CU-86975w8k1_Refactor-frontend-…

…structure_Patryk-Kosiski

refactor: Refactor structure of Frontend

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css'
 import {Route, Routes} from "react-router";
-import {Root} from "./Pages/Root";
+import {Root} from "./Features/Root";
 
 function App() {
   return (

frontend/src/Pages/CreatePost/CreatePost.tsx → frontend/src/Features/CreatePost/CreatePost.tsx

@@ -1,9 +1,9 @@
-import {RichEditor} from "../../Components/RichEditor";
+import {RichEditor} from "../shared/components/RichEditor";
 import {Button, Divider, Group, Modal} from "@mantine/core";
 import {useDisclosure} from "@mantine/hooks";
 import {IconPencil} from "@tabler/icons-react";
 import {useState} from "react";
-import api from "../../Services/api.ts";
+import api from "../shared/services/api.ts";
 import {useAlert} from "../../Providers/AlertProvider.tsx";
 
 export const CreatePost = () => {

frontend/src/Features/CreatePost/index.tsx

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

frontend/src/Pages/Friends/Friends.tsx → frontend/src/Features/Friends/Friends.tsx

@@ -1,5 +1,5 @@
 import {Card, Center, Group, SimpleGrid, Text, Title} from "@mantine/core";
-import {FriendDetailed} from "../../Components/FriendDetailed";
+import {FriendDetailed} from "./components/FriendDetailed";
 
 type SuggestedUser = {
   id: number;

frontend/src/Pages/Login/Login.tsx → frontend/src/Features/Login/Login.tsx

@@ -3,12 +3,12 @@ import {useForm} from "@mantine/form";
 import {useNavigate} from "react-router-dom";
 import {IconAt, IconLock} from "@tabler/icons-react";
 import {useTranslation} from "react-i18next";
-import {ParticleBg} from "../../Components/ParticleBg";
-import {Footer} from "../../Components/Footer";
-import {BluredGradient} from "../../Components/BluredGradient";
-import {useAuthStore} from "../../Services/authStore.ts";
-import api from "../../Services/api.ts";
-import {CenterContainer} from "../../Components/CenterContainer";
+import {ParticleBg} from "./components/ParticleBg";
+import {Footer} from "./components/Footer";
+import {BluredGradient} from "../shared/components/BluredGradient";
+import {useAuthStore} from "../shared/services/authStore.ts";
+import api from "../shared/services/api.ts";
+import {CenterContainer} from "../shared/components/CenterContainer";
 
 export const Login = () => {
 

frontend/src/Components/Footer/Footer.tsx → frontend/src/Features/Login/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import {Group, Text, useMantineColorScheme} from "@mantine/core";
-import {Languages} from "../../Services/Constants";
+import {Languages} from "../../../shared/consts";
 import {useTranslation} from "react-i18next";
 
 export const Footer = () => {

frontend/src/Pages/MainPage/MainPage.tsx → frontend/src/Features/MainPage/MainPage.tsx

@@ -1,8 +1,8 @@
 import {Box, Title} from "@mantine/core";
 import {useEffect, useState} from "react";
-import api from "../../Services/api.ts";
-import {Post} from "../../Components/Cards/Post";
-import {PostDTO} from "../../Services/DTOs/Post.tsx";
+import api from "../shared/services/api.ts";
+import {Post} from "../shared/components/Cards/Post";
+import {PostDTO} from "./types/Post.tsx";
 
 export const MainPage = () => {
 

frontend/src/Pages/Messenger/Messenger.tsx → frontend/src/Features/Messenger/Messenger.tsx

@@ -2,9 +2,9 @@ import {ActionIcon, Avatar, Group, Indicator, ScrollArea, Stack, Text, TextInput
 import {IconEdit, IconSearch} from "@tabler/icons-react";
 import {useEffect, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
-import {Chat} from "../../Components/Chat";
-import {UnselectedChat} from "../../Components/UnselectedChat";
-import {DateFormatter} from "../../Services/Utils/DateFormatter.tsx";
+import {Chat} from "./components/Chat";
+import {UnselectedChat} from "./components/UnselectedChat";
+import {DateFormatter} from "../shared/utils/DateFormatter.tsx";
 
 type DummyUserType = {
   conversationId: number;
@@ -159,15 +159,14 @@ export const Messenger = () => {
     );
   }
 
-  const simulateUserStatusChanges = (users: DummyUserType[]) => {
+  const getCryptoRandom = () => {
     const crypto = window.crypto;
+    const array = new Uint32Array(1);
+    crypto.getRandomValues(array);
+    return array[0] / (0xFFFFFFFF + 1); // Normalize to range 0–1
+  };
 
-    const getCryptoRandom = () => {
-      const array = new Uint32Array(1);
-      crypto.getRandomValues(array);
-      return array[0] / (0xFFFFFFFF + 1); // Normalize to range 0–1
-    };
-
+  const simulateUserStatusChanges = (users: DummyUserType[]) => {
     // swap Math.random() with crypto.getRandomValues() for better randomness
     users.forEach((user) => {
       setInterval(() => {
@@ -179,14 +178,6 @@ export const Messenger = () => {
   }
 
   const simulateUserActivity = (users: DummyUserType[]) => {
-    const crypto = window.crypto;
-
-    const getCryptoRandom = () => {
-      const array = new Uint32Array(1);
-      crypto.getRandomValues(array);
-      return array[0] / (0xFFFFFFFF + 1); // Normalize to range 0–1
-    };
-
     users.forEach((user) => {
       setInterval(() => {
         user.lastActiveAt = new Date();

frontend/src/Components/SingleMessage/SingleMessage.tsx → frontend/src/Features/Messenger/components/SingleMessage/SingleMessage.tsx

@@ -1,5 +1,5 @@
 import {Card, Group, Text, Tooltip} from "@mantine/core";
-import {DateFormatter} from "../../Services/Utils/DateFormatter.tsx";
+import {DateFormatter} from "../../../shared/utils/DateFormatter.tsx";
 
 type SingleMessageProps = {
   message: MessageType;

frontend/src/Pages/NotFound/NotFound.tsx → frontend/src/Features/NotFound/NotFound.tsx

@@ -1,8 +1,8 @@
 import {Button, Group, Image, Stack, Text} from "@mantine/core";
-import photo from "../../Assets/NotFound/cat-error.gif";
+import photo from "./assets/NotFound/cat-error.gif";
 import {useNavigate} from "react-router-dom";
 import {useTranslation} from "react-i18next";
-import {CenterContainer} from "../../Components/CenterContainer";
+import {CenterContainer} from "../shared/components/CenterContainer";
 
 export const NotFound = () => {
   const navigate = useNavigate();

frontend/src/Pages/Profile/Profile.tsx → frontend/src/Features/Profile/Profile.tsx

@@ -1,11 +1,11 @@
 import {useParams} from "react-router-dom";
-import {DummyUser} from "../../Services/Constants/DummyUser.tsx";
-import {CardProfileTop} from "../../Components/Cards/ProfileTop";
+import {DummyUser} from "./consts/DummyUser.tsx";
+import {CardProfileTop} from "./components/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";
+import {ProfileAboutMe} from "./components/ProfileAboutMe";
+import {ProfileMultimedia} from "./components/ProfileMultimedia";
+import {DummyMultimedia} from "./consts/DummyMultimedia.tsx";
+import {ProfileFriends} from "./components/ProfileFriends";
 
 export const Profile = () => {
 

frontend/src/Components/Cards/ProfileAboutMe/ProfileAboutMe.tsx → frontend/src/Features/Profile/components/ProfileAboutMe/ProfileAboutMe.tsx

@@ -1,5 +1,5 @@
 import {Card, Text} from "@mantine/core";
-import {InnerHtmlHandler} from "../../InnerHtmlHandler/InnerHtmlHandler.tsx";
+import {InnerHtmlHandler} from "../../../shared/components/InnerHtmlHandler";
 
 export const ProfileAboutMe = (props: { htmlContent: string }) => {
   return (

frontend/src/Components/Cards/ProfileFriends/ProfileFriends.tsx → frontend/src/Features/Profile/components/ProfileFriends/ProfileFriends.tsx

@@ -1,5 +1,5 @@
 import {Card, Grid, Group, Image, Text, UnstyledButton} from "@mantine/core";
-import {DummyFriendsType} from "../../../Services/Constants/DummyUser.tsx";
+import {DummyFriendsType} from "../../consts/DummyUser.tsx";
 import {useNavigate} from "react-router-dom";
 
 export const ProfileFriends = (props: { friends: DummyFriendsType }) => {

frontend/src/Features/Profile/components/ProfileFriends/index.tsx

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

frontend/src/Components/Cards/ProfileMultimedia/ProfileMultimedia.tsx → frontend/src/Features/Profile/components/ProfileMultimedia/ProfileMultimedia.tsx

@@ -1,5 +1,5 @@
 import {Card, Grid, Group, Image, Text, UnstyledButton} from "@mantine/core";
-import {Multimedia} from "../../../Services/Constants/DummyMultimedia.tsx";
+import {Multimedia} from "../../consts/DummyMultimedia.tsx";
 import {useNavigate} from "react-router-dom";
 
 export const ProfileMultimedia = (props: { multimedia: Multimedia[] }) => {

frontend/src/Components/Cards/ProfileTop/CardProfileTop.tsx → frontend/src/Features/Profile/components/ProfileTop/CardProfileTop.tsx

@@ -1,5 +1,5 @@
 import {Box, Card, Group, Image, Skeleton, Stack, Text} from "@mantine/core";
-import {DummyUserType} from "../../../Services/Constants/DummyUser.tsx";
+import {DummyUserType} from "../../consts/DummyUser.tsx";
 import {useState} from "react";
 
 

frontend/src/Pages/Recovery/Recovery.tsx → frontend/src/Features/Recovery/Recovery.tsx

@@ -3,7 +3,7 @@ import {useNavigate} from "react-router-dom";
 import React from "react";
 import {useForm} from "@mantine/form";
 import {useTranslation} from "react-i18next";
-import {CenterContainer} from "../../Components/CenterContainer";
+import {CenterContainer} from "../shared/components/CenterContainer";
 
 export const Recovery = () => {
   const [isSent, setIsSent] = React.useState(false);

frontend/src/Pages/Register/Register.tsx → frontend/src/Features/Register/Register.tsx

@@ -20,13 +20,13 @@ import {DatePickerInput} from "@mantine/dates";
 import {useState} from "react";
 import 'dayjs/locale/pl';
 import 'dayjs/locale/en';
-import {Gender} from "../../Services/Constants";
+import {Gender} from "./consts/Gender.tsx";
 import {useDisclosure} from "@mantine/hooks";
 import {IconCheck, IconX} from "@tabler/icons-react";
-import {CenterContainer} from "../../Components/CenterContainer";
-import {BluredGradient} from "../../Components/BluredGradient";
-import {RegisterDTO} from "../../Services/DTOs/Register.tsx";
-import api from "../../Services/api.ts";
+import {CenterContainer} from "../shared/components/CenterContainer";
+import {BluredGradient} from "../shared/components/BluredGradient";
+import {RegisterDTO} from "./types/Register.tsx";
+import api from "../shared/services/api.ts";
 
 function PasswordRequirement({meets, label}: { meets: boolean; label: string }) {
   return (
@@ -108,7 +108,7 @@ export const Register = () => {
   }
 
   const strength = getStrength(passwordValue);
-  let color = null;
+  let color: null | 'red' | 'yellow' | 'teal';
 
   if (strength === 100) color = 'teal';
   else if (strength > 50) color = 'yellow';

frontend/src/Pages/Root/Root.tsx → frontend/src/Features/Root/Root.tsx

@@ -1,5 +1,5 @@
 import {Route, Routes} from "react-router-dom";
-import {Layout} from "../../Components/Layout";
+import {Layout} from "./components/Layout";
 import {MainPage} from "../MainPage";
 import {Login} from "../Login";
 import {Register} from "../Register";
@@ -12,9 +12,9 @@ import {Groups} from "../Groups";
 import {Friends} from "../Friends";
 import {Settings} from "../Settings";
 import {Messenger} from "../Messenger";
-import {ProtectedRoute} from "../../Components/ProtectedRoute";
-import {PublicRoute} from "../../Components/PublicRoute";
-import {useAuthStore} from "../../Services/authStore.ts";
+import {ProtectedRoute} from "./components/ProtectedRoute";
+import {PublicRoute} from "./components/PublicRoute";
+import {useAuthStore} from "../shared/services/authStore.ts";
 
 export const Root = () => {
 

frontend/src/Components/Buttons/LogOut/LogOut.tsx → frontend/src/Features/Root/components/Buttons/LogOut/LogOut.tsx

@@ -1,6 +1,6 @@
 import {Button} from "@mantine/core";
 import {IconLogout} from "@tabler/icons-react";
-import {useAuthStore} from "../../../Services/authStore.ts";
+import {useAuthStore} from "../../../../shared/services/authStore.ts";
 import {useNavigate} from "react-router-dom";
 
 export const LogOut = () => {

frontend/src/Features/Root/components/Buttons/LogOut/index.tsx

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

frontend/src/Components/Navbar/Navbar.tsx → frontend/src/Features/Root/components/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import {AppShell, Avatar, Card, Group, Image, ScrollArea, Stack, Text} from "@mantine/core";
-import MeowHubLogo from "../../Assets/mh_logo.svg";
+import MeowHubLogo from "../../../../Assets/mh_logo.svg";
 import {MenuButton} from "../Buttons/Menu";
 import {
   IconHome,
@@ -11,13 +11,13 @@ import {
   IconUsersGroup,
   IconZoom
 } from "@tabler/icons-react";
-import {LogOut} from "../Buttons/LogOut/LogOut.tsx";
-import {useAuthStore} from "../../Services/authStore.ts";
+import {LogOut} from "../Buttons/LogOut";
+import {useAuthStore} from "../../../shared/services/authStore.ts";
 import {useNavigate} from "react-router-dom";
-import {CreatePost} from "../../Pages/CreatePost";
-import {BasicUserInfo} from "../../Services/DTOs/User.tsx";
+import {CreatePost} from "../../../CreatePost";
+import {BasicUserInfo} from "../../../shared/types/User.tsx";
 import {useEffect, useState} from "react";
-import api from "../../Services/api.ts";
+import api from "../../../shared/services/api.ts";
 
 export const Navbar = () => {
 

frontend/src/Components/ProtectedRoute/ProtectedRoute.tsx → frontend/src/Features/Root/components/ProtectedRoute/ProtectedRoute.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Navigate, Outlet} from 'react-router-dom';
-import {useAuthStore} from "../../Services/authStore.ts";
+import {useAuthStore} from "../../../shared/services/authStore.ts";
 
 export const ProtectedRoute: React.FC = () => {
   const {token} = useAuthStore();

frontend/src/Pages/Search/Search.tsx → frontend/src/Features/Search/Search.tsx

@@ -1,7 +1,7 @@
 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 {SuggestedUsers} from "./components/SuggestedUsers";
 import {useNavigate} from "react-router-dom";
 
 type SuggestedUser = {

frontend/src/Pages/Settings/Settings.tsx → frontend/src/Features/Settings/Settings.tsx

@@ -1,9 +1,9 @@
 import {AppShell, NavLink, ScrollArea, Text} from "@mantine/core";
 import {useHotkeys} from "@mantine/hooks";
 import {IconAdjustments, IconUserCog} from "@tabler/icons-react";
-import {Escape} from "../../Components/Escape";
+import {Escape} from "./components/Escape";
 import {useState} from "react";
-import {AppSettingsMenu, MenuContent, UserSettingsMenu} from "../../Services/Constants/NestedMenuSettings.tsx";
+import {AppSettingsMenu, MenuContent, UserSettingsMenu} from "./consts/NestedMenuSettings.tsx";
 
 export const Settings = () => {
 

frontend/src/Services/Constants/NestedMenuSettings.tsx → frontend/src/Features/Settings/consts/NestedMenuSettings.tsx

@@ -14,17 +14,17 @@ import {
   IconWand
 } from "@tabler/icons-react";
 import {ForwardRefExoticComponent, RefAttributes} from "react";
-import {MyAccount} from "../../Pages/Settings/Menu/MyAccount";
-import {Privacy} from "../../Pages/Settings/Menu/Privacy";
-import {Security} from "../../Pages/Settings/Menu/Security";
-import {Notifications} from "../../Pages/Settings/Menu/Notifications";
-import {Data} from "../../Pages/Settings/Menu/Data";
-import {Help} from "../../Pages/Settings/Menu/Help";
-import {General} from "../../Pages/Settings/Menu/General";
-import {Apperance} from "../../Pages/Settings/Menu/Apperance";
-import {Accessibility} from "../../Pages/Settings/Menu/Accessibility";
-import {Language} from "../../Pages/Settings/Menu/Language";
-import {About} from "../../Pages/Settings/Menu/About";
+import {MyAccount} from "../components/Menu/MyAccount";
+import {Privacy} from "../components/Menu/Privacy";
+import {Security} from "../components/Menu/Security";
+import {Notifications} from "../components/Menu/Notifications";
+import {Data} from "../components/Menu/Data";
+import {Help} from "../components/Menu/Help";
+import {General} from "../components/Menu/General";
+import {Apperance} from "../components/Menu/Apperance";
+import {Accessibility} from "../components/Menu/Accessibility";
+import {Language} from "../components/Menu/Language";
+import {About} from "../components/Menu/About";
 
 type NestedMenuSettingsType = {
   uuid: number;

frontend/src/Components/Cards/Post/Post.tsx → frontend/src/Features/shared/components/Cards/Post/Post.tsx

@@ -11,13 +11,13 @@ import {
   Stack,
   Text
 } from "@mantine/core";
-import {User} from "../../../Services/DTOs/User.tsx";
+import {User} from "../../../types/User.tsx";
 import {InnerHtmlHandler} from "../../InnerHtmlHandler";
-import {DateFormatter} from "../../../Services/Utils/DateFormatter.tsx";
+import {DateFormatter} from "../../../utils/DateFormatter.tsx";
 import {IconDots, IconMessage, IconPaw, IconShare3} from "@tabler/icons-react";
-import {useAuthStore} from "../../../Services/authStore.ts";
+import {useAuthStore} from "../../../services/authStore.ts";
 import {useNavigate} from "react-router-dom";
-import {ImageWithSkeleton} from "../../ImageWithSkeleton/ImageWithSkeleton.tsx";
+import {ImageWithSkeleton} from "../../ImageWithSkeleton";
 
 type PostProps = {
   ownerLogin: string;

frontend/src/Features/shared/components/Cards/Post/index.tsx

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

frontend/src/Features/shared/components/CookiesPopup/index.tsx

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

frontend/src/Features/shared/components/ImageWithSkeleton/index.tsx

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

frontend/src/Features/shared/consts/index.tsx

@@ -0,0 +1 @@
+export {Languages} from './Languages';

frontend/src/Providers/AlertProvider.tsx

@@ -1,7 +1,7 @@
 // src/providers/AlertProvider.tsx
 import React, {createContext, ReactNode, useContext, useMemo} from 'react';
 import {Notifications, showNotification} from '@mantine/notifications';
-import {setApiErrorHandler} from "../Services/api.ts";
+import {setApiErrorHandler} from "../Features/shared/services/api.ts";
 
 // Context type
 interface AlertContextType {