chore: Rename

packages/client/src/App.tsx

@@ -2,13 +2,13 @@ import './App.css';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { HomePage } from './pages/Home';
 import { ThemeProvider } from './theme/ThemeProvider';
-import { NavBar } from './components/NavigationBar';
+import { NavBar } from './components/NavigationBar.component';
 import { NewProject } from './pages/projects/NewProject';
 import { ProjectControl } from './pages/projects/ProjectControl';
 import { SuccessPage } from './pages/SuccessPage';
 import { NewStudy } from './pages/studies/NewStudy';
 import { ContributePage } from './pages/contribute/Contribute';
-import { TagView } from './components/TagView';
+import { TagView } from './components/TagView.component';
 import { StudyControl } from './pages/studies/StudyControl';
 import { ProjectAccess } from './pages/datasets/ProjectAccess';
 import { ProjectUserPermissions } from './pages/projects/ProjectUserPermissions';
@@ -17,17 +17,16 @@ import { DownloadTags } from './pages/studies/DownloadTags';
 import { LoginPage } from './pages/LoginPage';
 import { DatasetControls } from './pages/datasets/DatasetControls';
 import { AuthCallback } from './pages/AuthCallback';
-import { EnvironmentContextProvider } from './context/EnvironmentContext';
-import { AuthProvider, useAuth, AUTH_TOKEN_STR } from './context/AuthContext';
+import { AuthProvider, useAuth, AUTH_TOKEN_STR } from './context/Auth.context';
 import { AdminGuard } from './guards/AdminGuard';
 import { LogoutPage } from './pages/LogoutPage';
 import { CssBaseline, Box, styled } from '@mui/material';
 import { FC, ReactNode, useState } from 'react';
-import { SideBar } from './components/SideBar';
-import { ProjectProvider } from './context/ProjectContext';
+import { SideBar } from './components/SideBar.component';
+import { ProjectProvider } from './context/Project.context';
 import { ApolloClient, ApolloProvider, InMemoryCache, concat, createHttpLink } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
