);
} 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 (
+