Merge remote-tracking branch 'origin/main' into epic/DEV-6-events

.github/workflows/autoupdate.yml

@@ -0,0 +1,18 @@
+name: autoupdate
+on:
+  # This will trigger on all pushes to all branches.
+  push:
+  # Alternatively, you can only trigger if commits are pushed to certain branches, e.g.:
+   branches:
+     - main
+
+jobs:
+  autoupdate:
+    name: autoupdate
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: docker://chinthakagodawita/autoupdate-action:v1
+        env:
+          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+          PR_FILTER: "labelled"
+          PR_LABELS: "epic"

package.json

@@ -13,12 +13,20 @@
   "dependencies": {
     "@tanstack/react-query": "^5.18.0",
     "@tanstack/react-query-devtools": "^5.18.0",
+    "@types/js-cookie": "^3.0.6",
+    "@uidotdev/usehooks": "^2.4.1",
     "date-fns": "^3.3.1",
+    "js-cookie": "^3.0.5",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.4",
     "msw": "^2.1.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "sort-by": "^1.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.13",
     "@types/react": "^18.2.43",
@@ -31,8 +39,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "jsdom": "^24.0.0",
-    "typescript": "^5.2.2",
+    "tsc-alias": "^1.8.8",
+    "typescript": "^5.4.2",
     "vite": "^5.0.8",
+    "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.2.2"
   },
   "msw": {

src/api/authentication.ts

@@ -0,0 +1,47 @@
+import resolveURL from "./fetch";
+import Cookies from "js-cookie";
+
+const LOGIN_URL = resolveURL('/auth/login');
+const LOGOUT_URL = resolveURL('/auth/logout');
+const GET_CSRF_URL = resolveURL('/auth/csrf');
+
+export const signIn = async (username: string, password: string) => {
+  const csrfmiddlewaretoken = Cookies.get("csrftoken");
+  if (csrfmiddlewaretoken === undefined) throw new Error("No CSRF Token Present")
+  return await fetch(LOGIN_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    credentials: 'include',
+    body: JSON.stringify({username, password, csrfmiddlewaretoken}),
+  });
+};
+
+
+export const signOut = async (): Promise<Response> => {
+  const csrfmiddlewaretoken = Cookies.get("csrftoken");
+  if (csrfmiddlewaretoken === undefined) throw new Error("No CSRF Token Present")
+  const response = await fetch(LOGOUT_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    credentials: 'include',
+    body: JSON.stringify({ csrfmiddlewaretoken })
+  });
+
+  Cookies.remove("csrftoken")
+
+  return response;
+};
+
+export const getCSRF = async (): Promise<Response> => {
+  return await fetch(GET_CSRF_URL, {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json"
+    },
+  });
+};

src/api/fetch.ts

@@ -1,3 +1,4 @@
+
 const setApiURL = () => {
   if (import.meta.env.DEV) {
     return import.meta.env.VITE_IGNORE_MSW.toLowerCase() === "true" ? "http://localhost:8000" : "http://localhost:5173"

src/assets/css/authentication/MobileLoginContainer.module.css

@@ -0,0 +1,50 @@
+/* MobileLoginContainer.module.css */
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Example to fill the screen */
+    padding: 20px; /* Padding for smaller screens */
+    background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
+    border: 1px black solid;
+  }
+
+
+
+/* For small mobile phones */
+@media (max-width: 480px) {
+    /* styles for screens smaller than 600px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        min-width: 320px; /* But not too small */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+      }
+}
+
+/* For large mobile phones */
+@media (min-width: 481px) and (max-width: 768px) {
+    /* styles for screens smaller than 600px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+      }
+}
+
+/* For tablets */
+@media (min-width: 768px) and (max-width: 1024px) {
+    /* styles for screens between 601px and 1024px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+    }
+}
+

src/assets/css/authentication/WebLoginContainer.module.css

@@ -0,0 +1,22 @@
+/* WebLoginContainer.module.css */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Example to fill the screen */
+  background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
+  border: 1px black solid;
+  }
+
+  /* For desktops */
+@media (min-width: 1025px) {
+  /* styles for screens larger than 1024px */
+}
+  .loginForm {
+    width: 100%; /* Full width on mobile */
+    max-width: 1280px; /* But not too wide */
+    padding: 20px;
+    background-color: white;
+    border-radius: 4px;
+    /* Add more styling as needed */
+  }

src/components/authentication/MobileLoginContainer.tsx

@@ -0,0 +1,13 @@
+import styles from '../../assets/css/authentication/MobileLoginContainer.module.css'; // Import mobile-specific CSS
+
+const MobileLoginContainer = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.loginForm}>
+        {/* Your login form goes here */}
+      </div>
+    </div>
+  );
+}
+
+export default MobileLoginContainer;

src/components/authentication/WebLoginContainer.tsx

@@ -0,0 +1,13 @@
+import styles from '../../assets/css/authentication/WebLoginContainer.module.css'; // Import web-specific CSS
+
+const WebLoginContainer = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.loginForm}>
+        {/* Your login form goes here */}
+      </div>
+    </div>
+  );
+}
+
+export default WebLoginContainer;

src/components/constants.tsx

@@ -0,0 +1,8 @@
+export const BREAKPOINTS = {
+  XS: 0,
+  SM: 576,
+  MD: 768,
+  LG: 992,
+  XL: 1200,
+  XXL: 1400
+}

src/main.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import './assets/css/index.css'
+import { RouterProvider } from "react-router-dom";
+
+import router from "routes/router.tsx";
+import 'css/reset.css'
 
 const queryClient = new QueryClient()
 
@@ -14,14 +16,14 @@ async function enableMocking() {
 
   const { worker } = await import('./mocks/worker')
 
-  return worker.start()
+  return worker.start({ onUnhandledRequest: "bypass" })
 }
 
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
-        <App />
+        <RouterProvider router={router}/>
         <ReactQueryDevtools/>
       </QueryClientProvider>
     </React.StrictMode>,