Merge pull request #58 from NCAR/restructure

Attempt restructuring part 3

frontend/src/webPages/Components/CookieBanner.tsx → frontend/src/components/CookieBanner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import '../RoutingRenders/App.css'; // Assuming you're adding the CSS here
+import '../styles/App.css'; // Assuming you're adding the CSS here
 
 const CookieBanner: React.FC = () => {
   // State to manage whether the banner is visible

frontend/src/webPages/Components/HeaderFooter.tsx → frontend/src/components/HeaderFooter.tsx

@@ -6,7 +6,7 @@ import { Drawer } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import Container from "@mui/material/Container";
 import DensitySmallSharpIcon from "@mui/icons-material/DensitySmallSharp";
-import { useAuth } from "../contexts/AuthContext";
+import { useAuth } from "../pages/AuthContext";
 // import Modal from '@mui/material/Modal';
 // import Typography from '@mui/material/Typography';
 

frontend/src/webPages/Components/Modals.tsx → frontend/src/components/Modals.tsx

@@ -8,7 +8,7 @@ import {
   getReactionsByFamilyId,
   getReactantsByReactionIdAsync,
   getProductsByReactionIdAsync,
-} from "../../API/API_GetMethods";
+} from "../API/API_GetMethods";
 import {
   Family,
   Mechanism,
@@ -18,7 +18,7 @@ import {
   ReactionSpecies,
   Species,
   ReactionSpeciesDto,
-} from "../../API/API_Interfaces";
+} from "../API/API_Interfaces";
 import {
   createSpecies,
   createReaction,
@@ -27,7 +27,7 @@ import {
   addSpeciesToReaction,
   createFamily,
   createMechanism,
-} from "../../API/API_CreateMethods";
+} from "../API/API_CreateMethods";
 
 import {
   Modal,
@@ -38,7 +38,7 @@ import {
   Select,
   MenuItem,
 } from "@mui/material";
-import { updateReaction } from "../../API/API_UpdateMethods";
+import { updateReaction } from "../API/API_UpdateMethods";
 
 const style = {
   position: "absolute" as "absolute",

frontend/src/webPages/Components/NavDropDown.tsx → frontend/src/components/NavDropDown.tsx

@@ -4,7 +4,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemButton from '@mui/material/ListItemButton';
-import { useAuth } from '../contexts/AuthContext'; // Import useAuth to get the user data
+import { useAuth } from '../pages/AuthContext'; // Import useAuth to get the user data
 
 const NavDropDown = () => {
   const navigate = useNavigate();

frontend/src/webPages/Components/ProtectedRoute.tsx → frontend/src/components/ProtectedRoute.tsx

@@ -1,5 +1,5 @@
 import { Navigate } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from '../pages/AuthContext';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;

frontend/src/webPages/Components/RenderFamilyTree.tsx → frontend/src/components/RenderFamilyTree.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState, useRef } from "react";
 
-import { Family, Mechanism } from "../../API/API_Interfaces";
+import { Family, Mechanism } from "../API/API_Interfaces";
 import {
   downloadOAYAML,
   downloadOAJSON,
   downloadOAMusicbox,
   getFamilies,
   getMechanismsByFamilyId,
-} from "../../API/API_GetMethods";
-import { deleteFamily, deleteMechanism } from "../../API/API_DeleteMethods";
+} from "../API/API_GetMethods";
+import { deleteFamily, deleteMechanism } from "../API/API_DeleteMethods";
 
 import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import { TreeItem } from "@mui/x-tree-view/TreeItem";

frontend/src/webPages/Components/RenderSpeciesReactionTable.tsx → frontend/src/components/RenderSpeciesReactionTable.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState } from 'react';
 
-import { Species, Reaction} from '../../API/API_Interfaces';
-import { getReactionsByMechanismId, getSpeciesByMechanismId} from '../../API/API_GetMethods';
+import { Species, Reaction} from '../API/API_Interfaces';
+import { getReactionsByMechanismId, getSpeciesByMechanismId} from '../API/API_GetMethods';
 
 // import { CreateReactionModal, CreateSpeciesModal, ReactionPropertiesModal, SpeciesPropertiesModal } from './Modals';
 import {CreateSpeciesModal, CreateReactionModal, UpdateReactionModal} from './Modals';

frontend/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GoogleOAuthProvider } from '@react-oauth/google';
-import App from './webPages/RoutingRenders/App';
+import App from './pages/App';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 

frontend/src/webPages/RoutingRenders/App.tsx → frontend/src/pages/App.tsx

@@ -1,17 +1,17 @@
 //import React from 'react';
