feat: add creation workout (#15)

Author: filippovskii09

frontend/src/components/Calendar/components/CalendarDayCell.tsx

@@ -15,21 +15,25 @@ export const CalendarDayCell = ({
   hasWorkout,
   colStart,
   isFirstDay,
+  openModalByClickOnDayCell,
 }: ICalendarDayCellProps) => {
   const baseClasses =
     'h-10 w-10 flex relative items-center justify-center font-medium text-xs rounded-xl transition-colors';
   const activeClasses = isCurrent ? 'bg-primary text-main font-bold' : '';
   const pointClasses = isCurrent ? 'bg-main' : 'bg-primary';
 
+  const handleClick = () => (hasWorkout ? null : openModalByClickOnDayCell());
+
   return (
-    <div
+    <button
       key={day}
       className={`${baseClasses} ${activeClasses}`}
       style={isFirstDay ? { gridColumnStart: `${colStart}` } : {}}
+      onClick={handleClick}
     >
       {day}
 
       {hasWorkout && <CalendarDayCellPoint pointClasses={pointClasses} />}
-    </div>
+    </button>
   );
 };

frontend/src/components/Calendar/components/CalendarGrid.tsx

@@ -7,6 +7,8 @@ export const CalendarGrid = ({
   indexOfFirstDayInMonth,
   currentDay,
   checkWorkoutInThisDay,
+  openModalByClickOnDayCell,
+  getWorkoutByDay,
 }: ICalendarGridProps) => {
   return (
     <div className="flex flex-col gap-4 border-b-2 border-white pb-7">
@@ -26,9 +28,11 @@ export const CalendarGrid = ({
             key={day}
             day={day}
             isCurrent={currentDay === day}
+            initialWorkoutId={getWorkoutByDay(day)?.id || ''}
             hasWorkout={checkWorkoutInThisDay(day)}
             colStart={indexOfFirstDayInMonth}
             isFirstDay={day === 1}
+            openModalByClickOnDayCell={openModalByClickOnDayCell}
           />
         ))}
       </div>

frontend/src/components/Calendar/hooks.ts

@@ -55,6 +55,17 @@ export const useCalendar = (workouts: WorkoutPreview[]) => {
     });
   };
 
+  const getWorkoutByDay = (day: number): WorkoutPreview | undefined => {
+    return workouts.find((workout) => {
+      const wDate = new Date(workout.date);
+      return (
+        wDate.getFullYear() === year &&
+        wDate.getMonth() === currentMonthIndex &&
+        wDate.getDate() === day
+      );
+    });
+  };
+
   return {
     month,
     year,
@@ -65,5 +76,6 @@ export const useCalendar = (workouts: WorkoutPreview[]) => {
     currentDay,
     backToday,
     checkWorkoutInThisDay,
+    getWorkoutByDay,
   };
 };

frontend/src/components/Calendar/index.tsx

@@ -2,7 +2,10 @@ import { CalendarActions, CalendarGrid, MonthSwitcher } from './components';
 import { useCalendar } from './hooks';
 import type { ICalendarProps } from './types';
 
