Merge pull request #74 from readme-experts/ts-migrate

feat: Migrate client to Typescript

package.json

@@ -16,7 +16,7 @@
     "cheerio": "^1.0.0-rc.10",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.1.4",
     "express": "^4.17.2",
     "express-validator": "^6.14.0",
     "jsonwebtoken": "^9.0.0",

src/client/.eslintrc.json

@@ -4,7 +4,11 @@
     "es6": true,
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "plugins": [
+  "@typescript-eslint"
+],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"],
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module"

src/client/package.json

@@ -7,15 +7,24 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
     "http-proxy-middleware": "^2.0.6",
-    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
+    "typescript": "^5.1.3",
     "web-vitals": "^2.1.4"
   },
+  "overrides": {
+    "react-scripts": {
+      "typescript": ">3.2.1"
+    }
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -39,5 +48,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "eslint": "^8.42.0"
   }
 }

src/client/src/App.jsx → src/client/src/App.tsx

@@ -4,11 +4,11 @@ import { AppRoutes, ProtectedAppRoutes } from './features/AppRoutes';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import ProtectedRoute from './features/ProtectedRoute';
-import { useSelector } from 'react-redux';
 import ErrorMessage from './components/ErrorMessage';
+import { useAppSelector } from './app/store';
 
 function App() {
-  const user = useSelector(state => state.account.user) || null;
+  const user = useAppSelector(state => state.account.user) || null;
 
   return (
     <div className='App'>
@@ -25,7 +25,7 @@ function App() {
               {element}
             </ProtectedRoute>} />;
         })}
-        <Route path='*' element={<ErrorMessage error="404! Not found!"/>} />
+        <Route path='*' element={<ErrorMessage error={new Error('404! This page doesn\'t exist')}/>} />
       </Routes>
       <Footer />
     </div>

src/client/src/app/actions/account/addFavoriteRecipe.ts

@@ -0,0 +1,22 @@
+import { createAppAsyncThunk } from '../../utils/createAppAsyncThunk';
+import { AuthStoreError } from '../../slices/types/Auth/AuthState';
+import { thunkErrorWrapper } from '../../utils/thunkErrorWrapper';
+import { RecipeModel } from '../../../services/models/RecipeModel';
+
+export const addFavoriteRecipe = createAppAsyncThunk<RecipeModel,
+  { userId: number, recipe: RecipeModel },
+  { rejectValue: AuthStoreError }>(
+    'account/addFavoriteRecipe',
+    async ({ userId, recipe }, thunkAPI) => {
+      if (!thunkAPI.extra.userService.token) {
+        thunkAPI.extra.userService.setToken(thunkAPI.getState().account.token);
+      }
+      const thunk = thunkErrorWrapper(
+        thunkAPI.extra.userService.addFavoriteRecipe,
+        thunkAPI.rejectWithValue,
+        thunkAPI.extra.userService
+      );
+      await thunk(userId, recipe.id);
+      return recipe;
+    },
+  );

src/client/src/app/actions/account/deleteFavoriteRecipe.ts

@@ -0,0 +1,22 @@
+import { AuthStoreError } from '../../slices/types/Auth/AuthState';
+import { createAppAsyncThunk } from '../../utils/createAppAsyncThunk';
+import { thunkErrorWrapper } from '../../utils/thunkErrorWrapper';
+import { RecipeModel } from '../../../services/models/RecipeModel';
+
+export const deleteFavoriteRecipe = createAppAsyncThunk<RecipeModel,
+  { recipe : RecipeModel },
+  { rejectValue: AuthStoreError }>(
+    'account/deleteFavoriteRecipe',
+    async ({ recipe }, thunkAPI) => {
+      if (!thunkAPI.extra.userService.token) {
+        thunkAPI.extra.userService.setToken(thunkAPI.getState().account.token);
+      }
+      const thunk = thunkErrorWrapper(
+        thunkAPI.extra.userService.deleteFavoriteRecipe,
+        thunkAPI.rejectWithValue,
+        thunkAPI.extra.userService
+      );
+      await thunk(recipe.id);
+      return recipe;
+    },
+  );