-import './App.css'; // Assuming CSS is applied globally
-import Banner from '../Components/CookieBanner';
+import '../styles/App.css'; // Assuming CSS is applied globally
+import Banner from '../components/CookieBanner';
 //import { createTheme/*, ThemeProvider*/ } from '@mui/material/styles';
 import { Route, Routes } from 'react-router-dom';
-import Settings from '../Settings/settings';
-import LoggedIn from '../LogIn/loggedIn';
-import FamilyPage from '../Family/family';
-import LogIn from '../LogIn/logIn';
-import RoleManagement from '../Roles/RoleManagement';
-import NoAccess from '../Roles/Unauthorized.tsx';
+import Settings from './settings.tsx';
+import LoggedIn from './loggedIn.tsx';
+import FamilyPage from './family.tsx';
+import LogIn from './logIn.tsx';
+import RoleManagement from './RoleManagement.tsx';
+import NoAccess from './Unauthorized.tsx';
 import { AccessibilityWidget } from 'react-accessibility';
-import { AuthProvider } from '../contexts/AuthContext';
-import ProtectedRoute from '../Components/ProtectedRoute'; // The ProtectedRoute you created earlier
+import { AuthProvider } from './AuthContext';
+import ProtectedRoute from '../components/ProtectedRoute'; // The ProtectedRoute you created earlier
 
 
 // const theme = createTheme({

frontend/src/webPages/contexts/AuthContext.tsx → frontend/src/pages/AuthContext.tsx

@@ -5,7 +5,7 @@ import  {
   ReactNode,
   useEffect,
 } from "react";
