From ac3df61fec9c345624cbfec126edb949ae2efc5a Mon Sep 17 00:00:00 2001 From: hippoz Date: Tue, 5 Jan 2021 18:40:03 +0200 Subject: [PATCH] Add category sidebar and category info routing --- bfrontend/package-lock.json | 10 ++ bfrontend/package.json | 4 +- bfrontend/src/Components/App.js | 33 ++-- .../Components/Categories/CategoryButton.js | 11 ++ .../src/Components/Categories/CategoryList.js | 53 +++++++ .../Categories/CategoryListLoader.js | 44 ++++++ .../Components/Categories/CategoryProfile.js | 0 .../src/Components/Categories/CategoryView.js | 55 +++++++ .../Categories/CategoryViewLoader.js | 17 +++ bfrontend/src/Components/Root.js | 12 +- bfrontend/src/Components/UI/Sidebar.js | 9 ++ bfrontend/src/Errors.js | 4 +- .../src/Images/defaultprofile_256px-256px.png | Bin 0 -> 645 bytes bfrontend/src/Styles/App.scss | 143 +++++++++++++++++- bfrontend/src/store.js | 7 + 15 files changed, 373 insertions(+), 29 deletions(-) create mode 100644 bfrontend/src/Components/Categories/CategoryButton.js create mode 100644 bfrontend/src/Components/Categories/CategoryList.js create mode 100644 bfrontend/src/Components/Categories/CategoryListLoader.js create mode 100644 bfrontend/src/Components/Categories/CategoryProfile.js create mode 100644 bfrontend/src/Components/Categories/CategoryView.js create mode 100644 bfrontend/src/Components/Categories/CategoryViewLoader.js create mode 100644 bfrontend/src/Components/UI/Sidebar.js create mode 100644 bfrontend/src/Images/defaultprofile_256px-256px.png diff --git a/bfrontend/package-lock.json b/bfrontend/package-lock.json index d9edd22..af36251 100644 --- a/bfrontend/package-lock.json +++ b/bfrontend/package-lock.json @@ -12201,6 +12201,11 @@ "whatwg-fetch": "^3.4.1" } }, + "react-content-loader": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-5.1.4.tgz", + "integrity": "sha512-hTq7pZi2GKCK6a9d3u6XStozm0QGCEjw8cSqQReiWnh2up6IwCha5R5TF0o6SY5qUDpByloEZEZtnFxpJyENFw==" + }, "react-dev-utils": { "version": "11.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz", @@ -12314,6 +12319,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-media-hook": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/react-media-hook/-/react-media-hook-0.4.9.tgz", + "integrity": "sha512-FZr/2xA1+23vDJ1IZ794yLqMRRkBoCNOiJATdtTfB5GyVc5djf8FL2qEB/68pSkiNgHdHsmKknMSDr0sC4zBKQ==" + }, "react-redux": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz", diff --git a/bfrontend/package.json b/bfrontend/package.json index 469e59d..3e858d1 100644 --- a/bfrontend/package.json +++ b/bfrontend/package.json @@ -8,7 +8,9 @@ "@testing-library/user-event": "^12.6.0", "nord": "^0.2.1", "react": "^17.0.1", + "react-content-loader": "^5.1.4", "react-dom": "^17.0.1", + "react-media-hook": "^0.4.9", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", @@ -22,7 +24,7 @@ "test": "react-scripts test", "eject": "react-scripts eject" }, - "proxy": "http://localhost:3002", + "proxy": "http://localhost:3005", "eslintConfig": { "extends": [ "react-app", diff --git a/bfrontend/src/Components/App.js b/bfrontend/src/Components/App.js index c9fd0db..fdc1989 100644 --- a/bfrontend/src/Components/App.js +++ b/bfrontend/src/Components/App.js @@ -3,6 +3,9 @@ import Root from './Root'; import Authenticator from './../Authenticator'; import Notification from './Notification'; import './../Styles/App.scss'; +import { couldNotReach } from '../Errors'; +import CategoryView from './Categories/CategoryView'; +import Sidebar from './UI/Sidebar'; import { useEffect, useState } from 'react'; import { useDispatch, connect } from 'react-redux' @@ -20,7 +23,7 @@ function App({ user }) { dispatch({ type: 'authenticator/updatelocaluserobject', user: res }) }) .catch(() => { - setNotificationText('An error has occoured.'); + setNotificationText(couldNotReach); setHasError(true); }); }, [dispatch]); @@ -28,16 +31,22 @@ function App({ user }) { if (!hasError) { return (
- - - - - - - - - - +
+ + + + + + + + + + + + + + +
); } else { @@ -51,7 +60,7 @@ function App({ user }) { const stateToProps = (state) => { return { - user: state?.user + user: state?.user, }; }; diff --git a/bfrontend/src/Components/Categories/CategoryButton.js b/bfrontend/src/Components/Categories/CategoryButton.js new file mode 100644 index 0000000..ba4adbc --- /dev/null +++ b/bfrontend/src/Components/Categories/CategoryButton.js @@ -0,0 +1,11 @@ +import { useHistory } from 'react-router-dom'; + +export default function CategoryButton({ category }) { + const history = useHistory(); + + return ( + + ) +} \ No newline at end of file diff --git a/bfrontend/src/Components/Categories/CategoryList.js b/bfrontend/src/Components/Categories/CategoryList.js new file mode 100644 index 0000000..2ca7ea2 --- /dev/null +++ b/bfrontend/src/Components/Categories/CategoryList.js @@ -0,0 +1,53 @@ +import CategoryListLoader from './CategoryListLoader'; +import CategoryButton from './CategoryButton'; +import APIRequest from '../../APIRequest'; +import { couldNotReach } from '../../Errors'; + +import { useDispatch } from 'react-redux' +import { useState, useEffect } from 'react'; + +export default function CategoryList() { + const [ categoryList, setCategoryList ] = useState(); + const [ error, setError ] = useState(); + + const dispatch = useDispatch(); + + useEffect(() => { + APIRequest.authenticated('/api/v1/content/category/list?count=50') + .then(({ isOK, json }) => { + if (!isOK) return setError(true); + setCategoryList(json.categories || []); + + dispatch({ type: 'categories/updatecategorylist', categories: json.categories }); + }) + .catch(() => { + setError(true); + }); + }, [dispatch]); + + if (!categoryList) { + if (error) { + return ( +
+

+ { couldNotReach } +

+
+ ); + } else { + return ( +
+ +
+ ); + } + } else { + return ( +
+ {categoryList.map((category) => + + )} +
+ ); + } +} \ No newline at end of file diff --git a/bfrontend/src/Components/Categories/CategoryListLoader.js b/bfrontend/src/Components/Categories/CategoryListLoader.js new file mode 100644 index 0000000..50ce706 --- /dev/null +++ b/bfrontend/src/Components/Categories/CategoryListLoader.js @@ -0,0 +1,44 @@ +import ContentLoader from "react-content-loader" +import { useMediaPredicate } from "react-media-hook"; + +export default function CategoryListLoader(props) { + const lessThan600 = useMediaPredicate("(max-width: 600px)"); + + if (lessThan600) { + return ( + + + + + + + + ); + } else { + return ( + + + + + + + + ); + } +} \ No newline at end of file diff --git a/bfrontend/src/Components/Categories/CategoryProfile.js b/bfrontend/src/Components/Categories/CategoryProfile.js new file mode 100644 index 0000000..e69de29 diff --git a/bfrontend/src/Components/Categories/CategoryView.js b/bfrontend/src/Components/Categories/CategoryView.js new file mode 100644 index 0000000..6be9092 --- /dev/null +++ b/bfrontend/src/Components/Categories/CategoryView.js @@ -0,0 +1,55 @@ +import CategoryViewLoader from './CategoryViewLoader'; + +import { useParams } from 'react-router-dom'; +import { connect } from 'react-redux' + +function CategoryView({ categories }) { + const { id } = useParams(); + + let category; + + if (categories) { + category = categories.find(x => x._id === id); + } + + if (category) { + return ( +
+
+ { category.title } +
+
+ In terms of development, the first year of a cat’s life is equal to the first 15 years of a human life. After its second year, a cat is 25 in human years. And after that, each year of a cat’s life is equal to about 7 human years. + Cats can rotate their ears 180 degrees. +
+
+ The hearing of the average cat is at least five times keener than that of a human adult. + In the largest cat breed, the average male weighs approximately 20 pounds. +
+
+ ) + } else { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ) + } + +} + +const stateToProps = (state) => { + return { + categories: state?.categories + }; +}; + +export default connect(stateToProps)(CategoryView); \ No newline at end of file diff --git a/bfrontend/src/Components/Categories/CategoryViewLoader.js b/bfrontend/src/Components/Categories/CategoryViewLoader.js new file mode 100644 index 0000000..ed113af --- /dev/null +++ b/bfrontend/src/Components/Categories/CategoryViewLoader.js @@ -0,0 +1,17 @@ +import ContentLoader from "react-content-loader" + +export default function CategoryViewLoader(props) { + return ( + + + + ) +} \ No newline at end of file diff --git a/bfrontend/src/Components/Root.js b/bfrontend/src/Components/Root.js index 4de4e52..19e0415 100644 --- a/bfrontend/src/Components/Root.js +++ b/bfrontend/src/Components/Root.js @@ -1,22 +1,16 @@ import { useHistory } from 'react-router-dom'; +import Sidebar from './UI/Sidebar'; export default function Root(props) { const history = useHistory(); if (props.user) { return ( -
-
- hhhhhhhhhhhhhhhhhhhhhh -
-
- sdfsdfsdf -
-
+ ); } else { return ( -
+

Welcome, - nevermind, you aren't logged in

diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js new file mode 100644 index 0000000..8e1f1c1 --- /dev/null +++ b/bfrontend/src/Components/UI/Sidebar.js @@ -0,0 +1,9 @@ +import CategoryList from '../Categories/CategoryList'; + +export default function Sidebar() { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/bfrontend/src/Errors.js b/bfrontend/src/Errors.js index c6c81a2..d5b0c4f 100644 --- a/bfrontend/src/Errors.js +++ b/bfrontend/src/Errors.js @@ -110,4 +110,6 @@ const getCreateCategoryError = (json) => { } }; -module.exports = { getLoginMessageFromError, getSignupMessageFromError, getCreatePostError, getCreateCategoryError } \ No newline at end of file +const couldNotReach = "Whoops! We couldn't reach Brainlet." + +module.exports = { couldNotReach, getLoginMessageFromError, getSignupMessageFromError, getCreatePostError, getCreateCategoryError } \ No newline at end of file diff --git a/bfrontend/src/Images/defaultprofile_256px-256px.png b/bfrontend/src/Images/defaultprofile_256px-256px.png new file mode 100644 index 0000000000000000000000000000000000000000..0ace865910a9f928c5ac52945e6c440c12ae05dd GIT binary patch literal 645 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911L)MWvCLm?NMQuIx`4Sp`%WrL?+(fkKict`Q~9`MJ5Nc_j?aMX8A;sVNHOnI#zt?w-B@;f;La zK$HJ_x;TbZ+d_wI2!Ei4vLLFks4Yq { } } + case 'categories/updatecategorylist': { + return { + ...state, + categories: payload.categories + } + } + default: { return state; }