-export const Calendar = ({ workouts }: ICalendarProps) => {
+export const Calendar = ({
+  workouts,
+  openModalByClickOnDayCell,
+}: ICalendarProps) => {
   const {
     month,
     year,
@@ -13,6 +16,7 @@ export const Calendar = ({ workouts }: ICalendarProps) => {
     currentDay,
     backToday,
     checkWorkoutInThisDay,
+    getWorkoutByDay,
   } = useCalendar(workouts);
 
   return (
@@ -28,6 +32,8 @@ export const Calendar = ({ workouts }: ICalendarProps) => {
         indexOfFirstDayInMonth={indexOfFirstDayInMonth}
         currentDay={currentDay}
         checkWorkoutInThisDay={checkWorkoutInThisDay}
+        getWorkoutByDay={getWorkoutByDay}
+        openModalByClickOnDayCell={openModalByClickOnDayCell}
       />
       <CalendarActions backToday={backToday} />
     </div>

frontend/src/components/Calendar/types.ts

@@ -2,6 +2,7 @@ import type { WorkoutPreview } from '@types';
 
 export interface ICalendarProps {
   workouts: WorkoutPreview[];
+  openModalByClickOnDayCell: () => void;
 }
 
 export interface IMounthSwitcherProps {
@@ -16,6 +17,8 @@ export interface ICalendarGridProps {
   indexOfFirstDayInMonth: number;
   currentDay: number;
   checkWorkoutInThisDay: (day: number) => boolean;
+  openModalByClickOnDayCell: () => void;
+  getWorkoutByDay: (day: number) => WorkoutPreview | undefined;
 }
 
 export interface ICalendarActionsProps {
@@ -28,6 +31,8 @@ export interface ICalendarDayCellProps {
   hasWorkout: boolean;
   colStart: number;
   isFirstDay: boolean;
+  openModalByClickOnDayCell: () => void;
+  initialWorkoutId?: string;
 }
 
 export interface ICalendarDayCellPointProps {

frontend/src/components/ExerciseSelect/index.tsx

@@ -0,0 +1,66 @@
+import { Box, Typography, Chip, TextField } from '@mui/material';
+
+import { BaseAutocomplete } from '@ui';
+import type { IExerciseSelectProps } from './types';
+import { useGetAllExercises } from './queries';
+
+export const ExerciseSelect = ({
+  onSelect,
+  disabled,
+}: IExerciseSelectProps) => {
+  const { data: exercises = [], isLoading } = useGetAllExercises();
+  return (
+    <BaseAutocomplete
+      disabled={disabled || isLoading}
+      options={exercises}
+      getOptionLabel={(option) => option.name}
+      filterOptions={(options, state) => {
+        const inputValue = state.inputValue.toLowerCase();
+        return options.filter(
+          (option) =>
+            option.name.toLowerCase().includes(inputValue) ||
+            option.muscleGroup.toLowerCase().includes(inputValue),
+        );
+      }}
+      renderOption={(props, option) => {
+        const { key, ...otherProps } = props;
+        return (
+          <li
+            key={key}
+            {...otherProps}
+            style={{ borderBottom: '1px solid #ffffff10' }}
+          >
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              width="100%"
+              alignItems="center"
+            >
+              <Typography variant="body1" color="textPrimary">
+                {option.name}
+              </Typography>
+              <Chip
+                label={option.muscleGroup}
+                size="small"
+                sx={{
+                  backgroundColor: '#8CEF0D20',
+                  color: '#8CEF0D',
+                  fontSize: '10px',
+                  height: '20px',
+                }}
+              />
+            </Box>
+          </li>
+        );
+      }}
+      onChange={(_, value) => {
+        if (value) {
+          onSelect(value);
+        }
+      }}
+      loading={isLoading}
+      itemType="Find Exercise"
+      renderInput={(params) => <TextField {...params} />}
+    />
+  );
+};

frontend/src/components/ExerciseSelect/queries/index.tsx

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { QUERY_KEYS } from '@constants';
+import { exercisesService } from '@services';
+import type { ExercisesResponse } from '@types';
+
+export const useGetAllExercises = () => {
+  return useQuery<ExercisesResponse[], Error>({
+    queryKey: [QUERY_KEYS.EXERCISES],
+    queryFn: () => exercisesService.getAllExercises(),
+    retry: false,
+    staleTime: 1000 * 60 * 60,
+  });
+};

frontend/src/components/ExerciseSelect/types.ts

@@ -0,0 +1,6 @@
+import type { ExercisesResponse } from '@types';
+
+export interface IExerciseSelectProps {
+  onSelect: (exercise: ExercisesResponse) => void;
+  disabled?: boolean;
+}

frontend/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './AuthPageHeader';
 export * from './Calendar';
+export * from './ExerciseSelect';

frontend/src/components/ui/BaseAutocomplete/index.tsx

@@ -0,0 +1,31 @@
+import { Autocomplete, TextField, Paper } from '@mui/material';
+import type { AutocompleteProps } from '@mui/material';
+
+export const BaseAutocomplete = <T,>(
+  props: AutocompleteProps<T, false, false, false>,
+) => {
+  return (
+    <Autocomplete
+      {...props}
+      PaperComponent={(paperProps) => (
+        <Paper
+          {...paperProps}
+          sx={{
+            backgroundColor: '#181D1B',
+            color: 'white',
+            borderRadius: '12px',
+            marginTop: '8px',
+            boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
+          }}
+        />
+      )}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={props.itemType || 'Select item'}
+          placeholder="Type to search..."
+        />
+      )}
+    />
+  );
+};