Improve top-level theme context

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true
   },
   extends: ["airbnb", "plugin:prettier/recommended"],
-  plugins: ["react"],
+  plugins: ["react", "react-hooks"],
   rules: {
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
     "react/prop-types": 0,
@@ -12,5 +12,7 @@ module.exports = {
     "import/prefer-default-export": 0, // https://stackoverflow.com/q/54245654/2771889
     "linebreak-style": ["error", process.platform === "win32" ? "windows" : "unix"], // // https://stackoverflow.com/q/39114446/2771889
     "import/prefer-default-export": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
   },
 };

package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "js-yaml-loader": "^1.2.2",
     "pre-commit": "^1.2.2",
     "prettier": "^1.16.4"

pages/index.js

@@ -1,18 +1,18 @@
 import React from "react";
 import { Normalize } from "styled-normalize";
-import GlobalTheme from "../src/components/GlobalTheme/GlobalTheme";
 import { GlobalStyle } from "../src/common/GlobalStyle/GlobalStyle";
 import App from "../src/components/App/App";
+import { ThemeProvider } from "../src/contexts/Theme";
 import { ConfigProvider } from "../src/contexts/Config";
 
 const indexPage = () => (
-  <GlobalTheme>
+  <ThemeProvider>
     <Normalize />
     <GlobalStyle />
     <ConfigProvider>
       <App />
     </ConfigProvider>
-  </GlobalTheme>
+  </ThemeProvider>
 );
 
 export default indexPage;

src/components/Header/ToggleButton/ToggleButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { toggleButtonStyle } from "./ToggleButton.style";
-import { useTheme } from "../../../utils/useTheme/useTheme";
+import { useTheme } from "../../../contexts/Theme";
 import MoonIcon from "./Icons/MoonIcon";
 import SunIcon from "./Icons/SunIcon";
 
@@ -10,7 +10,7 @@ const ToggleButton = styled.div`
 `;
 
 export default () => {
-  const themeState = useTheme();
+  const { theme, toggle } = useTheme();
 
   return (
     <ToggleButton>
@@ -21,8 +21,8 @@ export default () => {
         <input
           id="shiftercb"
           type="checkbox"
-          onChange={() => themeState.toggle()}
-          checked={!themeState.dark}
+          onChange={toggle}
+          checked={theme !== "dark"}
           name="checkbox"
         />
         <span className="slider round" />

src/components/Medium/Medium.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useCallback } from "react";
+import RSSParser from "rss-parser";
+import Url from "url-parse";
 import styled from "styled-components";
-import * as customHooks from "../../utils/CustomHooks/CustomHooks";
-import * as mediumUtils from "./utils/MediumUtils";
+import { useFetch } from "../../utils/ReactUtils/ReactUtils";
 import Article from "./Article/Article";
 import Loader from "../UI/Loader/Loader";
 import { useConfig } from "../../contexts/Config";
@@ -11,21 +12,37 @@ const Medium = styled.div`
   ${mediumStyle}
 `;
 
+const proxify = (proxy, url) => {
+  const proxifiedUrl = new Url(proxy);
+
+  proxifiedUrl.set("pathname", url);
+
+  return proxifiedUrl.toString();
+};
+
 export default () => {
-  const { proxyURL, medium } = useConfig();
-  const articles = customHooks.useFetch(() =>
-    mediumUtils.getArticles(proxyURL, medium)
-  );
+  const { proxyURL, medium: username } = useConfig();
+
+  const fetchArticles = useCallback(() => {
+    const parser = new RSSParser();
+    const url = proxify(proxyURL, `https://medium.com/feed/${username}`);
+
+    return parser
+      .parseURL(url)
+      .then(({ items }) => items.filter(item => item.categories));
+  }, [proxyURL, username]);
+
+  const { loading, err, data: articles } = useFetch(fetchArticles);
 
-  if (articles.isLoading) {
+  if (loading) {
     return (
       <Medium>
         <Loader />
       </Medium>
     );
   }
 
-  if (articles.err) {
+  if (err) {
     const errorMessage =
       "An error has occurred while loading the Medium articles. Please try again later.";
 
@@ -35,8 +52,8 @@ export default () => {
   return (
     <Medium>
       <h2 className="title">Articles</h2>
-      {articles.data.map(articleDetails => (
-        <Article key={articleDetails.guid} articleDetails={articleDetails} />
+      {articles.map(article => (
+        <Article key={article.guid} articleDetails={article} />
       ))}
     </Medium>
   );

src/components/Projects/ProjectDisplayer/ProjectDisplayer.js

@@ -6,7 +6,7 @@ import {
   languageTextsWrapperStyle,
   languageIconsWrapperStyle,
 } from "./ProjectDisplayer.style";
-import * as githubUtils from "../utils/GithubUtils";
+import { useGitHub } from "../utils/GithubUtils";
 import Loader from "../../UI/Loader/Loader";
 import StarIcon from "../../UI/Icons/StarIcon";
 import { useConfig } from "../../../contexts/Config";
@@ -29,46 +29,45 @@ const LanguageIconsWrapper = styled.div`
 `;
 
 export default ({ userName, repoName }) => {
+  const { loading, languagesErr, repoInfoErr, languages, repoInfo } = useGitHub(
+    userName,
+    repoName
+  );
   const { display } = useConfig();
-  const {
-    githubFetchState,
-    githubRepoLanguages,
-    repoLanguages,
-  } = githubUtils.useRepoLanguages(userName, repoName);
 
-  if (githubFetchState.isLoading || githubRepoLanguages.isLoading) {
+  if (loading) {
     return (
       <ProjectDisplayer>
         <Loader />
       </ProjectDisplayer>
     );
   }
 
-  if (githubFetchState.err) {
+  if (repoInfoErr) {
     const errorMessage = `An error has occurred while loading the ${repoName} Github project. Please try again later.`;
 
     return <ErrorContainer>{errorMessage}</ErrorContainer>;
   }
 
-  if (githubRepoLanguages.err) {
-    /* eslint-disable-next-line no-console */
+  if (languagesErr) {
+    // eslint-disable-next-line no-console
     console.warn(
       `An error has occurred while loading the ${repoName} Github project languages. Please try again later.`
     );
   }
 
   function renderLanguages() {
-    if (repoLanguages && display === "icon") {
+    if (languages && display === "icon") {
       return (
         <LanguageIconsWrapper>
-          <TechIconsDisplayer collection={repoLanguages} />
+          <TechIconsDisplayer collection={languages} />
         </LanguageIconsWrapper>
       );
     }
 
     return (
       <LanguageTextsWrapper>
-        {repoLanguages.map(language => {
+        {languages.map(language => {
           return <div key={language}>{language}</div>;
         })}
       </LanguageTextsWrapper>
@@ -79,21 +78,21 @@ export default ({ userName, repoName }) => {
     <ProjectDisplayer>
       <a
         className="repository_link"
-        href={githubFetchState.data.html_url}
+        href={repoInfo.url}
         target="_blank"
         rel="noopener noreferrer"
       >
         <div className="project_header">
           <div className="project_title">
-            <div className="repository_name">{githubFetchState.data.name}</div>
+            <div className="repository_name">{repoInfo.name}</div>
             <div className="project_star">
               <StarIcon />
-              {githubFetchState.data.stargazers_count}
+              {repoInfo.stars}
             </div>
           </div>
         </div>
         <div className="project_description">
-          <div>{githubFetchState.data.description}</div>
+          <div>{repoInfo.description}</div>
         </div>
         {renderLanguages()}
       </a>