src/client/src/app/actions/account/loadFavoriteRecipes.ts

@@ -0,0 +1,21 @@
+import { createAppAsyncThunk } from '../../utils/createAppAsyncThunk';
+import { RecipeModel } from '../../../services/models/RecipeModel';
+import { AuthStoreError } from '../../slices/types/Auth/AuthState';
+import { thunkErrorWrapper } from '../../utils/thunkErrorWrapper';
+
+export const loadFavoriteRecipes = createAppAsyncThunk<RecipeModel[],
+  null,
+  { rejectValue: AuthStoreError }>(
+    'account/loadUserFavorites',
+    async (_, thunkAPI) => {
+      if (!thunkAPI.extra.userService.token) {
+        thunkAPI.extra.userService.setToken(thunkAPI.getState().account.token);
+      }
+      const thunk = thunkErrorWrapper(
+        thunkAPI.extra.userService.getFavoriteRecipes,
+        thunkAPI.rejectWithValue,
+        thunkAPI.extra.userService
+      );
+      return await thunk();
+    },
+  );

src/client/src/app/actions/account/loginUser.ts

@@ -0,0 +1,19 @@
+import { createAppAsyncThunk } from '../../utils/createAppAsyncThunk';
+import { AuthStoreError } from '../../slices/types/Auth/AuthState';
+import { AuthFulfilled } from '../../slices/types/Auth/AuthFulfilled';
+import { UserDTO } from '../../../services/DTO/UserDTO';
+import { thunkErrorWrapper } from '../../utils/thunkErrorWrapper';
+
+export const loginUser = createAppAsyncThunk<AuthFulfilled,
+  UserDTO,
+  { rejectValue: AuthStoreError }>(
+    'account/login',
+    async ({ email, password }: UserDTO, thunkAPI) => {
+      const thunk = thunkErrorWrapper(
+        thunkAPI.extra.authService.login,
+        thunkAPI.rejectWithValue,
+        thunkAPI.extra.authService
+      );
+      return await thunk(email, password);
+    }
+  );

src/client/src/app/actions/account/registerUser.ts

@@ -0,0 +1,18 @@
+import { createAppAsyncThunk } from '../../utils/createAppAsyncThunk';
+import { AuthFulfilled } from '../../slices/types/Auth/AuthFulfilled';
+import { UserDTO } from '../../../services/DTO/UserDTO';
+import { AuthStoreError } from '../../slices/types/Auth/AuthState';
+
+export const registerUser = createAppAsyncThunk<AuthFulfilled,
+  UserDTO,
+  { rejectValue: AuthStoreError }>(
+    'account/register',
+    async ({ username, password }, thunkAPI) => {
+      const thunk = thunkAPI.extra.thunkErrorWrapper(
+        thunkAPI.extra.authService.register,
+        thunkAPI.rejectWithValue,
+        thunkAPI.extra.authService
+      );
+      return await thunk(username, password);
+    }
+  );

src/client/src/app/actions/recipes/loadRecipes.ts

@@ -0,0 +1,22 @@
+import { RecipeModel } from '../../../services/models/RecipeModel';
+import { createAppAsyncThunk } from '../../utils/createAppAsyncThunk';
+import { RecipeStoreError } from '../../slices/types/Recipe/RecipeState';
+import { thunkErrorWrapper } from '../../utils/thunkErrorWrapper';
+
+export const loadRecipes = createAppAsyncThunk<RecipeModel[],
+  string,
+  { rejectValue: RecipeStoreError }>(
+    'recipes/loadRecipes',
+    async (queryString: string, thunkAPI) => {
+      if (!thunkAPI.extra.recipeService.token) {
+        thunkAPI.extra.recipeService.setToken(thunkAPI.getState().account.token);
+      }
+      const thunk = thunkErrorWrapper(
+        thunkAPI.extra.recipeService.getRecipesByName,
+        thunkAPI.rejectWithValue,
+        thunkAPI.extra.recipeService
+      );
+      const params = new URLSearchParams({ recipeName: queryString });
+      return await thunk(params);
+    },
+  );