Merge pull request #805 from hackforla/folder-restructure

Frontend folder restructure

backend/README.md

@@ -27,11 +27,11 @@ Run `python -V` to check the Python version.
 
 #### Configuration
 
-The API configuration must be specified before running the application. Configuration variables are specified as entries within a `.env` file located within the `api-v2` directory. To get started, create a `.env` file within `/api-v2` and copy the values from `.env.example` into the new `.env` file. You may have to contact someone from the development team to get the necessary values.
+The API configuration must be specified before running the application. Configuration variables are specified as entries within a `.env` file located within the `backend` directory. To get started, create a `.env` file within `/backend` and copy the values from `.env.example` into the new `.env` file. You may have to contact someone from the development team to get the necessary values.
 
 #### Setup and Run
 
-Once the `.env` file has been configured and Poetry is installed, run the following commands in the `api-v2` directory to install the required development dependencies and run the application.
+Once the `.env` file has been configured and Poetry is installed, run the following commands in the `backend` directory to install the required development dependencies and run the application.
 
 ```shell
 poetry install                      # Installs all dependencies

frontend/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
-cd app
+cd frontend
 npm run pre-commit

frontend/README.md

@@ -14,11 +14,11 @@ The minimum node version enforced is currently 20+, which is the current LTS ver
 
 1. Clone the repository to a directory on your computer
 2. Inside a terminal change directories to the root `HomeUniteUs/` directory
-3. Navigate to the the `app/` directory `cd app/`
+3. Navigate to the the `frontend/` directory: `cd frontend/`
 4. Run the command `npm install` to download all dependencies from the local package.json
 5. Create a local `.env` file and copy the contents from `.env.example`
 6. Message a team member to obtain values for the .env file
-7. From the `app/` directory run `npm run dev` to start a development server at `http://127.0.0.1:4040/`
+7. From the `frontend/` directory run `npm run dev` to start a development server at `http://127.0.0.1:4040/`
 
 The setup for the front end application is now complete and you should see the website running in your browser at the listed port.
 
@@ -62,11 +62,29 @@ For production builds, vite preforms a string replacement on the `import.meta.en
 
 The table below describes the environment variables that are used by this app:
 
-| Variable | Required? | Example | Description |
-|----------|-----------|---------|-------------|
-| `VITE_HUU_API_BASE_URL` | YES | http://localhost:8080/api/ | The HUU API's base URL. In a development environment (mode is 'development' or 'test'): if this variable is not defined, then `http://localhost:4040/api/` will be used by default. In non-development environment: if this variable is not defined, then the build will throw an error. |
-|          |           |         |             |
+| Variable                | Required? | Example                    | Description                                                                                                                                                                                                                                                                              |
+| ----------------------- | --------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `VITE_HUU_API_BASE_URL` | YES       | http://localhost:8080/api/ | The HUU API's base URL. In a development environment (mode is 'development' or 'test'): if this variable is not defined, then `http://localhost:4040/api/` will be used by default. In non-development environment: if this variable is not defined, then the build will throw an error. |
+|                         |           |                            |                                                                                                                                                                                                                                                                                          |
 
 ## Production
 
 This application is statically compiled using `npm run build`. The files created by the build command are placed in a `dist` directory. Those files are then placed into a directory served by `Nginx`. The configuration environment variables are expected to exist prior to building this application.
+
+## Folder Structure
+
+The `frontend/` directory is organized as follows:
+
+- `src/` - The source code for the frontend application
+  - `features/` - Contains the components for the application organized by feature as well as a `/ui` for shared components
+    - `feature/` - Inside the features folder are folders containing components for a specific feature along with any other required files.
+      - `hooks/` - Hooks related to the feature
+      - `helpers/` - Helper functions related to the feature
+      - `__tests__` - Tests for components in the feature
+      - `index.ts` - A file that exports any components that need to be accessed outside of the feature folder
+  - `pages/` - Contains all pages that are rendered by the application. These can be organized by features and contain `hooks/`, `helpers/`, and `__tests__` subfolders as well.
+  - `hooks/` - Hooks that are shared across the application
+  - `redux/` - Contains the redux store, state slices, and helpers for the application
+  - `services/` - Code related to interfacing with any external APIs
+  - `theme/` - Any files related to MUI theming and overrides
+  - `utils/` - All utility functions used throughout the application

frontend/package.json

@@ -21,7 +21,7 @@
     "build-storybook": "build-storybook",
     "lint": "eslint . --ext ts --ext tsx --max-warnings 0 --fix",
     "type-check": "npx tsc --noEmit",
