Merge pull request #283 from RMoodsTeam/279-page-skeletons

279 page skeletons

frontend/src/layouts/dashboard/sidebar/Sidebar.tsx

@@ -19,15 +19,15 @@ const sidebarItems: SidebarEntryProps[] = [
   {
     label: 'My Reports',
     icon: IconReport,
-    link: '/myreports',
+    link: '/user/reports',
   },
   {
     label: 'Browse',
     icon: IconSearch,
     initiallyOpened: true,
     links: [
-      { label: 'Reports', link: '/reports' },
-      { label: 'Users', link: '/users' },
+      { label: 'Reports', link: '/browse/reports' },
+      { label: 'Users', link: '/browse/users' },
     ],
   },
   {
@@ -49,8 +49,8 @@ const sidebarItems: SidebarEntryProps[] = [
     label: 'About',
     icon: IconInfoCircle,
     links: [
-      { label: 'FAQ', link: '/faq' },
-      { label: 'Thesis', link: '/thesis' },
+      { label: 'FAQ', link: '/about/faq' },
+      { label: 'Thesis', link: '/about/thesis' },
     ],
   },
 ];

frontend/src/main.tsx

@@ -7,7 +7,7 @@ import { RouterProvider } from 'react-router-dom';
 import router from './routes/router.tsx';
 import Providers from './providers/Providers.tsx';
 import { ErrorBoundary } from 'react-error-boundary';
-import { MainFallback } from './routes/fallbacks/MainFallback.tsx';
+import { MainFallback } from './routes/MainFallback.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

frontend/src/routes/fallbacks/PageFallback.tsx → frontend/src/routes/PageFallback.tsx

@@ -1,4 +1,4 @@
-import { Center, Stack, Title, Text, Card } from '@mantine/core';
+import { Card, Center, Stack, Text, Title } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
 
 export const PageFallback = ({ error }) => {

frontend/src/routes/about/page.tsx → frontend/src/routes/about/faq/page.tsx

@@ -1,7 +1,7 @@
-import Section from './Section';
+import Section from './Section.tsx';
 import { Box } from '@mantine/core';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PageFallback } from '../fallbacks/PageFallback.tsx';
+import { PageFallback } from '../../PageFallback.tsx';
 
 /**
  * About page, contains information about the project and the team.

frontend/src/routes/about/thesis/page.tsx

@@ -0,0 +1,19 @@
+import { Box, Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../../PageFallback';
+
+const ThesisPage = () => {
+  return (
+    <Box>
+      <Title order={1}>Thesis</Title>
+    </Box>
+  );
+};
+
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <ThesisPage />
+    </ErrorBoundary>
+  );
+}

frontend/src/routes/browse/reports/page.tsx

@@ -0,0 +1,19 @@
+import { Box, Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../../PageFallback';
+
+const BrowseReportsPage = () => {
+  return (
+    <Box>
+      <Title order={1}>Browse Reports</Title>
+    </Box>
+  );
+};
+
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <BrowseReportsPage />
+    </ErrorBoundary>
+  );
+}

frontend/src/routes/browse/users/page.tsx

@@ -0,0 +1,19 @@
+import { Box, Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../../PageFallback';
+
+const BrowseUsersPage = () => {
+  return (
+    <Box>
+      <Title order={1}>Browse Users</Title>
+    </Box>
+  );
+};
+
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <BrowseUsersPage />
+    </ErrorBoundary>
+  );
+}

frontend/src/routes/dashboard/page.tsx

@@ -1,6 +1,6 @@
 import { Title } from '@mantine/core';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PageFallback } from '../fallbacks/PageFallback.tsx';
+import { PageFallback } from '../PageFallback.tsx';
 
 /**
  * Dashboard page, gets user info asynchronously

frontend/src/routes/login/page.tsx

@@ -1,13 +1,13 @@
 import { useGoogleLogin } from '@react-oauth/google';
-import GoogleSignInButton from './googleSignInButton/GoogleSignInButton.tsx';
+import GoogleSignInButton from './ui/googleSignInButton/GoogleSignInButton.tsx';
 import { useSetAtom } from 'jotai';
 import Cookies from 'js-cookie';
 import { userInfoAtom } from '../../atoms';
 import { useNavigate } from 'react-router-dom';
-import { Center, Stack, Title, Box, Card } from '@mantine/core';
+import { Box, Card, Center, Stack, Title } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PageFallback } from '../fallbacks/PageFallback.tsx';
+import { PageFallback } from '../PageFallback.tsx';
 
 /**
  * Login card with Google sign in button

frontend/src/routes/login/googleSignInButton/GoogleSignInButton.tsx → frontend/src/routes/login/ui/googleSignInButton/GoogleSignInButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Image, Center, Box } from '@mantine/core';
+import { Box, Button, Center, Image } from '@mantine/core';
 import classes from './GoogleSignInButton.module.scss';
 
 export default function GoogleSignInButton({

frontend/src/routes/page.tsx

@@ -1,7 +1,7 @@
 import Demo from '../components/Demo';
 import { Center, Container, Title } from '@mantine/core';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PageFallback } from './fallbacks/PageFallback.tsx';
+import { PageFallback } from './PageFallback.tsx';
 
 const Root = () => {
   return (

frontend/src/routes/releases/page.tsx

@@ -0,0 +1,19 @@
+import { Box, Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../PageFallback.tsx';
+
+const ReleasesPage = () => {
+  return (
+    <Box>
+      <Title order={1}>Releases</Title>
+    </Box>
+  );
+};
+
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <ReleasesPage />
+    </ErrorBoundary>
+  );
+}

frontend/src/routes/report/page.tsx

@@ -16,18 +16,13 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
-import { DataSource } from './schema.ts';
+import { DataSource, ReportFormValidationSchema, ReportFormValues, RowWrapper } from './schema.ts';
 import { zodResolver } from 'mantine-form-zod-resolver';
 import { DataSourceTable } from './DataSourceTable.tsx';
-import {
-  ReportFormValidationSchema,
-  ReportFormValues,
-  RowWrapper,
-} from './schema.ts';
 import { transformJson } from './transformJson.ts';
 import { RMoodsClient } from '../../rmoods/client/RMoodsClient.ts';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PageFallback } from '../fallbacks/PageFallback.tsx';
+import { PageFallback } from '../PageFallback.tsx';
 import { IconLock, IconWorld } from '@tabler/icons-react';
 
 /**

frontend/src/routes/router.tsx

@@ -1,15 +1,21 @@
 import { createHashRouter } from 'react-router-dom';
-import About from './about/page.tsx';
+import Faq from './about/faq/page.tsx';
 import Dashboard from './dashboard/page.tsx';
 import Login from './login/page.tsx';
 import Root from './page.tsx';
-import UserPage from './user/userPage/page.tsx';
+import UserPage from './user/page.tsx';
 import Report from './report/page.tsx';
 import Layout from '../layouts/standard/layout/Layout.tsx';
 import ProtectedRoute from './ProtectedRoute.tsx';
 import DashboardLayout from '../layouts/dashboard/layout/DashboardLayout.tsx';
 import Settings from './settings/page.tsx';
 import WebsocketProvider from '../providers/WebsocketProvider.tsx';
+import Releases from './releases/page.tsx';
+import Thesis from './about/thesis/page.tsx';
+import BrowseReports from './browse/reports/page.tsx';
+import BrowseUsers from './browse/users/page.tsx';
+import Sandbox from './sandbox/page.tsx';
+import UserReports from './user/reports/page.tsx';
 
 const router = createHashRouter([
   {
@@ -33,10 +39,30 @@ const router = createHashRouter([
         path: '/user',
         element: <UserPage />,
       },
+      {
+        path: '/user/reports',
+        element: <UserReports />,
+      },
       {
         path: '/settings',
         element: <Settings />,
       },
+      {
+        path: '/browse/reports',
+        element: <BrowseReports />,
+      },
+      {
+        path: '/browse/users',
+        element: <BrowseUsers />,
+      },
+      {
+        path: '/sandbox',
+        element: <Sandbox />,
+      },
+      {
+        path: '/releases',
+        element: <Releases />,
+      },
     ],
   },
   {
@@ -47,8 +73,12 @@ const router = createHashRouter([
         element: <Root />,
       },
       {
-        path: '/about',
-        element: <About />,
+        path: '/about/faq',
+        element: <Faq />,
+      },
+      {
+        path: '/about/thesis',
+        element: <Thesis />,
       },
       {
         path: '/login',

frontend/src/routes/sandbox/page.tsx

@@ -0,0 +1,19 @@
+import { Box, Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../PageFallback.tsx';
+
+const SandboxPage = () => {
+  return (
+    <Box>
+      <Title order={1}>NLP Sandbox</Title>
+    </Box>
+  );
+};
+
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <SandboxPage />
+    </ErrorBoundary>
+  );
+}

frontend/src/routes/settings/page.tsx

@@ -1,9 +1,13 @@
-import { Box } from '@mantine/core';
+import { Box, Title } from '@mantine/core';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PageFallback } from '../fallbacks/PageFallback.tsx';
+import { PageFallback } from '../PageFallback.tsx';
 
 const Settings = () => {
-  return <Box>Work in progress</Box>;
+  return (
+    <Box>
+      <Title order={1}>Settings</Title>
+    </Box>
+  );
 };
 
 export default function () {

frontend/src/routes/user/userPage/page.tsx → frontend/src/routes/user/page.tsx

@@ -1,14 +1,15 @@
-import { Box, Text, Loader, Flex } from '@mantine/core';
+import { Box, Flex, Loader, Text } from '@mantine/core';
 import Cookies from 'js-cookie';
 import { jwtDecode } from 'jwt-decode';
-import UserCard from '../userCard/UserCard.tsx';
-import StatisticItem from '../statisticItem/StatisticItem.tsx';
-import { JwtClaims } from '../../../rmoods/jwt.ts';
-import authFetch from '../../../rmoods/client/authFetch.ts';
+import UserCard from './ui/userCard/UserCard.tsx';
+import StatisticItem from './ui/statisticItem/StatisticItem.tsx';
+import { JwtClaims } from '../../rmoods/jwt.ts';
+import authFetch from '../../rmoods/client/authFetch.ts';
 import { useQuery } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PageFallback } from '../../fallbacks/PageFallback.tsx';
+import { PageFallback } from '../PageFallback.tsx';
 import classes from './page.module.scss';
+
 /**
  * User interface representing the user data.
  */

frontend/src/routes/user/reports/page.tsx

@@ -0,0 +1,19 @@
+import { Box, Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../../PageFallback';
+
+const UserReportsPage = () => {
+  return (
+    <Box>
+      <Title order={1}>My Reports</Title>
+    </Box>
+  );
+};
+
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <UserReportsPage />
+    </ErrorBoundary>
+  );
+}

