Fix

package.json

@@ -1,4 +1,5 @@
 {
+  "homepage": "http://tamirs2702.github.io/PplFinder/",
   "name": "ppl-finder",
   "version": "1.0.7",
   "bin": "./bin/cli.js",
@@ -12,8 +13,10 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "gh-pages": "^3.2.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
@@ -22,6 +25,8 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
+    "predeploy":"npm run build",
+    "deploy":"gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -46,6 +51,7 @@
     ]
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0"
+    "babel-eslint": "^10.1.0",
+    "gh-pages": "^3.2.3"
   }
 }

src/AppRouter.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { HashRouter as Router, Switch, Route } from "react-router-dom";
-import { Home } from "pages";
+import { Home, Favorites } from "pages";
 import { ThemeProvider } from "theme";
 import NavBar from "components/NavBar";
 
@@ -11,10 +11,11 @@ const AppRouter = () => {
         <NavBar />
         <Switch>
           <Route exact path="/" component={Home} />
+          <Route exact path="/favorites" component={Favorites} />
         </Switch>
       </Router>
     </ThemeProvider>
   );
 };
 
-export default AppRouter;
+export default AppRouter;

src/components/CheckBox/CheckBox.js

@@ -3,9 +3,14 @@ import Checkbox from "@material-ui/core/Checkbox";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import * as S from "./style";
 
