From 0e3b0a7ceecb37e78687d80bd79df7a4b5a1db55 Mon Sep 17 00:00:00 2001 From: Ruidy Date: Sun, 28 Mar 2021 17:05:46 +0200 Subject: [PATCH] refactoring (#5) * use tsx * compile * refactor Router * refactor layout * refactor home container * refactor meal container * refactor categories container * refactor category container * refactor search and profile container * refactor --- .gitignore | 3 +- README.md | 4 +- TODO.md | 1 + jsconfig.json | 6 - package.json | 5 + src/App.jsx | 131 ------------------ src/App.test.js | 9 -- src/App.tsx | 55 ++++++++ .../{CardEntry.jsx => CardEntry.tsx} | 14 +- .../{ContactForm.jsx => ContactForm.tsx} | 2 +- .../{CopyrightText.jsx => CopyrightText.tsx} | 0 src/components/{Footer.jsx => Footer.tsx} | 0 .../{FooterLink.jsx => FooterLink.tsx} | 0 .../{GitHubLink.jsx => GitHubLink.tsx} | 0 src/components/IngredientList.jsx | 24 ---- .../{LogInButton.jsx => LogInButton.tsx} | 0 .../{LogOutButton.jsx => LogOutButton.tsx} | 0 src/components/{Logo.jsx => Logo.tsx} | 0 src/components/{Navbar.jsx => Navbar.tsx} | 0 .../{PreLoader.jsx => PreLoader.tsx} | 0 .../{RandomButton.jsx => RandomButton.tsx} | 0 src/components/Recipe.jsx | 11 -- .../{SearchBar.jsx => SearchBar.tsx} | 0 src/components/SearchResult.jsx | 6 - src/components/{SideNav.jsx => SideNav.tsx} | 2 +- src/constants.ts | 1 + .../components/CategoriesEntry.tsx} | 25 ++-- .../Categories/components/CategoriesPage.tsx | 21 +++ .../Categories/index.tsx} | 11 +- .../Category/components/CategoryPage.tsx | 21 +++ src/containers/Category/index.tsx | 21 +++ .../Contact/index.tsx} | 10 +- src/containers/Home/index.tsx | 23 +++ .../Meal/components/MealIngredientList.tsx | 26 ++++ src/containers/Meal/components/MealPage.tsx | 31 +++++ .../Meal/components/MealPresentation.tsx} | 11 +- src/containers/Meal/components/MealRecipe.tsx | 13 ++ src/containers/Meal/index.tsx | 75 ++++++++++ src/containers/Meal/service.ts | 9 ++ src/containers/NotFound/index.tsx | 32 +++++ .../Profile/components/ProfilePage.tsx | 32 +++++ src/containers/Profile/index.tsx | 25 ++++ .../Search/components/SearchPage.tsx} | 23 +-- .../Search/components/SearchResult.tsx | 9 ++ src/containers/Search/index.tsx | 12 ++ src/controllers/CategoryController.jsx | 25 ---- src/controllers/HomeController.jsx | 6 - src/controllers/MainRouter.jsx | 75 ---------- src/controllers/MealController.jsx | 78 ----------- src/controllers/ProfileController.jsx | 25 ---- src/controllers/SearchController.jsx | 12 -- src/{index.js => index.jsx} | 2 +- .../{MainLayout.jsx => MainLayout.tsx} | 4 +- src/layouts/PageLayout.jsx | 12 -- src/layouts/PageLayout.tsx | 14 ++ src/pages/CategoryListPage.jsx | 15 -- src/pages/CategoryPage.jsx | 31 ----- src/pages/HomePage.jsx | 22 --- src/pages/MealPage.jsx | 20 --- src/pages/NotFoundPage.jsx | 26 ---- src/pages/ProfilePage.jsx | 24 ---- src/react-app-env.d.ts | 1 + src/router/AppRouter.tsx | 57 ++++++++ .../PrivateRoute.tsx} | 13 +- src/router/Router.tsx | 18 +++ src/router/index.ts | 2 + src/{serviceWorker.js => serviceWorker.ts} | 0 src/{utils/methods.js => services/api.ts} | 18 +-- src/{setupTests.js => setupTests.ts} | 0 src/types/meal.ts | 14 ++ src/utils/methods.ts | 2 + src/utils/router.js | 51 ------- tsconfig.json | 26 ++++ yarn.lock | 34 +++++ 74 files changed, 652 insertions(+), 679 deletions(-) delete mode 100644 jsconfig.json delete mode 100644 src/App.jsx delete mode 100644 src/App.test.js create mode 100644 src/App.tsx rename src/components/{CardEntry.jsx => CardEntry.tsx} (58%) rename src/components/{ContactForm.jsx => ContactForm.tsx} (99%) rename src/components/{CopyrightText.jsx => CopyrightText.tsx} (100%) rename src/components/{Footer.jsx => Footer.tsx} (100%) rename src/components/{FooterLink.jsx => FooterLink.tsx} (100%) rename src/components/{GitHubLink.jsx => GitHubLink.tsx} (100%) delete mode 100644 src/components/IngredientList.jsx rename src/components/{LogInButton.jsx => LogInButton.tsx} (100%) rename src/components/{LogOutButton.jsx => LogOutButton.tsx} (100%) rename src/components/{Logo.jsx => Logo.tsx} (100%) rename src/components/{Navbar.jsx => Navbar.tsx} (100%) rename src/components/{PreLoader.jsx => PreLoader.tsx} (100%) rename src/components/{RandomButton.jsx => RandomButton.tsx} (100%) delete mode 100644 src/components/Recipe.jsx rename src/components/{SearchBar.jsx => SearchBar.tsx} (100%) delete mode 100644 src/components/SearchResult.jsx rename src/components/{SideNav.jsx => SideNav.tsx} (96%) create mode 100644 src/constants.ts rename src/{components/CategoryEntry.jsx => containers/Categories/components/CategoriesEntry.tsx} (58%) create mode 100644 src/containers/Categories/components/CategoriesPage.tsx rename src/{controllers/CategoryListController.jsx => containers/Categories/index.tsx} (53%) create mode 100644 src/containers/Category/components/CategoryPage.tsx create mode 100644 src/containers/Category/index.tsx rename src/{pages/Contact.jsx => containers/Contact/index.tsx} (63%) create mode 100644 src/containers/Home/index.tsx create mode 100644 src/containers/Meal/components/MealIngredientList.tsx create mode 100644 src/containers/Meal/components/MealPage.tsx rename src/{components/MealPresentation.jsx => containers/Meal/components/MealPresentation.tsx} (89%) create mode 100644 src/containers/Meal/components/MealRecipe.tsx create mode 100644 src/containers/Meal/index.tsx create mode 100644 src/containers/Meal/service.ts create mode 100644 src/containers/NotFound/index.tsx create mode 100644 src/containers/Profile/components/ProfilePage.tsx create mode 100644 src/containers/Profile/index.tsx rename src/{pages/SearchPage.jsx => containers/Search/components/SearchPage.tsx} (50%) create mode 100644 src/containers/Search/components/SearchResult.tsx create mode 100644 src/containers/Search/index.tsx delete mode 100644 src/controllers/CategoryController.jsx delete mode 100644 src/controllers/HomeController.jsx delete mode 100644 src/controllers/MainRouter.jsx delete mode 100644 src/controllers/MealController.jsx delete mode 100644 src/controllers/ProfileController.jsx delete mode 100644 src/controllers/SearchController.jsx rename src/{index.js => index.jsx} (96%) rename src/layouts/{MainLayout.jsx => MainLayout.tsx} (97%) delete mode 100644 src/layouts/PageLayout.jsx create mode 100644 src/layouts/PageLayout.tsx delete mode 100644 src/pages/CategoryListPage.jsx delete mode 100644 src/pages/CategoryPage.jsx delete mode 100644 src/pages/HomePage.jsx delete mode 100644 src/pages/MealPage.jsx delete mode 100644 src/pages/NotFoundPage.jsx delete mode 100644 src/pages/ProfilePage.jsx create mode 100644 src/react-app-env.d.ts create mode 100644 src/router/AppRouter.tsx rename src/{components/PrivateRoute.jsx => router/PrivateRoute.tsx} (64%) create mode 100644 src/router/Router.tsx create mode 100644 src/router/index.ts rename src/{serviceWorker.js => serviceWorker.ts} (100%) rename src/{utils/methods.js => services/api.ts} (51%) rename src/{setupTests.js => setupTests.ts} (100%) create mode 100644 src/types/meal.ts create mode 100644 src/utils/methods.ts delete mode 100644 src/utils/router.js create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore index 16d8d68..705ca36 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ build/ -node_modules/ \ No newline at end of file +node_modules/ +/.idea \ No newline at end of file diff --git a/README.md b/README.md index fa528ff..e5f4129 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ Free meal planner for cooks short on ideas! (like me …) ## Feature list - Random meal suggestion ✓ -- Search by name: you're look for a recipe? Ours are easy to make and Yummy! ✓ +- Search by name: you look for a recipe? Ours are easy to make and Yummy! ✓ - What's in the fridge ? Choose your main ingredient and get a meal suggestion -- Choose by category: ✓ +- Choose by a category: ✓ - Beef - Breakfast - Chicken diff --git a/TODO.md b/TODO.md index e0f26af..1fcf4a3 100644 --- a/TODO.md +++ b/TODO.md @@ -13,3 +13,4 @@ - [x] Create PageLayout component - [ ] Use Css-in-Js - [ ] Redirect to 404 +- [x] Typescript diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 5875dc5..0000000 --- a/jsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "src" - }, - "include": ["src"] -} diff --git a/package.json b/package.json index 6dc9c9a..2fcae70 100644 --- a/package.json +++ b/package.json @@ -33,5 +33,10 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/node": "^14.14.37", + "@types/react": "^17.0.3", + "typescript": "^4.2.3" } } diff --git a/src/App.jsx b/src/App.jsx deleted file mode 100644 index e2450e3..0000000 --- a/src/App.jsx +++ /dev/null @@ -1,131 +0,0 @@ -import React, { useState } from "react"; -import { Router } from "./utils/router"; - -import { PreLoader } from "./components/PreLoader"; - -import { useAuth0 } from "./utils/auth0-spa"; -import { getData } from "./utils/methods"; -import history from "./utils/history"; - -import "./index.css"; -import MainLayout from "./layouts/MainLayout"; -import MainRouter from "./controllers/MainRouter"; - -export const App = () => { - const { loading } = useAuth0(); - const [searchString, setSearchString] = useState(""); - const [searchResults, setSearchResults] = useState({ meals: [] }); - // Default meal object. TODO: Find a better alternative … - const mealDef = { - meals: [ - { - idMeal: "52837", - strMeal: "Chef's meal", - strDrinkAlternate: null, - strCategory: "yummy", - strArea: "Mine", - strInstructions: - "Cook the pasta following pack instructions.\r\n\r\nHeat the oil in a non-stick frying pan and cook the onion, garlic and chilli for 3-4 mins to soften. Stir in the tomato pur\u00e9e and cook for 1 min, then add the pilchards with their sauce. Cook, breaking up the fish with a wooden spoon, then add the olives and continue to cook for a few more mins.\r\n\r\nDrain the pasta and add to the pan with 2-3 tbsp of the cooking water. Toss everything together well, then divide between plates and serve, scattered with Parmesan.", - strMealThumb: require("./images/breakfast.svg"), - // "https://www.themealdb.com/images/media/meals/vvtvtr1511180578.jpg", - strTags: null, - strYoutube: "#", - strIngredient1: "Spaghetti", - strIngredient2: "Olive Oil", - strIngredient3: "Onion", - strIngredient4: "Garlic", - strIngredient5: "Red Chilli", - strIngredient6: "Tomato Puree", - strIngredient7: "Pilchards", - strIngredient8: "Black Olives", - strIngredient9: "Parmesan", - strIngredient10: "", - strIngredient11: "", - strIngredient12: "", - strIngredient13: "", - strIngredient14: "", - strIngredient15: "", - strIngredient16: "", - strIngredient17: "", - strIngredient18: "", - strIngredient19: "", - strIngredient20: "", - strMeasure1: "300g", - strMeasure2: "1 tbls", - strMeasure3: "1 finely chopped ", - strMeasure4: "2 cloves minced", - strMeasure5: "1", - strMeasure6: "1 tbls", - strMeasure7: "425g", - strMeasure8: "70g", - strMeasure9: "Shaved", - strMeasure10: "", - strMeasure11: "", - strMeasure12: "", - strMeasure13: "", - strMeasure14: "", - strMeasure15: "", - strMeasure16: "", - strMeasure17: "", - strMeasure18: "", - strMeasure19: "", - strMeasure20: "", - strSource: "https://www.bbcgoodfood.com/recipes/pilchard-puttanesca", - dateModified: null, - }, - ], - }; - - const [meal, setMeal] = useState(mealDef); - - const getMeal = (id) => { - getData(id, setMeal, "lookup"); - }; - - const getRandomMeal = () => { - getData("random", setMeal); - }; - - const getSearchResults = (e) => { - searchString === "" - ? e.preventDefault() - : getData(searchString, setSearchResults, "search"); - }; - - const handleChange = (e) => { - const { value } = e.target; - setSearchString(value); - }; - - const buttonUrl = "/random"; - - return loading ? ( -
- -
- ) : ( - - - - - - ); -}; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 4db7ebc..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..68e315d --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,55 @@ +import { FC, useState } from "react"; +import { PreLoader } from "./components/PreLoader"; +import "./index.css"; +import MainLayout from "./layouts/MainLayout"; +import { AppRouter } from "./router"; +import { Router } from "./router/Router"; +import { getData } from "./services/api"; +import { useAuth0 } from "./utils/auth0-spa"; + +export const App: FC = () => { + const { loading } = useAuth0(); + const [searchString, setSearchString] = useState(""); + const [searchResults, setSearchResults] = useState({ meals: [] }); + const [meal, setMeal] = useState(null); + const buttonUrl = "/random"; + + const getRandomMeal = () => { + getData("random", setMeal); + }; + + const getSearchResults = (e) => { + searchString === "" + ? e.preventDefault() + : getData(searchString, setSearchResults, "search"); + }; + + const handleChange = (e) => { + const { value } = e.target; + setSearchString(value); + }; + + return loading ? ( +
+ +
+ ) : ( + + + + + + ); +}; diff --git a/src/components/CardEntry.jsx b/src/components/CardEntry.tsx similarity index 58% rename from src/components/CardEntry.jsx rename to src/components/CardEntry.tsx index ae53662..48df395 100644 --- a/src/components/CardEntry.jsx +++ b/src/components/CardEntry.tsx @@ -1,10 +1,16 @@ -import React from "react"; +import { FC } from "react"; import { Link } from "react-router-dom"; +import { MealSummary } from "../types/meal"; -export const CardEntry = ({ item, className = "col s12 m6" }) => { - const { idMeal, strMeal, strMealThumb } = item; +type Props = { + meal: MealSummary; + className?: string; +}; + +export const CardEntry: FC = ({ meal, className = "col s12 m6" }) => { + const { idMeal, strMeal, strMealThumb } = meal; return ( - +
  • diff --git a/src/components/ContactForm.jsx b/src/components/ContactForm.tsx similarity index 99% rename from src/components/ContactForm.jsx rename to src/components/ContactForm.tsx index a85fda0..0023d31 100644 --- a/src/components/ContactForm.jsx +++ b/src/components/ContactForm.tsx @@ -97,7 +97,7 @@ const ContactFormTextArea = ({ id, value, dispatch }) => {