-import { User } from "../../API/API_Interfaces";
+import { User } from "../API/API_Interfaces";
 
 // Define the shape of the AuthContext
 interface AuthContextProps {

frontend/src/webPages/Roles/RoleManagement.tsx → frontend/src/pages/RoleManagement.tsx

@@ -18,14 +18,14 @@ import {
   GridEventListener,
 } from "@mui/x-data-grid";
 
-import { Header, Footer } from "../Components/HeaderFooter";
+import { Header, Footer } from "../components/HeaderFooter";
 
-import "./roles.css";
+import "../styles/roles.css";
 //import { useAuth } from "../contexts/AuthContext"; // Import the AuthContext
-import { getUsers } from "../../API/API_GetMethods";
-import { User } from "../../API/API_Interfaces";
-import { updateUser } from "../../API/API_UpdateMethods";
-import { deleteUser } from "../../API/API_DeleteMethods";
+import { getUsers } from "../API/API_GetMethods";
+import { User } from "../API/API_Interfaces";
+import { updateUser } from "../API/API_UpdateMethods";
+import { deleteUser } from "../API/API_DeleteMethods";
 
 function RolesToolbar() {
   return (

frontend/src/webPages/Family/family.tsx → frontend/src/pages/family.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 
-import RenderFamilyTree from "../Components/RenderFamilyTree";
-import RenderSpeciesReactionTable from "../Components/RenderSpeciesReactionTable";
-import { CreateFamilyModal, CreateMechanismModal } from "../Components/Modals";
+import RenderFamilyTree from "../components/RenderFamilyTree";
+import RenderSpeciesReactionTable from "../components/RenderSpeciesReactionTable";
+import { CreateFamilyModal, CreateMechanismModal } from "../components/Modals";
 
 import { StyledDetailBox } from "./familyStyling";
 
-import { Header, Footer } from "../Components/HeaderFooter";
+import { Header, Footer } from "../components/HeaderFooter";
 
-import "./family.css";
+import "../styles/family.css";
 
 const FamilyPage = () => {
   const [selectedFamilyId, setSelectedFamilyId] = useState<string | null>(null);

frontend/src/webPages/LogIn/logIn.tsx → frontend/src/pages/logIn.tsx

@@ -2,19 +2,19 @@ import { useNavigate } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { googleLogout, useGoogleLogin } from "@react-oauth/google";
 import axios from "axios";
-import { useAuth } from "../contexts/AuthContext"; // Import the AuthContext
+import { useAuth } from "../pages/AuthContext"; // Import the AuthContext
 
-import "./logIn.css";
+import "../styles/logIn.css";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import Modal from "@mui/material/Modal";
 import Typography from "@mui/material/Typography";
 import GoogleIcon from "@mui/icons-material/Google";
 import NoAccountsIcon from "@mui/icons-material/NoAccounts";
-import { Footer } from "../Components/HeaderFooter";
-import Holidays from "../Components/Holidays"; // Import the Holidays component
-import { getUserByEmail } from "../../API/API_GetMethods";
-import { createUser } from "../../API/API_CreateMethods";
+import { Footer } from "../components/HeaderFooter";
+import Holidays from "../components/Holidays"; // Import the Holidays component
+import { getUserByEmail } from "../API/API_GetMethods";
+import { createUser } from "../API/API_CreateMethods";
 
 interface AuthUser {
   access_token: string;

frontend/src/webPages/LogIn/loggedIn.tsx → frontend/src/pages/loggedIn.tsx

@@ -2,9 +2,9 @@ import { useNavigate } from 'react-router-dom';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
 
-import { Header, Footer } from '../Components/HeaderFooter';
+import { Header, Footer } from '../components/HeaderFooter';
 
-import "./loggedIn.css";
+import "../styles/loggedIn.css";
 
   const LoggedIn = () => {
     const navigate = useNavigate();

frontend/src/webPages/Settings/settings.tsx → frontend/src/pages/settings.tsx

@@ -1,9 +1,9 @@
 import { useNavigate } from 'react-router-dom';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
-import { Header, Footer } from '../Components/HeaderFooter';
+import { Header, Footer } from '../components/HeaderFooter';
 
-import "./settings.css"
+import "../styles/settings.css"
 
   const Settings = () => {
     const navigate = useNavigate();

frontend/test/App.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import App from '../src/webPages/RoutingRenders/App';
+import App from '../src/pages/App';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 
 describe('App Component Test', () => {

frontend/test/family.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 import { render, screen, fireEvent, cleanup, waitFor, within } from '@testing-library/react';
 import React from 'react';
-import FamilyPage from '../src/webPages/Family/family';
+import FamilyPage from '../src/pages/family';
 import { MemoryRouter, useNavigate } from 'react-router-dom';
 
 // // Partially mock react-router-dom

frontend/test/logIn.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, waitFor, cleanup  } from '@testing-library/react';
 import React from 'react';
-import LogIn from '../src/webPages/LogIn/logIn';
+import LogIn from '../src/pages/logIn';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import { MemoryRouter } from 'react-router-dom';
 

frontend/test/loggedIn.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 import { render, screen, fireEvent, cleanup, waitFor, within } from '@testing-library/react';
 import React from 'react';
-import LoggedIn from '../src/webPages/LogIn/loggedIn';
+import LoggedIn from '../src/pages/loggedIn';
 import { MemoryRouter, useNavigate } from 'react-router-dom';
 
 // // Partially mock react-router-dom

frontend/test/main.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { vi, describe, expect, it, beforeEach, afterEach } from 'vitest';
 import { render } from '@testing-library/react';
 import { GoogleOAuthProvider } from '@react-oauth/google';
-import App from '../src/webPages/RoutingRenders/App';
+import App from '../src/pages/App';
 import { BrowserRouter } from 'react-router-dom';
 import '@testing-library/jest-dom';
 

frontend/test/modals.test.tsx

@@ -11,9 +11,9 @@ import {
   CreateReactionModal, 
   CreateReactantModal, 
   CreateProductModal 
-} from "../src/webPages/Components/Modals";
+} from "../src/components/Modals";
 
-describe("Modal Components", () => {
+describe("Modal components", () => {
   const onCloseMock = vi.fn();
 
   it("renders CreatePublishModal without errors", () => {

frontend/test/renderfamilytree.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, vi, expect } from "vitest";
 import React from "react";
-import RenderFamilyTree from "../src/webPages/Components/RenderFamilyTree";
+import RenderFamilyTree from "../src/components/RenderFamilyTree";
 
 // Mock functions for the component props
 const setSelectedFamilyIdMock = vi.fn();

frontend/test/rolemanagement.test.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
-import RoleManagement from '../src/webPages/Roles/RoleManagement'; // Updated path to RoleManagement
-import { useAuth } from '../src/webPages/contexts/AuthContext';
+import RoleManagement from '../src/pages/RoleManagement'; // Updated path to RoleManagement
+import { useAuth } from '../src/pages/AuthContext';
 import { getUsers } from '../src/API/API_GetMethods';
 import { updateUser } from '../src/API/API_UpdateMethods';
 import { deleteUser } from '../src/API/API_DeleteMethods';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 
 // Mocking necessary modules
-vi.mock('../src/webPages/contexts/AuthContext', () => ({
+vi.mock('../src/pages/AuthContext', () => ({
   useAuth: vi.fn(),
 }));
 

frontend/test/settings.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import Settings from '../src/webPages/Settings/settings';
+import Settings from '../src/pages/settings';
 import { GoogleOAuthProvider } from '@react-oauth/google'; // if needed, depending on your setup
 
 // describe('Settings Component', () => {