Refactor state management using Context API and custom hook

src/components/CardSet.js

@@ -3,9 +3,11 @@ import SingleCard from "./SingleCard";
 import { makeStyles } from "@material-ui/core/styles";
 import axios from "axios";
 import { isEmpty } from "lodash";
+
 // import { dotenv } from "dotenv";
 // dotenv.config();
 //Context
+import { useAppStates } from "../Context/AppProvider";
 import { ThemeContext } from "../Context/themeContext";
 import Loading from "./Loading/index";
 
@@ -16,6 +18,8 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const CardSet = ({
+}) => {
+  const {
   language,
   inputSearch,
   pageNumber,
@@ -24,7 +28,7 @@ const CardSet = ({
   sortByForks,
   setMaxPageNumber,
   setHidePagination,
-}) => {
+  } = useAppStates()
   const [repositores, setRepositories] = useState([]);
   const classes = useStyles();
   const [isLoading, setIsLoading] = useState(false);

src/components/Header.js

@@ -8,8 +8,14 @@ import { useDebouncedCallback } from "use-debounce";
 import { ThemeContext } from "../Context/themeContext";
 import Darkmode from "./Buttons/Darkmode";
 import CustomSelect from "./Buttons/Language";
+import { useAppStates } from "../Context/AppProvider";
 
-const Header = ({ language, setLanguage, setInputSearch }) => {
+const Header = () => {
+  const {
+     language, 
+     setLanguage,
+    setInputSearch 
+  } = useAppStates()
   const { theme, changeTheme } = useContext(ThemeContext);
   const [input, setInput] = useState(""); // Mirrors inputSearch and setInputSearch
 

src/components/Navigation.js

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import { Container, Pagination } from "react-bootstrap";
+import { useAppStates } from "../Context/AppProvider";
 
 import Filter from "./Buttons/Filter";
 import Sort from "./Buttons/Sort";
@@ -9,7 +10,11 @@ import "./Navigation.css";
 import Darkmode from "./Buttons/Darkmode";
 
 const Navigation = ({
-  setPageNumber,
+
+}) => {
+
+  const {
+   setPageNumber,
   pageNumber,
   maxPageNumber,
   setSortByForks,
@@ -19,7 +24,7 @@ const Navigation = ({
   hidePagination,
   hasFilters,
   removePagination,
-}) => {
+  }= useAppStates()
   const { theme, changeTheme } = useContext(ThemeContext);
   let paginationItems = [];
   const [selectedPage, setSelectedPage] = useState();