Merge pull request #26 from TIHLDE/dev

Merge dev into main

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2022: true,
+    node: true,
+  },
+  extends: [
+    'next/core-web-vitals',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 13,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    '@next/next/no-pages-dir': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@next/next/no-img-element': 'off',
+    '@typescript-eslint/ban-types': 'off',
+  },
+  overrides: [
+    {
+      files: ["@/app/**/*.{js,jsx,ts,tsx}"],
+    },
+  ],
+};

.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: Continuous Integration
+
+on: [push, pull_request]
+
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - run: npm install
+
+      - name: Run Prettier
+        run: npm run prettier

.gitignore

@@ -26,10 +26,13 @@ yarn-error.log*
 
 # local env files
 .env*.local
-
+.env
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#
+.idea

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

app/api/fetch.ts

@@ -0,0 +1,50 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import { getClientCookie } from '@/app/utils/stores/cookieStore';
+
+const API_URL = process.env.VITE_API_URL || 'http://localhost:8000/';
+
+interface IFetchOptions extends Omit<AxiosRequestConfig, 'url'> {
+  withAuth?: boolean;
+  file?: File | File[] | Blob;
+}
+
+export const IFetch = async <T = any>(
+  endpoint: string,
+  options?: IFetchOptions,
+): Promise<T> => {
+  const headers: Record<string, string> = {};
+
+  if (options?.withAuth) {
+    const token = getClientCookie('tokenDrinking');
+    if (token) {
+      headers.Authorization = `Bearer ${token}`;
+    }
+  }
+
+  if (!options?.file) {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  const config: AxiosRequestConfig = {
+    url: `${API_URL}${endpoint}`,
+    ...options,
+  };
+
+  config.headers = { ...headers, ...(options?.headers ?? {}) };
+
+  if (options?.file) {
+    const formData = new FormData();
+
+    if (Array.isArray(options.file)) {
+      options.file.forEach((file) => formData.append('file', file));
+    } else {
+      formData.append('file', options.file);
+    }
+
+    config.data = formData;
+    config.headers['Content-Type'] = 'multipart/form-data';
+  }
+
+  const response: AxiosResponse<T> = await axios(config);
+  return response.data;
+};

app/api/user.ts

@@ -0,0 +1,28 @@
+import { IFetch } from '@/app/api/fetch';
+
+const API_URL = 'http://localhost:8000/';
+const AUTH_ENDPOINT = 'auth';
+
+interface LoginRequestResponse {
+  token?: string;
+  user?: any;
+}
+
+export const authenticate  = async (
+  username: string,
+  password: string,
+): Promise<LoginRequestResponse> => {
+  const endpoint = `${AUTH_ENDPOINT}/login/`;
+
+  const data = {
+    user_id: username,
+    password: password,
+  };
+
+  const response = await IFetch<LoginRequestResponse>(endpoint, {
+    method: 'POST',
+    data: data,
+  });
+
+  return response;
+};

app/components/loading.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col justify-center items-center h-screen">
+        <FontAwesomeIcon
+          icon={faCog}
+          className="text-primary w-[100px] animate-spin"
+        />
+        <p className="text-2xl mt-4">Please wait while it is loading..</p>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -3,3 +3,58 @@
 @tailwind utilities;
 
 
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 221.2 83.2% 53.3%;
+        --radius: 0.75rem;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 217.2 91.2% 59.8%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 224.3 76.3% 48%;
+    }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/hooks/useUser.ts

@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react';
+import { authenticate } from '@/app/api/user';
+import { setClientCookie } from '@/app/utils/stores/cookieStore';
+
+export const useUser = () => {
+  const [user, setUser] = useState<any | null>(null);
+
+  const login = useCallback(async (username: string, password: string) => {
+    const data = await authenticate(username, password);
+    setUser(data.user);
+    setClientCookie('tokenDrinking', data.token, { expires: 365 });
+  }, []);
+
+  return {
+    user,
+    login,
+  };
+};

app/layout.tsx

@@ -1,31 +1,36 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+'use client';
+import './globals.css';
+import { Inter } from 'next/font/google';
+import { AuthProvider } from '@/app/user/auth/context/AuthContext';
 
 // components
-import Navbar from './components/defaults/navbar'
-import Footer from './components/defaults/footer'
+import Navbar from '../components/layout/navbar';
+import Footer from '../components/layout/footer';
+import { ThemeProvider } from 'next-themes';
 
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <Navbar />
-        {children}
-        <Footer />
+    <AuthProvider>
+      <html lang="en">
+        <body className={inter.className}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <Navbar />
+            {children}
+            <Footer />
+          </ThemeProvider>
         </body>
-    </html>
-  )
+      </html>
+    </AuthProvider>
+  );
 }