Merge pull request #20 from reedoooo/newBranch

.eslintignore

@@ -0,0 +1,14 @@
+**/*.test.js
+**/*.spec.js
+**/*.scss
+**/*.css
+**/*.html
+**/*.json
+**/*.md
+**/*.yml
+**/node_modules/*
+**/*.min.js
+**/vendor/*
+**/coverage/*
+**/build/*
+**/docs/*

.eslintrc.js

@@ -0,0 +1,51 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+    node: true,
+    commonjs: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint', 'prettier'],
+  rules: {
+    'no-console': 'off',
+    indent: ['error', 2],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single', { avoidEscape: true }],
+    semi: ['error', 'always'],
+    'no-unused-vars': [1, { vars: 'local', args: 'none' }],
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        parser: 'flow',
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

.eslintrc.json

@@ -0,0 +1,62 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "node": true,
+    "commonjs": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "globals": {
+    "fail": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2018
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier", "prettier-eslint"],
+  "rules": {
+    "no-console": "off",
+    "indent": ["error", 2],
+    "@typescript-eslint/indent": [
+      "error",
+      2,
+      {
+          "CallExpression": {
+              "arguments": "first"
+          },
+          "FunctionDeclaration": {
+              "parameters": "first"
+          },
+          "FunctionExpression": {
+              "parameters": "first"
+          },
+          "offsetTernaryExpressions": true
+      }
+  ],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "single", { "avoidEscape": true }],
+    "semi": ["error", "always"],
+    "no-unused-vars": [1, { "vars": "local", "args": "none" }],
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "parser": "flow"
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -239,10 +239,6 @@ $RECYCLE.BIN/
 cleanup
 Dockerfile
 docker-compose.yml
-.prettierrc
-.eslintrc.js
-.eslintrc.json
-.eslintignore
 
 
 # End of https://www.gitignore.io/api/node,macos,linux,windows,webstorm,visualstudiocodenode_modules

.prettierrc

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

package.json

@@ -48,7 +48,7 @@
     "react": "^18.2.0",
     "react-awesome-slider": "^4.1.0",
     "react-bootstrap": "^2.8.0",
-    "react-cookies": "^0.1.1",
+    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-github-calendar": "^4.0.1",

src/assets/styles/App.scss

@@ -812,6 +812,7 @@ button:focus {
 /* Projects */
 /* --------- */
 .project-section {
+  // background: url('../images/bg2.jpg') no-repeat;
   position: relative !important;
   padding-top: 150px !important;
   padding-bottom: 30px !important;

src/containers/login/UserProfile.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
-import cookie from 'react-cookies';
+import { useCookies } from 'react-cookie';
 import {
   Box,
   Center,
@@ -48,7 +48,8 @@ const theme = extendTheme({
 
 const UserProfile = () => {
   const toast = useToast();
-  const token = cookie.load('auth');
+  const [cookies] = useCookies(['auth']);
+  const token = cookies.auth;
   const [userData, setUserData] = useState(null);
   const [editData, setEditData] = useState(null);
   const [fetchError, setFetchError] = useState(false);
@@ -106,7 +107,7 @@ const UserProfile = () => {
   };
 
   useEffect(() => {
-    if (cookie.load('userCookie') && token && !fetchError) {
+    if (token && !fetchError) {
       fetchData();
     }
   }, [token, toast, fetchData, fetchError]);

src/containers/projects/Project.css

@@ -15,6 +15,18 @@
   gap: 1rem 1rem;
 }
 
+/* .project-container {
+  background: url('../../assets/images/bg2.jpg') no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  min-height: 100vh;
+  position: relative;
+  z-index: -1;
+} */
+
+
 /* Media Query */
 @media (max-width: 1380px) {
   .project-title {

src/containers/projects/ProjectContainer.js

@@ -3,6 +3,8 @@ import axios from 'axios';
 import ProjectDetailsModal from '../../components/modals/Modal_ProjectDetails';
 import NavBar from '../../components/headings/navbar/Navigation';
 import ProjectsComponent from '../../components/projects/ProjectsComponent';
+import { Spinner } from '@chakra-ui/react';
+import './Project.css';
 
 const ProjectContainer = (props) => {
   const [searchInput, setSearchInput] = useState('');
@@ -70,10 +72,11 @@ const ProjectContainer = (props) => {
   };
 
   console.log('ProjectContainer.js: props.profileData', props.profileData);
+
   return (
-    <>
+    <div className="project-container">
       {loading ? (
-        <div>Loading...</div>
+        <Spinner size="xl" />
       ) : (
         <>
           <NavBar />
@@ -97,7 +100,7 @@ const ProjectContainer = (props) => {
       )}
 
       {error && <div>Error: {error.message}</div>}
-    </>
+    </div>
   );
 };
 

src/context/Auth/authContext.js

@@ -1,22 +1,20 @@
 import React, { useEffect, useCallback } from 'react';
-import cookie from 'react-cookies';
+import { useCookies } from 'react-cookie';
 import jwt_decode from 'jwt-decode';
 import axios from 'axios';
 
 export const AuthContext = React.createContext();
 
 export default function AuthProvider(props) {
+  const [cookies, setCookie, removeCookie] = useCookies(['auth', 'userCookie']);
   const [isLoggedIn, setIsLoggedIn] = React.useState(false);
   const [user, setUser] = React.useState({ capabilities: [] });
   const [error, setError] = React.useState(null);
-  const [token, setToken] = React.useState(undefined);
+  const [token, setToken] = React.useState(cookies.auth);
 
   const setLoginState = (loggedIn, token, user, error) => {
-    cookie.save('auth', token);
-    // when setting the cookie:
-    console.log('Setting userCookie...');
-    cookie.save('userCookie', user);
-    console.log('userCookie set to: ', cookie.load('userCookie'));
+    setCookie('auth', token);
+    setCookie('userCookie', user);
     setIsLoggedIn(loggedIn);
     setToken(token);
     setUser(user);
@@ -35,12 +33,10 @@ export default function AuthProvider(props) {
       };
 
       const response = await axios(options);
-      console.log('Validate token response: ', response.data);
       if (response.status === 200) {
         setUser((prevUser) => ({ ...prevUser, ...response.data }));
       }
     } catch (e) {
-      console.error('Token validation error: ', e);
       setLoginState(false, null, {}, e);
     }
   }, []);
@@ -49,30 +45,21 @@ export default function AuthProvider(props) {
     user?.login_data?.role_data?.capabilities?.includes(capability);
 
   const login = async (username, password) => {
-    // Create a login_data object to send to server
-    const login_data = { username, password };
-
     try {
       const response = await axios.post(
         `${process.env.REACT_APP_SERVER}/api/users/signin`,
-        login_data,
+        { username, password },
       );
-      console.log('Login response: ', response.data);
       validateToken(response.data.token);
       return response.data.token;
     } catch (error) {
-      console.error('Login error: ', error);
       setLoginState(false, null, {}, error);
     }
   };
 
   const signup = async (username, password, basic_info, role_data) => {
     const data = {
-      login_data: {
-        username,
-        password,
-        role_data, // Add this default value or pass role_data when calling this function
-      },
+      login_data: { username, password, role_data },
       basic_info,
     };
 
@@ -81,26 +68,24 @@ export default function AuthProvider(props) {
         `${process.env.REACT_APP_SERVER}/api/users/signup`,
         data,
       );
-      console.log('Signup response: ', response.data);
       validateToken(response.data.token);
       return response.data.token;
     } catch (error) {
-      console.error('Signup error: ', error);
       setLoginState(false, null, {}, error);
     }
   };
 
   const logout = () => {
-    cookie.remove('auth');
+    removeCookie('auth');
+    removeCookie('userCookie');
     setLoginState(false, null, {});
   };
 
   useEffect(() => {
     const qs = new URLSearchParams(window.location.search);
-    const cookieToken = cookie.load('auth');
-    const tokenCheck = qs.get('token') || cookieToken || null;
+    const tokenCheck = qs.get('token') || cookies.auth || null;
     validateToken(tokenCheck);
-  }, [validateToken]);
+  }, [validateToken, cookies.auth]);
 
   return (
     <AuthContext.Provider

src/pages/home/Home.css

@@ -0,0 +1,8 @@
+/* .home-container {
+  background: url('../../assets/images/bg2.jpg') no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  height: 100%;
+} */