-import {StudyProvider} from './context/Study';
+import {StudyProvider} from './context/Study.context';
 
 const drawerWidth = 256;
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
@@ -69,14 +68,12 @@ const App: FC = () => {
   return (
     <ThemeProvider>
       <BrowserRouter>
-        <EnvironmentContextProvider>
-          <ApolloProvider client={apolloClient}>
-            <AuthProvider>
-              <CssBaseline />
-              <AppInternal />
-            </AuthProvider>
-          </ApolloProvider>
-        </EnvironmentContextProvider>
+        <ApolloProvider client={apolloClient}>
+          <AuthProvider>
+            <CssBaseline />
+            <AppInternal />
+          </AuthProvider>
+        </ApolloProvider>
       </BrowserRouter>
     </ThemeProvider>
   );

packages/client/src/components/ControlComponent.tsx → packages/client/src/components/Control.component.tsx

@@ -13,7 +13,7 @@ interface Table {
   tableRows: Row[];
 }
 
-export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
+export const Control: React.FC<Table> = ({ tableRows }: Table) => {
   const [rows, setRows] = useState(tableRows);
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
 

packages/client/src/components/DatasetAccessComponent.tsx → packages/client/src/components/DatasetAccess.component.tsx

@@ -38,7 +38,7 @@ const renderSwitchEditInputCell: GridColDef['renderCell'] = (params) => {
   return <SwitchEditInputCell {...params} />;
 };
 
-export const DatasetAccessComponent: React.FC<Table> = ({ tableRows }: Table) => {
+export const DatasetAccess: React.FC<Table> = ({ tableRows }: Table) => {
   const [rows] = useState(tableRows);
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
 

packages/client/src/components/DatasetControlComponent.tsx → packages/client/src/components/DatasetControl.component.tsx

@@ -17,7 +17,7 @@ interface Table {
   columns: GridColDef[];
 }
 
-export const DatasetControlComponent: React.FC<Table> = ({ tableRows, columns }: Table) => {
+export const DatasetControl: React.FC<Table> = ({ tableRows, columns }: Table) => {
   const [rows] = useState(tableRows);
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
 

packages/client/src/components/Environment.tsx → packages/client/src/components/Environment.component.tsx

@@ -1,6 +1,6 @@
 import { Select, MenuItem, FormControl, InputLabel, Stack, Paper, Typography } from '@mui/material';
-import { useProject } from '../context/ProjectContext';
-import { useStudy } from '../context/Study';
+import { useProject } from '../context/Project.context';
+import { useStudy } from '../context/Study.context';
 import { Dispatch, SetStateAction, FC } from 'react';
 
 export const Environment: FC = () => {

packages/client/src/components/SideBar.tsx → packages/client/src/components/SideBar.component.tsx

@@ -1,9 +1,9 @@
 import { FC, ReactNode, useState } from 'react';
 import { Collapse, Divider, Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { ExpandMore, ExpandLess, School, Dataset, Work, Logout, GroupWork } from '@mui/icons-material';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../context/Auth.context';
 import { useNavigate } from 'react-router-dom';
-import { Environment } from './Environment';
+import { Environment } from './Environment.component';
 
 interface SideBarProps {
   open: boolean;

packages/client/src/components/TagFieldComponent.tsx → packages/client/src/components/TagField.component.tsx

@@ -13,7 +13,7 @@ interface FieldProps {
   index: number;
 }
 
-export const TagFieldComponent: React.FC<FieldProps> = ({ field, valid, validate, index }: FieldProps) => {
+export const TagFieldView: React.FC<FieldProps> = ({ field, valid, validate, index }: FieldProps) => {
   const [jsonData, setJsonData] = useState({});
   const [schema, setSchema] = useState<JsonSchema>({});
   const [uiSchema, setUiSchema] = useState({ type: 'object' });

packages/client/src/components/TagTrainingComponent.tsx → packages/client/src/components/TagTraining.component.tsx

@@ -1,5 +1,5 @@
 import { Box, Accordion, AccordionSummary, Typography, AccordionDetails, Container } from '@mui/material';
-import { DatasetControlComponent } from './DatasetControlComponent';
+import { DatasetControl } from './DatasetControl.component';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { GridColDef } from '@mui/x-data-grid';
 
@@ -93,7 +93,7 @@ export const TagTrainingComponent = () => {
           <AccordionDetails>
             <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
               <Box sx={{ position: '-webkit-sticky' }}>
-                <DatasetControlComponent tableRows={rows} columns={columns} />
+                <DatasetControl tableRows={rows} columns={columns} />
               </Box>
             </Container>
           </AccordionDetails>

packages/client/src/components/TagsDisplay.tsx → packages/client/src/components/TagsDisplay.component.tsx

@@ -10,10 +10,10 @@ import VideocamIcon from '@mui/icons-material/Videocam';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { materialRenderers } from '@jsonforms/material-renderers';
 import { TagField, TagFieldType } from '../models/TagField';
-import { TagFormPreviewDialog } from './TagFormPreview';
+import { TagFormPreviewDialog } from './TagFormPreview.component';
 import { TagFieldGeneratorService } from '../services/tag-field-generator.service';
 import { useState } from 'react';
-import { TagFieldComponent } from './TagFieldComponent';
+import { TagFieldView } from './TagField.component';
 
 type TagPreviewInformation = {
   previewDataSchema: any;
@@ -114,7 +114,7 @@ export const TagsDisplay: React.FC = () => {
           {tagFields.length > 0 ? (
             tagFields.map((value: TagField, index: number) => (
               <Box key={index} sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
-                <TagFieldComponent field={value} valid={valid} validate={setValid} index={index} />
+                <TagFieldView field={value} valid={valid} validate={setValid} index={index} />
                 <Button size="large" sx={{ marginTop: '45px' }} startIcon={<DeleteIcon />} onClick={() => removeField(index)} />
               </Box>
             ))

packages/client/src/context/AuthContext.tsx → packages/client/src/context/Auth.context.tsx

@@ -27,7 +27,7 @@ export interface AuthProviderProps {
   children: ReactNode;
 }
 
-export const AuthProvider: FC<AuthProviderProps> = (props) => {
+export const AuthProvider: FC<AuthProviderProps> = ({ children }) => {
   const [authenticated, setAuthenticated] = useState<boolean>(false);
   const [token, setToken] = useState<string | null>(null);
   const [decodedToken, setDecodedToken] = useState<DecodedToken | null>(null);
@@ -88,7 +88,7 @@ export const AuthProvider: FC<AuthProviderProps> = (props) => {
     }
   }, [token]);
 
-  return <AuthContext.Provider value={{ token, decodedToken, setToken, authenticated, setAuthenticated, logout, login }} {...props} />;
+  return <AuthContext.Provider value={{ token, decodedToken, setToken, authenticated, setAuthenticated, logout, login }}>{children}</AuthContext.Provider>;
 };
 
 const saveToken = (token: string) => {

packages/client/src/context/Study.tsx → packages/client/src/context/Study.context.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, FC, ReactNode, SetStateAction, createContext, useContext, useState, useEffect } from 'react';
 import { Study } from '../graphql/graphql';
-import { useProject } from './ProjectContext';
-import {useFindStudiesLazyQuery} from '../graphql/study/study';
+import { useProject } from './Project.context';
+import { useFindStudiesLazyQuery } from '../graphql/study/study';
 
 export interface StudyContextProps {
   study: Study | null;

packages/client/src/main.tsx

@@ -1,10 +1,10 @@
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
-import React from 'react';
+import { StrictMode } from 'react';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );

packages/client/src/pages/AuthCallback.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress, Stack } from '@mui/material';
 import { useEffect } from 'react';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../context/Auth.context';
 
 export const AuthCallback: React.FC = () => {
   const { login } = useAuth();

packages/client/src/pages/Home.tsx

@@ -1,6 +1,6 @@
 import { keyframes } from 'styled-components';
 import styled from 'styled-components';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../context/Auth.context';
 
 export const HomePage: React.FC = () => {
   const { token, authenticated } = useAuth();

packages/client/src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import { Avatar, Box, Container, Link, Typography } from '@mui/material';
 import { FC, useEffect } from 'react';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../context/Auth.context';
 import {useNavigate} from 'react-router-dom';
 
 export const LoginPage: FC = () => {

packages/client/src/pages/LogoutPage.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress, Stack } from '@mui/material';
 import { FC, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../context/Auth.context';
 
 export const LogoutPage: FC = () => {
   const navigate = useNavigate();

packages/client/src/pages/contribute/Contribute.tsx

@@ -1,4 +1,4 @@
-import { Container, Typography, Box, Stack, Button, Grid } from '@mui/material';
+import { Typography, Box, Stack, Button } from '@mui/material';
 import placeholder from './placeholder.png';
 import { useNavigate } from 'react-router-dom';
 

packages/client/src/pages/datasets/DatasetControls.tsx

@@ -1,10 +1,10 @@
 import { Accordion, AccordionDetails, AccordionSummary, Box, Container, IconButton, Typography } from '@mui/material';
 import AddCircleOutlineTwoToneIcon from '@mui/icons-material/AddCircleOutlineTwoTone';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { DatasetControlComponent } from '../../components/DatasetControlComponent';
-import { AddDataset } from '../../components/AddDataset';
+import { DatasetControl } from '../../components/DatasetControl.component';
+import { AddDataset } from '../../components/AddDataset.component';
 import { useState } from 'react';
-import { UploadEntries } from '../../components/UploadEntries';
+import { UploadEntries } from '../../components/UploadEntries.component';
 import { GridColDef } from '@mui/x-data-grid';
 
 const controls = [
@@ -129,7 +129,7 @@ export const DatasetControls: React.FC = () => {
             <AccordionDetails>
               <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
                 <Box sx={{ position: '-webkit-sticky' }}>
-                  <DatasetControlComponent tableRows={rows} columns={columns} />
+                  <DatasetControl tableRows={rows} columns={columns} />
                 </Box>
               </Container>
             </AccordionDetails>

packages/client/src/pages/datasets/ProjectAccess.tsx

@@ -2,7 +2,7 @@ import { Accordion, Box, Container, Typography } from '@mui/material';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { DatasetAccessComponent } from '../../components/DatasetAccessComponent';
+import { DatasetAccess } from '../../components/DatasetAccess.component';
 
 const rows = [
   {
@@ -45,7 +45,7 @@ export const ProjectAccess: React.FC = () => {
         <AccordionDetails>
           <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
             <Box sx={{ position: '-webkit-sticky' }}>
-              <DatasetAccessComponent tableRows={rows} />
+              <DatasetAccess tableRows={rows} />
             </Box>
           </Container>
         </AccordionDetails>
@@ -58,7 +58,7 @@ export const ProjectAccess: React.FC = () => {
         <AccordionDetails>
           <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
             <Box sx={{ position: '-webkit-sticky' }}>
-              <DatasetAccessComponent tableRows={rows} />
+              <DatasetAccess tableRows={rows} />
             </Box>
           </Container>
         </AccordionDetails>

packages/client/src/pages/projects/ProjectControl.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material';
-import { ControlComponent } from '../../components/ControlComponent';
+import { Control } from '../../components/Control.component';
 
 // currently hardcoded values, but eventully
 // there will be a fetching function that retrieves project information
@@ -33,7 +33,7 @@ const ProjectControl: React.FC = () => {
     <>
       <Typography variant='h3'>Project Control</Typography>
       <Box>
-        <ControlComponent tableRows={rows} />
+        <Control tableRows={rows} />
       </Box>
     </>
   );

packages/client/src/pages/studies/NewStudy.tsx

@@ -1,19 +1,19 @@
 import { Container, Typography, Button, Box, Stepper, Step, StepLabel } from '@mui/material';
-import React from 'react';
-import { TagsDisplay } from '../../components/TagsDisplay';
-import { NewStudyJsonForm } from '../../components/NewStudyJsonForm';
-import { TagTrainingComponent } from '../../components/TagTrainingComponent';
+import { TagsDisplay } from '../../components/TagsDisplay.component';
+import { NewStudyJsonForm } from '../../components/NewStudyJsonForm.component';
+import { TagTrainingComponent } from '../../components/TagTraining.component';
+import { useState } from 'react';
 
 export const NewStudy: React.FC = () => {
   //all constants
-  const [activeStep, setActiveStep] = React.useState(0);
+  const [activeStep, setActiveStep] = useState(0);
 
   const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    setActiveStep((prevActiveStep: number) => prevActiveStep + 1);
   };
 
   const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    setActiveStep((prevActiveStep: number) => prevActiveStep - 1);
   };
 
   const handleReset = () => {
@@ -51,15 +51,15 @@ export const NewStudy: React.FC = () => {
           })}
         </Stepper>
         {activeStep === steps.length ? (
-          <React.Fragment>
+          <>
             <Typography sx={{ mt: 2, mb: 1 }}>All steps completed - your new study is created</Typography>
             <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
               <Box sx={{ flex: '1 1 auto' }} />
               <Button onClick={handleReset}>Start Over</Button>
             </Box>
-          </React.Fragment>
+          </>
         ) : (
-          <React.Fragment>
+          <>
             <Container maxWidth="lg" sx={{ display: 'table', width: '100%', overflow: 'hidden' }}>
               {getSectionComponent()}
             </Container>
@@ -71,7 +71,7 @@ export const NewStudy: React.FC = () => {
                 {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
               </Button>
             </Box>
-          </React.Fragment>
+          </>
         )}
       </Container>
     </Container>

packages/client/src/pages/studies/StudyControl.tsx

@@ -1,5 +1,5 @@
-import {Typography} from '@mui/material';
-import { ControlComponent } from '../../components/ControlComponent';
+import { Typography } from '@mui/material';
+import { Control } from '../../components/Control.component';
 
 // currently hardcoded values, but eventully
 // there will be a fetching function that retrieves project information
@@ -42,7 +42,7 @@ export const StudyControl: React.FC = () => {
   return (
     <>
       <Typography variant='h3'>Study Control</Typography>
-      <ControlComponent tableRows={rows} />
+      <Control tableRows={rows} />
     </>
   );
 };

packages/client/src/pages/studies/UserPermissions.tsx

@@ -1,4 +1,4 @@
-import { Box, Switch, Typography } from '@mui/material';
+import { Switch, Typography } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';

packages/client/src/theme/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { CssBaseline } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';