moved strikes component files into components/ (#306)

* moved strikes component files into components/

* enabled absolute imports on the client

Author: zalexa19

client/src/features/trainee-profile/education/strikes/StrikesComponent.tsx

@@ -4,8 +4,8 @@ import { useAddStrike, useDeleteStrike, useEditStrike } from './data/mutations';
 import AddIcon from '@mui/icons-material/Add';
 import { ConfirmationDialog } from '../../../../components/ConfirmationDialog';
 import { Strike } from './models/strike';
-import { StrikeDetailsModal } from './StrikeDetailsModal';
-import { StrikesList } from './StrikesList';
+import { StrikeDetailsModal } from './components/StrikeDetailsModal';
+import { StrikesList } from './components/StrikesList';
 import { useGetStrikes } from './data/strike-queries';
 import { useState } from 'react';
 import { useTraineeProfileContext } from '../../context/useTraineeProfileContext';

client/src/features/trainee-profile/education/strikes/api/api.ts

@@ -9,7 +9,6 @@ export const getStrikes = async (traineeId: string) => {
   return data.map((strike) => mapStrikeToDomain(strike));
 };
 
-// TODO: Move these to mutation file
 export const deleteStrike = async (traineeId: string, strikeId: string) => {
   await axios.delete(`/api/trainees/${traineeId}/strikes/${strikeId}`);
 };

…education/strikes/StrikeDetailsModal.tsx …trikes/components/StrikeDetailsModal.tsxclient/src/features/trainee-profile/education/strikes/StrikeDetailsModal.tsx renamed to client/src/features/trainee-profile/education/strikes/components/StrikeDetailsModal.tsx client/src/features/trainee-profile/education/strikes/StrikeDetailsModal.tsx renamed to client/src/features/trainee-profile/education/strikes/components/StrikeDetailsModal.tsx

@@ -14,10 +14,10 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { Strike, StrikeReason } from './models/strike';
+import { Strike, StrikeReason } from '../models/strike';
 
 import { LoadingButton } from '@mui/lab';
-import { formatDate } from '../../utils/dateHelper';
+import { formatDate } from '../../../utils/dateHelper';
 import { useState } from 'react';
 
 type StrikeInput = Omit<Strike, 'reporterName' | 'reporterImageUrl' | 'reason'> & {
@@ -111,12 +111,7 @@ export const StrikeDetailsModal = ({
   };
 
   return (
-    <Modal
-      open={isOpen}
-      closeAfterTransition
-      slots={{ backdrop: Backdrop }}
-      slotProps={{ backdrop: { timeout: 500 } }}
-    >
+    <Modal open={isOpen} closeAfterTransition slots={{ backdrop: Backdrop }} slotProps={{ backdrop: { timeout: 500 } }}>
       <Fade in={isOpen}>
         <Box
           minWidth={550}
@@ -193,7 +188,7 @@ export const StrikeDetailsModal = ({
               error={commentsRequiredError}
               helperText={commentsRequiredError ? 'Comments are required' : ''}
               value={strikeFields.comments}
-              slotProps={{ inputLabel: { shrink: true} }}
+              slotProps={{ inputLabel: { shrink: true } }}
               onChange={onChangeComments}
               fullWidth
             />

…rofile/education/strikes/StrikesList.tsx …ation/strikes/components/StrikesList.tsxclient/src/features/trainee-profile/education/strikes/StrikesList.tsx renamed to client/src/features/trainee-profile/education/strikes/components/StrikesList.tsx client/src/features/trainee-profile/education/strikes/StrikesList.tsx renamed to client/src/features/trainee-profile/education/strikes/components/StrikesList.tsx

@@ -1,12 +1,12 @@
 import { Box, IconButton, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
 
-import { AvatarWithTooltip } from '../components/AvatarWithTooltip';
+import { AvatarWithTooltip } from '../../components/AvatarWithTooltip';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
-import MarkdownText from '../../components/MarkdownText';
-import { Strike } from './models/strike';
-import { formatDateForDisplay } from '../../utils/dateHelper';
+import MarkdownText from '../../../components/MarkdownText';
 import React from 'react';
+import { Strike } from '../models/strike';
+import { formatDateForDisplay } from '../../../utils/dateHelper';
 
 interface StrikesListProps {
   strikes: Strike[];
@@ -82,13 +82,7 @@ export const StrikesList: React.FC<StrikesListProps> = ({ strikes, onClickEdit,
                 </ListItemAvatar>
                 <ListItemText
                   primary={
-                    <Box
-                      display="flex"
-                      flexDirection="row"
-                      justifyContent="space-between"
-                      width="100%"
-                      py={1}
-                    >
+                    <Box display="flex" flexDirection="row" justifyContent="space-between" width="100%" py={1}>
                       {formatStrikeReason(strike.reason || '')}
                       <Typography sx={{ pr: 2 }}>{formatDateForDisplay(strike.date)}</Typography>
                     </Box>

client/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],

client/vite.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig, loadEnv } from 'vite';
+
+import path from 'path';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
@@ -7,6 +9,12 @@ export default defineConfig(({ mode }) => {
   const backendProxyTarget = env.VITE_BACKEND_PROXY_TARGET ?? 'http://localhost:7777';
   return {
     plugins: [react()],
+    resolve: {
+      alias: {
+        // This maps the '@' symbol to your 'src' folder
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
     server: {
       // Automatically open the app in the browser on server start.
       open: '/',