From 9f67edeab9cf622e0b6e496bde62dec194e986d1 Mon Sep 17 00:00:00 2001 From: Prince Chaudhary Date: Fri, 25 Aug 2023 13:47:58 +0530 Subject: [PATCH 1/3] Re-build the app using react hooks --- src/AppHook.js | 57 +++++++++++++++++++ .../Card-list/Card-list.Hook-Comp.jsx | 21 +++++++ .../cards/Card-Content.Hook-Comp.jsx | 19 +++++++ .../Search-box/Search-Box.Hook-Comp.jsx | 15 +++++ src/index.js | 2 +- 5 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 src/AppHook.js create mode 100644 src/Components/Card-list/Card-list.Hook-Comp.jsx create mode 100644 src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx create mode 100644 src/Components/Search-box/Search-Box.Hook-Comp.jsx diff --git a/src/AppHook.js b/src/AppHook.js new file mode 100644 index 0000000..a4ec967 --- /dev/null +++ b/src/AppHook.js @@ -0,0 +1,57 @@ +import React, { useEffect, useState } from 'react'; +import './App.css'; +import SearchBoxHookComponent from './Components/Search-box/Search-Box.Hook-Comp'; +import CardListHookComponent from './Components/Card-list/Card-list.Hook-Comp'; + +function AppHook() { + console.log('Render'); + // This is not a good idea to change state or work with state in a large component. + // const [searchField, setSearchField] = useState('c'); // re-render will not occur when where is no change inside a state variable. + const [searchField, setSearchField] = useState(''); + const [monsters, setMonsters] = useState([]); + const [filteredMoster, setFilteredMoster] = useState(monsters); + + useEffect(() => { + /* + Inside this callback is going to have codes as a effect that we want to happen inside our funtional component with this + useEffect hook. And that effect will depended on the dependecies array that we pass as a second argument, but if we don't + pass any dependecy then the useEffect hook will run only once, just like componentDidMount method. + */ + + fetch('https://jsonplaceholder.typicode.com/users') + .then(response => response.json()) + .then(users => setMonsters(users)) + .catch(error => console.log(error)); + + }, []); + + const searchMonster = (event) => { + const searchFieldString = event.target.value.toLowerCase().trim(); + setSearchField(searchFieldString); + } + + // Right now, we have only two state variables that are related to filteredMoster array which filters our the array elements based on the searchField value. But what if we have some others state that do something else, do wwe still want to re-run `filter` array loop? when there is no need to run filter array method? Of couse not, so we can prevent these sort of redundant execution with useEffect hook and it will only run when it needs to run. + useEffect(() => { + const monster = monsters.filter(monster => { + return monster.name.toLowerCase().slice(0, searchField.length) === searchField; + }); + + setFilteredMoster(monster); + }, [monsters, searchField]); + + return ( +
+

Mosters Rolodex

+ + + + +
+ ) +} + +export default AppHook; \ No newline at end of file diff --git a/src/Components/Card-list/Card-list.Hook-Comp.jsx b/src/Components/Card-list/Card-list.Hook-Comp.jsx new file mode 100644 index 0000000..a814fa6 --- /dev/null +++ b/src/Components/Card-list/Card-list.Hook-Comp.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import ApplyStyle from './card-list.style.module.css'; +import CardContentHookComponent from './cards/Card-Content.Hook-Comp'; + +function CardListHookComponent({monsters}) { + return ( +
{ + monsters ? monsters.map(monster => { + const id = monster.id; + return ( + + ) + }) :

No Monsters Found

+ }
+ ); +} + +export default CardListHookComponent; \ No newline at end of file diff --git a/src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx b/src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx new file mode 100644 index 0000000..73b9ff8 --- /dev/null +++ b/src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ApplyStyle from './card-content.style.module.css'; + +function CardContentHookComponent({ monster }) { + const {id, name, email} = monster; + return ( +
+ {`monster + +

{name}

+ {email} +
+ ); +} + +export default CardContentHookComponent; \ No newline at end of file diff --git a/src/Components/Search-box/Search-Box.Hook-Comp.jsx b/src/Components/Search-box/Search-Box.Hook-Comp.jsx new file mode 100644 index 0000000..39a5225 --- /dev/null +++ b/src/Components/Search-box/Search-Box.Hook-Comp.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ApplyStyle from './search-box.style.module.css'; + +function SearchBoxHookComponent(props) { + return ( + + ) +} + +export default SearchBoxHookComponent; \ No newline at end of file diff --git a/src/index.js b/src/index.js index d563c0f..09477aa 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './App'; +import App from './AppHook'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); From 43293191a86227c71b85680d2dfdae0a55175555 Mon Sep 17 00:00:00 2001 From: Prince Chaudhary Date: Fri, 25 Aug 2023 14:31:58 +0530 Subject: [PATCH 2/3] Removed some redundant import states from components --- src/Components/Card-list/Card-list.Hook-Comp.jsx | 1 - src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx | 1 - src/Components/Search-box/Search-Box.Hook-Comp.jsx | 1 - 3 files changed, 3 deletions(-) diff --git a/src/Components/Card-list/Card-list.Hook-Comp.jsx b/src/Components/Card-list/Card-list.Hook-Comp.jsx index a814fa6..d4b665a 100644 --- a/src/Components/Card-list/Card-list.Hook-Comp.jsx +++ b/src/Components/Card-list/Card-list.Hook-Comp.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import ApplyStyle from './card-list.style.module.css'; import CardContentHookComponent from './cards/Card-Content.Hook-Comp'; diff --git a/src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx b/src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx index 73b9ff8..2a3f4d5 100644 --- a/src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx +++ b/src/Components/Card-list/cards/Card-Content.Hook-Comp.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import ApplyStyle from './card-content.style.module.css'; function CardContentHookComponent({ monster }) { diff --git a/src/Components/Search-box/Search-Box.Hook-Comp.jsx b/src/Components/Search-box/Search-Box.Hook-Comp.jsx index 39a5225..2f1a905 100644 --- a/src/Components/Search-box/Search-Box.Hook-Comp.jsx +++ b/src/Components/Search-box/Search-Box.Hook-Comp.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import ApplyStyle from './search-box.style.module.css'; function SearchBoxHookComponent(props) { From 61abadc681fcd142c825b6c8c4006bf339912026 Mon Sep 17 00:00:00 2001 From: Prince Chaudhary Date: Fri, 25 Aug 2023 14:35:57 +0530 Subject: [PATCH 3/3] Prevented app to import entire React library in AppHook --- src/AppHook.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/AppHook.js b/src/AppHook.js index a4ec967..23d6c1d 100644 --- a/src/AppHook.js +++ b/src/AppHook.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import './App.css'; import SearchBoxHookComponent from './Components/Search-box/Search-Box.Hook-Comp'; import CardListHookComponent from './Components/Card-list/Card-list.Hook-Comp';