diff --git a/components/LoginForm.js b/components/LoginForm.js deleted file mode 100644 index dea117d..0000000 --- a/components/LoginForm.js +++ /dev/null @@ -1,126 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; - -const LoginForm = (props) => { - return ( -
-
-
-
-
- - -

- Please fill out this field. -

-
-
- - -
-
-
-
- - -

- Make it as long and as crazy as you'd like -

-
-
-
-
- - -
-
- -
- -
- - - -
-
-
-
- - -
-
-
-
-
- ); -}; - -LoginForm.propTypes = {}; - -export default LoginForm; diff --git a/pages/_app.js b/pages/_app.js index 46f1c3a..65abc51 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,5 +1,5 @@ -import "../styles/styles.css"; -import "../styles/Spinner.css"; +import "../src/styles/styles.css"; +import "../src/styles/Spinner.css"; function App({ Component, pageProps }) { return ; diff --git a/pages/index.js b/pages/index.js index d9d470c..2913453 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,5 @@ -import Layout from "../components/Layout"; -import AuthorsSection from "../components/AuthorsSection"; -import LoginForm from "../components/LoginForm"; +import Layout from "../src/components/Layout"; +import AuthorsSection from "../src/components/AuthorsSection"; const index = () => { return ( diff --git a/actions/request.js b/src/actions/request.js similarity index 100% rename from actions/request.js rename to src/actions/request.js diff --git a/components/AuthorsSection/Author.js b/src/components/AuthorsSection/Author.js similarity index 100% rename from components/AuthorsSection/Author.js rename to src/components/AuthorsSection/Author.js diff --git a/components/AuthorsSection/AuthorPulseAnimation.js b/src/components/AuthorsSection/AuthorPulseAnimation.js similarity index 100% rename from components/AuthorsSection/AuthorPulseAnimation.js rename to src/components/AuthorsSection/AuthorPulseAnimation.js diff --git a/components/AuthorsSection/AuthorSearchBar.js b/src/components/AuthorsSection/AuthorSearchBar.js similarity index 100% rename from components/AuthorsSection/AuthorSearchBar.js rename to src/components/AuthorsSection/AuthorSearchBar.js diff --git a/components/AuthorsSection/index.js b/src/components/AuthorsSection/index.js similarity index 62% rename from components/AuthorsSection/index.js rename to src/components/AuthorsSection/index.js index 36dfdee..62e9c41 100644 --- a/components/AuthorsSection/index.js +++ b/src/components/AuthorsSection/index.js @@ -1,51 +1,24 @@ -import React, { useState, useEffect, useReducer } from "react"; +import React, { useState, useEffect, useReducer, useContext } from "react"; import AuthorSearchBar from "./AuthorSearchBar"; import Author from "./Author"; -import axios from "axios"; import Spinner from "../shared/Spinner"; -import requestReducer, { REQUEST_STATUS } from "../../reducers/request"; +import { REQUEST_STATUS } from "../../reducers/request"; +import { DataContext, DataProvider } from "../../contexts/DataContexts"; -import { - GET_ALL_SUCCESS, - GET_ALL_FAILURE, - PUT_FAILURE, - PUT_SUCCESS, -} from "../../actions/request"; - -const AuthorsSection = () => { +const AuthorsSectionComponent = () => { const [searchQuery, setSearchQuery] = useState(""); - const [{ records: authors, status, error }, dispatch] = useReducer( - requestReducer, - { - status: REQUEST_STATUS.LOADING, - records: [], - error: null, - } - ); - console.log("authors", authors); + const { records: authors, status, error, put } = useContext(DataContext); const onFavoriteToggleHandler = async (authorToToggle) => { + put({ + ...authorToToggle, + isFavorite: !authorToToggle.isFavorite, + }); const toggledAuthor = { ...authorToToggle, isFavorite: !authorToToggle.isFavorite, }; - try { - await axios.put( - `http://localhost:4000/users/${toggledAuthor.id}`, - toggledAuthor - ); - - dispatch({ - type: PUT_SUCCESS, - record: toggledAuthor, - }); - } catch (e) { - dispatch({ - type: PUT_FAILURE, - error: e, - }); - } }; const mapAPIDataToView = (authors) => { @@ -60,26 +33,6 @@ const AuthorsSection = () => { }); }; - useEffect(() => { - console.log("Use Effec Hook"); - const fetchData = async () => { - try { - const { data } = await axios.get(`http://localhost:4000/users`); - dispatch({ - type: GET_ALL_SUCCESS, - records: data, - }); - } catch (err) { - dispatch({ - type: GET_ALL_FAILURE, - status: REQUEST_STATUS.ERROR, - error: err, - }); - } - }; - fetchData(); - }, []); - const isSuccess = status === REQUEST_STATUS.SUCCESS; const isLoading = status === REQUEST_STATUS.LOADING; const isError = status === REQUEST_STATUS.ERROR; @@ -128,4 +81,12 @@ const AuthorsSection = () => { ); }; -export default AuthorsSection; +const AuthorSection = (props) => { + return ( + + + + ); +}; + +export default AuthorSection; diff --git a/components/Footer/index.js b/src/components/Footer/index.js similarity index 100% rename from components/Footer/index.js rename to src/components/Footer/index.js diff --git a/components/Header/index.js b/src/components/Header/index.js similarity index 100% rename from components/Header/index.js rename to src/components/Header/index.js diff --git a/components/Layout/index.js b/src/components/Layout/index.js similarity index 100% rename from components/Layout/index.js rename to src/components/Layout/index.js diff --git a/components/shared/Spinner.js b/src/components/shared/Spinner.js similarity index 100% rename from components/shared/Spinner.js rename to src/components/shared/Spinner.js diff --git a/src/contexts/DataContexts.js b/src/contexts/DataContexts.js new file mode 100644 index 0000000..5115f24 --- /dev/null +++ b/src/contexts/DataContexts.js @@ -0,0 +1,10 @@ +import React from "react"; +const DataContext = React.createContext(); +import useRequest from "../hooks/useRequest"; + +const DataProvider = ({ children, baseUrl, routeName }) => { + const state = useRequest(baseUrl, routeName); + return {children}; +}; + +export { DataContext, DataProvider }; diff --git a/src/hooks/useRequest.js b/src/hooks/useRequest.js new file mode 100644 index 0000000..e6ccf5b --- /dev/null +++ b/src/hooks/useRequest.js @@ -0,0 +1,60 @@ +import React, { useEffect, useReducer } from "react"; +import requestReducer, { REQUEST_STATUS } from "../reducers/request"; +import axios from "axios"; +import { + GET_ALL_FAILURE, + GET_ALL_SUCCESS, + PUT_FAILURE, + PUT_SUCCESS, +} from "../actions/request"; + +const useRequestSimple = (baseUrl, routeName) => { + const [{ records, status, error }, dispatch] = useReducer(requestReducer, { + status: REQUEST_STATUS.LOADING, + records: [], + error: null, + }); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await axios.get(`${baseUrl}/${routeName}`); + dispatch({ + type: GET_ALL_SUCCESS, + records: response.data, + }); + } catch (e) { + console.log("Loading data error", e); + + dispatch({ + type: GET_ALL_FAILURE, + error: e, + }); + } + }; + fetchData(); + }, [baseUrl, routeName]); + + const propsLocal = { + records, + status, + error, + put: async (record) => { + try { + await axios.put(`${baseUrl}/${routeName}/${record.id}`, record); + dispatch({ + type: PUT_SUCCESS, + record: record, + }); + } catch (e) { + dispatch({ + type: PUT_FAILURE, + error: e, + }); + } + }, + }; + return propsLocal; +}; + +export default useRequestSimple; diff --git a/reducers/request.js b/src/reducers/request.js similarity index 100% rename from reducers/request.js rename to src/reducers/request.js diff --git a/styles/Spinner.css b/src/styles/Spinner.css similarity index 100% rename from styles/Spinner.css rename to src/styles/Spinner.css diff --git a/styles/styles.css b/src/styles/styles.css similarity index 100% rename from styles/styles.css rename to src/styles/styles.css diff --git a/util/writeAPIDataToFile.js b/src/util/writeAPIDataToFile.js similarity index 100% rename from util/writeAPIDataToFile.js rename to src/util/writeAPIDataToFile.js