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 }) => {