frontend/src/routes/user/profilePicture/ProfilePicture.tsx → frontend/src/routes/user/ui/profilePicture/ProfilePicture.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Image, Box, Flex } from '@mantine/core';
-import { changeDefaultGoogleProfilePictureSize } from '../../../utility/changeDefaultGoogleProfilePictureSize.ts';
+import { Flex, Image } from '@mantine/core';
+import { changeDefaultGoogleProfilePictureSize } from '../../../../utility/changeDefaultGoogleProfilePictureSize.ts';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ProfilePictureFallback } from '../profilePictureFallback/ProfilePictureFallback.tsx';
 import classes from './ProfilePicture.module.scss';
+
 /**
  * Props for the ProfilePicture component.
  */

frontend/src/routes/user/statisticItem/StatisticItem.tsx → frontend/src/routes/user/ui/statisticItem/StatisticItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Text } from '@mantine/core';
 import classes from './StatisticItem.module.scss';
+
 /**
  * Props for the StatisticItem component.
  */

frontend/src/routes/user/userCard/UserCard.tsx → frontend/src/routes/user/ui/userCard/UserCard.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Box, Divider, Flex, Text, Title } from '@mantine/core';
 import ProfilePicture from '../profilePicture/ProfilePicture.tsx';
-import { User } from '../userPage/page.tsx';
+import { User } from '../../page.tsx';
 import classes from './UserCard.module.scss';
+
 /**
  * Props for the UserCard component.
  */