update fetching mechanism

src/__tests__/components/View.jsx

@@ -4,7 +4,7 @@ import renderer from 'react-test-renderer';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import View, { ViewSingle } from '../../components/View';
-import { loadingState } from '../../utils/Fetch';
+import { loadingState } from '../../utils/Request';
 import RepoInfo from '../../utils/RepoInfo';
 
 const initData = new Array(6);

src/__tests__/components/__snapshots__/App.jsx.snap

@@ -339,7 +339,7 @@ exports[`<App /> renders default view 1`] = `
         aria-label="Languages"
         className="c4"
         onChange={[Function]}
-        value="All"
+        value="All Languages"
       >
         <option
           className="c5"

src/__tests__/routes/__snapshots__/Home.jsx.snap

@@ -63,7 +63,7 @@ exports[`<Home /> renders with default style 1`] = `
       aria-label="Languages"
       className="c2"
       onChange={[Function]}
-      value="All"
+      value="All Languages"
     >
       <option
         className="c3"

src/__tests__/utils/Fetch.js → src/__tests__/utils/Url.js

@@ -1,4 +1,4 @@
-import { Url, addLang } from '../../utils/Fetch';
+import Url, { addLang } from '../../utils/Url';
 
 describe('addLang', () => {
   const query = 'react';
@@ -13,15 +13,9 @@ describe('addLang', () => {
     expect(addLang(query, lang)).toBe('react language:"cpp"');
   });
 
-  it('all languages', () => {
-    {
-      const lang = 'All';
-      expect(addLang(query, lang)).toBe('react');
-    }
-    {
-      const lang = 'All Languages';
-      expect(addLang(query, lang)).toBe('react');
-    }
+  it('All languages', () => {
+    const lang = 'All Languages';
+    expect(addLang(query, lang)).toBe('react');
   });
 });
 
@@ -33,7 +27,7 @@ describe('<Url />', () => {
 
     expect(url.api).toEqual(api);
     expect(url.params).toEqual([]);
-    expect(url.q).toEqual('');
+    expect(url.queryStr).toEqual('');
   });
 
   it('adds parts', () => {
@@ -48,11 +42,11 @@ describe('<Url />', () => {
 
     {
       const url = new Url(api).query('react     language:JavaScript   ');
-      expect(url.q).toEqual(expected);
+      expect(url.queryStr).toEqual(expected);
     }
     {
       const url = new Url(api).query('react language:JavaScript');
-      expect(url.q).toEqual(expected);
+      expect(url.queryStr).toEqual(expected);
     }
   });
 
@@ -62,7 +56,7 @@ describe('<Url />', () => {
     const expected = `${query}+language:"${lang}"`;
     const url = new Url(api).query(query).lang(lang);
 
-    expect(url.q).toEqual(expected);
+    expect(url.queryStr).toEqual(expected);
   });
 
   it('full toString', () => {

src/components/View.jsx

@@ -9,7 +9,7 @@ import RepoInfo from '../utils/RepoInfo';
 import { ImgLoader } from '../styles/Img';
 import { PFlex } from '../styles/Paragraph';
 import LoadingSpinner from '../assets/img/loading-spinner.svg';
-import { loadingState } from '../utils/Fetch';
+import { loadingState } from '../utils/Request';
 
 /**
  * @module View

src/routes/Home.jsx

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import getAndSave, { Url, defApi, perPage, addLang, loadingState } from '../utils/Fetch';
+import Request, { loadingState } from '../utils/Request';
+import { addLang } from '../utils/Url';
 import { ViewSingle } from '../components/View';
 import { queries, languages } from '../components/Data';
 import RepoInfoList from '../utils/RepoInfoList';
@@ -23,11 +24,12 @@ const mapDispatchToProps = { save };
 
 // eslint-disable-next-line no-shadow
 export function Home({ saved, save }) {
-  const [lang, setLang] = React.useState('All');
+  const [lang, setLang] = React.useState('All Languages');
   const [time, setTime] = React.useState('This Week');
   const [repoInfo, setRepoInfo] = React.useState(new RepoInfoList([], 1));
   const [loading, setLoading] = React.useState(loadingState.INPROGRESS);
   const query = useMemo(() => addLang(queries[time], lang), [lang, time]);
+  const request = new Request();
 
   const onSelect = useCallback((event, callback) => {
     const val = event.target.value;
@@ -48,28 +50,11 @@ export function Home({ saved, save }) {
     [onSelect, setTime],
   );
 
-  async function loadData(currData = [], currPage = 1) {
-    const abortController = new AbortController();
-    const { signal } = abortController;
-
-    setLoading(loadingState.INPROGRESS);
-
-    const preUrl = new Url(defApi).query(query).parts(perPage);
-    const infoList = new RepoInfoList(currData, currPage);
-
-    try {
-      await getAndSave(infoList, preUrl, signal, setRepoInfo);
-      setLoading(loadingState.LOADED);
-    } catch (error) {
-      setLoading(loadingState.ERORR);
-    }
-  }
-
   useEffect(() => {
-    loadData();
+    request.loadData(setLoading, new RepoInfoList([], 1), setRepoInfo, query);
 
     return () => {};
-  }, [lang, time]); // eslint-disable-line
+  }, [query]); // eslint-disable-line
 
   return (
     <>
@@ -82,7 +67,7 @@ export function Home({ saved, save }) {
       </FormAlt>
       <ViewSingle
         data={repoInfo.data}
-        loadData={() => loadData(repoInfo.data, repoInfo.page)}
+        loadData={() => request.loadData(setLoading, repoInfo, setRepoInfo, query)}
         save={save}
         saved={saved}
         loading={loading}

src/routes/Search.jsx

@@ -3,7 +3,8 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { ViewSingle } from '../components/View';
-import getAndSave, { Url, addLang, defApi, perPage, loadingState } from '../utils/Fetch';
+import Request, { loadingState } from '../utils/Request';
+import { addLang } from '../utils/Url';
 import { languages } from '../components/Data';
 import RepoInfoList from '../utils/RepoInfoList';
 import RepoInfo from '../utils/RepoInfo';
@@ -30,26 +31,16 @@ export function Search({ saved, save }) {
   const [search, setSearch] = React.useState('');
   const [loading, setLoading] = React.useState(loadingState.LOADED);
   const [repoInfo, setRepoInfo] = React.useState(new RepoInfoList([], 1));
-  const abortController = new AbortController();
-  const { signal } = abortController;
+  const request = new Request();
 
-  const loadData = useCallback(
-    (currData = [], currPage = 1) => {
-      setLoading(loadingState.INPROGRESS);
-      const preUrl = new Url(defApi).query(search).parts(perPage);
-      const infoList = new RepoInfoList(currData, currPage);
-      return getAndSave(infoList, preUrl, signal, setRepoInfo)
-        .then(() => {
-          setLoading(loadingState.LOADED);
-        })
-        .catch(() => {
-          setLoading(loadingState.ERORR);
-        });
-    },
-    [signal, search, setRepoInfo],
-  );
   const onSubmit = useCallback((event) => event.preventDefault(), []);
-  const onKeyPress = useCallback((event) => (event.key === 'Enter' ? loadData() : {}), [loadData]);
+  const onKeyPress = useCallback(
+    (event) =>
+      event.key === 'Enter'
+        ? request.loadData(setLoading, new RepoInfoList([], 1), setRepoInfo, search)
+        : {},
+    [repoInfo, search], // eslint-disable-line
+  );
 
   const onInput = useCallback((event) => {
     const newSearch = event.target.value;
@@ -82,13 +73,15 @@ export function Search({ saved, save }) {
           value={search}
           onKeyPress={onKeyPress}
         />
-        <ButtonIcon onClick={() => loadData()}>
+        <ButtonIcon
+          onClick={() => request.loadData(setLoading, new RepoInfoList([], 1), setRepoInfo, search)}
+        >
           <Img src={SearchImg} alt="Search" />
         </ButtonIcon>
       </FormAlt>
       <ViewSingle
         data={repoInfo.data}
-        loadData={() => loadData(repoInfo.data, repoInfo.page)}
+        loadData={() => request.loadData(setLoading, repoInfo, setRepoInfo, search)}
         save={save}
         saved={saved}
         loading={loading}