-    "prepare": "cd .. && husky install app/.husky",
+    "prepare": "cd .. && husky install frontend/.husky",
     "pre-commit": "lint-staged",
     "generate": "npx @rtk-query/codegen-openapi openapi-config.ts",
     "check-node-version": "node check-node-version.mjs",

frontend/src/components/authentication/NewPasswordForm.tsx → frontend/src/features/authentication/NewPasswordForm.tsx

@@ -4,7 +4,7 @@ import {object, string, ref} from 'yup';
 
 import {NewPasswordRequest} from '../../services/auth';
 import {PasswordField} from './PasswordField';
-import {PasswordValidation} from '../common/PasswordValidation';
+import {PasswordValidation} from './PasswordValidation';
 
 interface NewPasswordFormProps {
   onSubmit: ({password, confirmPassword}: NewPasswordRequest) => Promise<void>;

frontend/src/components/common/PasswordValidation.tsx → frontend/src/features/authentication/PasswordValidation.tsx

@@ -2,7 +2,7 @@ import {List, ListItem, ListSubheader} from '@mui/material';
 import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import {useEffect, useState} from 'react';
-import pwValidate from '../../utils/PasswordValidationSchema';
+import pwValidate from '../../utils/validation-schemas';
 
 interface PasswordProps {
   password: string;

frontend/src/components/authentication/ProtectedRoute.tsx → frontend/src/features/authentication/ProtectedRoute.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Navigate, useLocation} from 'react-router-dom';
-import {useAuth} from '../../app/hooks/useAuth';
-import {Loading} from '../common';
+import {useAuth} from '../../redux/hooks/useAuth';
+import {Loading} from '../ui';
 import {useCurrentUserQuery} from '../../services/user';
 
 export const ProtectedRoute = ({children}: {children: JSX.Element}) => {

frontend/src/components/authentication/SignUpForm.tsx → frontend/src/features/authentication/SignUpForm.tsx

@@ -9,8 +9,8 @@ import {
 // import GoogleIcon from '@mui/icons-material/Google';
 import {useFormik} from 'formik';
 import {SignUpRequest} from '../../services/auth';
-import {PasswordValidation} from '../common/PasswordValidation';
-import {signUpVaildationSchema} from '../../utils/PasswordValidationSchema';
+import {PasswordValidation} from './PasswordValidation';
+import {signUpVaildationSchema} from '../../utils/validation-schemas';
 import {PasswordField} from './PasswordField';
 
 export interface SignUpFormProps {

frontend/src/components/authentication/__tests__/CodeField.test.tsx → frontend/src/features/authentication/__tests__/CodeField.test.tsx

@@ -3,7 +3,7 @@ import {
   screen,
   userEvent,
   fireEvent,
-} from '../../../utils/test/test-utils';
+} from '../../../utils/testing/test-utils';
 import {CodeField} from '..';
 
 describe('CodeField', () => {

frontend/src/components/authentication/__tests__/SignInForm.test.tsx → frontend/src/features/authentication/__tests__/SignInForm.test.tsx

@@ -1,6 +1,6 @@
 import {BrowserRouter} from 'react-router-dom';
 import {describe, vi} from 'vitest';
-import {fireEvent, render, screen} from '../../../utils/test/test-utils';
+import {fireEvent, render, screen} from '../../../utils/testing/test-utils';
 import {SignInForm} from '../SignInForm';
 
 const prepare = () => {

frontend/src/components/authentication/__tests__/SignUpForm.test.tsx → frontend/src/features/authentication/__tests__/SignUpForm.test.tsx

@@ -5,7 +5,7 @@ import {
   screen,
   userEvent,
   fireEvent,
-} from '../../../utils/test/test-utils';
+} from '../../../utils/testing/test-utils';
 import {SignUpForm, SignUpFormProps} from '../SignUpForm';
 import {faker} from '@faker-js/faker';
 

frontend/src/components/authentication/hooks/useAuthenticateWithOAuth.ts → frontend/src/features/authentication/hooks/useAuthenticateWithOAuth.ts

@@ -1,9 +1,12 @@
 import React from 'react';
-import {setCredentials} from '../../../app/authSlice';
-import {isFetchBaseQueryError, isErrorWithMessage} from '../../../app/helpers';
+import {setCredentials} from '../../../redux/authSlice';
+import {
+  isFetchBaseQueryError,
+  isErrorWithMessage,
+} from '../../../redux/helpers';
 import {TokenRequest, TokenResponse} from '../../../services/auth';
 import {useNavigate} from 'react-router-dom';
-import {useAppDispatch} from '../../../app/hooks/store';
+import {useAppDispatch} from '../../../redux/hooks/store';
 import {
   MutationActionCreatorResult,
   MutationDefinition,