-const CheckBox = ({ isChecked, onChange, label, value }) => {
-  const handleChange = () => {
-    onChange && onChange(value);
+const CheckBox = ({ isChecked, onChangeFromParent, label }) => {
+  const handleChange = (e) => {
+      if (e.target.checked) {
+        onChangeFromParent && onChangeFromParent(label,"add");
+      } else{
+        onChangeFromParent && onChangeFromParent(label,"remove");
+      }
+
   };
   return (
     <S.CheckBox>
@@ -17,4 +22,4 @@ const CheckBox = ({ isChecked, onChange, label, value }) => {
   );
 };
 
-export default CheckBox;
+export default CheckBox;

src/components/NavBar/NavBar.js

@@ -1,13 +1,25 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import AppBar from "@material-ui/core/AppBar";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
+import { useHistory } from "react-router-dom";
 
 const NavBar = () => {
   const [value, setValue] = useState(0);
+  const history = useHistory()
+
+  useEffect(() => {
+    history.push("/")
+  }, []);
 
   const handleChange = (_e, newValue) => {
     setValue(newValue);
+    if(newValue){
+        history.push("/favorites")
+    }
+    else{
+        history.push("/")
+    }
   };
 
   return (
@@ -20,10 +32,12 @@ const NavBar = () => {
         textColor="primary"
       >
         <Tab label="Home" index={0} />
-        <Tab label="Favorites" index={1} />
+        <Tab label="Favorites" index={1}/>
       </Tabs>
+
     </AppBar>
+
   );
 };
 
-export default NavBar;
+export default NavBar;

src/components/UserList/UserList.js

@@ -8,6 +8,10 @@ import * as S from "./style";
 
 const UserList = ({ users, isLoading }) => {
   const [hoveredUserId, setHoveredUserId] = useState();
+  const [checkedBoxed, setCheckedBoxed] = useState([]);
+  const localS = localStorage.getItem("Favorites");
+  const parseLocalS = localS ? JSON.parse(localS) : [];
+  const [favorites, setFavorites] = useState(parseLocalS);
 
   const handleMouseEnter = (index) => {
     setHoveredUserId(index);
@@ -17,21 +21,73 @@ const UserList = ({ users, isLoading }) => {
     setHoveredUserId();
   };
 
+  const handleAddOrRemoveFilter = (value,addOrRemove) => {
+    let newCheckBoxed = [];
+
+    if(addOrRemove === "add") {
+      checkedBoxed.forEach(item => {
+        newCheckBoxed.push(item);
+      })
+      newCheckBoxed.push(value);
+    } else {
+      checkedBoxed.forEach(item => {
+        if (value !== item) {
+          newCheckBoxed.push(item);
+        }
+      })
+    }
+    setCheckedBoxed(newCheckBoxed);
+  }
+
+  const checkConditionToVisible = (index) => {
+    return index === hoveredUserId || favorites.includes(users[index])
+  }
+
+  const handleOnClickFavorite = (index) => {
+    let newFavorites = []
+    if(favorites.includes(users[index])) {
+      favorites.forEach(item => {
+        if(users[index] != item){
+          newFavorites.push(item)
+        }
+      })
+    }
+    else{
+       favorites.forEach(item => {
+          newFavorites.push(item);
+       })
+      newFavorites.push(users[index])
+
+    }
+
+    setFavorites(newFavorites)
+    localStorage.setItem("Favorites", JSON.stringify(newFavorites))
+  }
+
   return (
     <S.UserList>
       <S.Filters>
-        <CheckBox value="BR" label="Brazil" />
-        <CheckBox value="AU" label="Australia" />
-        <CheckBox value="CA" label="Canada" />
-        <CheckBox value="DE" label="Germany" />
+        <CheckBox value="BR" label="Brazil" onChangeFromParent={handleAddOrRemoveFilter}/>
+        <CheckBox value="AU" label="Australia" onChangeFromParent={handleAddOrRemoveFilter}/>
+        <CheckBox value="CA" label="Canada" onChangeFromParent={handleAddOrRemoveFilter}/>
+        <CheckBox value="DE" label="Germany" onChangeFromParent={handleAddOrRemoveFilter}/>
       </S.Filters>
       <S.List>
-        {users.map((user, index) => {
+        {users
+        .filter(user => {
+          if(checkedBoxed.length === 0) {
+            return true;
+          }
+
+          return checkedBoxed.includes(user.location.country)
+        })
+        .map((user, index) => {
           return (
             <S.User
               key={index}
               onMouseEnter={() => handleMouseEnter(index)}
               onMouseLeave={handleMouseLeave}
+              onClick={() => handleOnClickFavorite(index)}
             >
               <S.UserPicture src={user?.picture.large} alt="" />
               <S.UserInfo>
@@ -46,7 +102,7 @@ const UserList = ({ users, isLoading }) => {
                   {user?.location.city} {user?.location.country}
                 </Text>
               </S.UserInfo>
-              <S.IconButtonWrapper isVisible={index === hoveredUserId}>
+              <S.IconButtonWrapper isVisible={checkConditionToVisible(index)}>
                 <IconButton>
                   <FavoriteIcon color="error" />
                 </IconButton>
@@ -64,4 +120,4 @@ const UserList = ({ users, isLoading }) => {
   );
 };
 
-export default UserList;
+export default UserList;

src/hooks/usePeopleFetch.js

@@ -10,11 +10,51 @@ export const usePeopleFetch = () => {
   }, []);
 
   async function fetchUsers() {
-    setIsLoading(true);
-    const response = await axios.get(`https://randomuser.me/api/?results=25&page=1`);
-    setIsLoading(false);
-    setUsers(response.data.results);
+      setIsLoading(true);
+      const response = await axios.get(`https://randomuser.me/api/?results=25&page=1`);
+      setIsLoading(false);
+      let newUsersList = [];
+
+      users.forEach(item => {
+          newUsersList.push(item);
+      })
+
+    response.data.results.forEach(item => {
+      newUsersList.push(item);
+      })
+
+     setUsers(newUsersList);
   }
 
   return { users, isLoading, fetchUsers };
 };
+async function buildList(items, token){
+  try {
+      const list = []
+      let config = ''
+
+      for (item of items.items) {
+          config = {
+              method: 'get',
+              url: 'https://randomuser.me/api/?results=25&page=1' + item.id,
+              headers: {
+                  'Authorization': 'Bearer ' + token,
+                  'Accept': 'application/json'
+              }
+          }
+
+          const buildArray = (await axios(config)).data
+          list.push(JSON.parse(buildArray))
+      }
+
+      return list
+
+  } catch (err) {
+      throw Error ('buildList error: ', err.message)
+  }
+  const filteredCountries = countries.filter(
+    country =>
+      country.name.toLowerCase().includes(searchedCountry.toLowerCase()) &&
+      country.region.toLowerCase().includes(region.toLocaleLowerCase())
+  );
+  }

src/pages/Favorites/Favorites.js

@@ -0,0 +1,69 @@
+import React, {useState} from "react";
+import Text from "components/Text";
+import IconButton from "@material-ui/core/IconButton";
+import FavoriteIcon from "@material-ui/icons/Favorite";
+
+import * as S from "../../components/UserList/style";
+import * as H from "../../pages/Home/style";
+
+const Favorites = () => {
+  const localS = localStorage.getItem("Favorites");
+  const parseLocalS = localS ? JSON.parse(localS) : [];
+  const [favorites, setFavorites] = useState(parseLocalS);
+
+  const handleOnClickFavorite = (index) => {
+    let newFavorites = []
+     favorites.forEach(item => {
+         if(favorites[index] != item)
+           newFavorites.push(item);
+     })
+
+
+    setFavorites(newFavorites)
+    localStorage.setItem("Favorites", JSON.stringify(newFavorites))
+  }
+
+  return (
+    <H.Content>
+          <H.Header>
+            <Text size="64px" bold>
+              PplFinder - Favorites
+            </Text>
+          </H.Header>
+      <S.UserList>
+      <S.List>
+        {favorites
+        .map((user, index) => {
+          return (
+            <S.User
+              key={index}
+              onClick={() => handleOnClickFavorite(index)}
+            >
+              <S.UserPicture src={user?.picture.large} alt="" />
+              <S.UserInfo>
+                <Text size="22px" bold>
+                  {user?.name.title} {user?.name.first} {user?.name.last}
+                </Text>
+                <Text size="14px">{user?.email}</Text>
+                <Text size="14px">
+                  {user?.location.street.number} {user?.location.street.name}
+                </Text>
+                <Text size="14px">
+                  {user?.location.city} {user?.location.country}
+                </Text>
+              </S.UserInfo>
+              <S.IconButtonWrapper isVisible={true}>
+                <IconButton>
+                  <FavoriteIcon color="error" />
+                </IconButton>
+              </S.IconButtonWrapper>
+            </S.User>
+          );
+        })}
+      </S.List>
+    </S.UserList>
+   </H.Content>
+  );
+};
+
+export default Favorites;

src/pages/Favorites/index.js

@@ -0,0 +1 @@
+export { default } from "./Favorites";