Bookmarks view with grid + redux actions

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css

@@ -0,0 +1,27 @@
+.BookmarkCard {
+  /* margin-top: 10px; */
+  margin-bottom: 30px;
+}
+
+.BookmarkCard h3 {
+  color: var(--color-accent);
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.Bookmarks {
+  display: flex;
+  flex-direction: column;
+}
+
+.Bookmarks a {
+  line-height: 2;
+  transition: all 0.25s;
+}
+
+.BookmarkCard a:hover {
+  text-decoration: underline;
+  padding-left: 10px;
+}

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -0,0 +1,26 @@
+import { Bookmark, Category } from '../../../interfaces';
+import classes from './BookmarkCard.module.css';
+
+interface ComponentProps {
+  category: Category;
+}
+
+const BookmarkCard = (props: ComponentProps): JSX.Element => {
+  return (
+    <div className={classes.BookmarkCard}>
+      <h3>{props.category.name}</h3>
+      <div className={classes.Bookmarks}>
+        {props.category.bookmarks.map((bookmark: Bookmark) => (
+          <a
+            href={`http://${bookmark.url}`}
+            target='blank'
+            key={bookmark.id}>
+            {bookmark.name}
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default BookmarkCard;

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css

@@ -0,0 +1,22 @@
+.BookmarkGrid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media (min-width: 430px) {
+  .BookmarkGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 670px) {
+  .BookmarkGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .BookmarkGrid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx

@@ -0,0 +1,20 @@
+import classes from './BookmarkGrid.module.css';
+
+import { Bookmark, Category } from '../../../interfaces';
+
+import BookmarkCard from '../BookmarkCard/BookmarkCard';
+
+interface ComponentProps {
+  categories: Category[];
+}
+
+const BookmarkGrid = (props: ComponentProps): JSX.Element => {
+  return (
+    <div className={classes.BookmarkGrid}>
+      {props.categories.map((category: Category): JSX.Element => <BookmarkCard category={category} key={category.id} />)}
+    </div>
+  )
+  
+}
+
+export default BookmarkGrid;

client/src/components/Bookmarks/Bookmarks.module.css

@@ -0,0 +1,4 @@
+.ActionsContainer {
+  display: flex;
+  align-items: center;
+}

client/src/components/Bookmarks/Bookmarks.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { getCategories } from '../../store/actions';
+
+import classes from './Bookmarks.module.css';
+
+import { Container } from '../UI/Layout/Layout';
+import Headline from '../UI/Headlines/Headline/Headline';
+import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
+
+import BookmarkGrid from './BookmarkGrid/BookmarkGrid';
+import { Category, GlobalState } from '../../interfaces';
+import Spinner from '../UI/Spinner/Spinner';
+
+interface ComponentProps {
+  loading: boolean;
+  categories: Category[];
+  getCategories: () => void;
+}
+
+const Bookmarks = (props: ComponentProps): JSX.Element => {
+  useEffect(() => {
+    if (props.categories.length === 0) {
+      props.getCategories();
+    }
+  }, [props.getCategories])
+
+  return (
+    <Container>
+      <Headline
+        title='All Bookmarks'
+        subtitle={(<Link to='/'>Go back</Link>)}
+      />
+      
+      <div className={classes.ActionsContainer}>
+        <ActionButton
+          name='Add'
+          icon='mdiPlusBox'
+        />
+        <ActionButton
+          name='Edit'
+          icon='mdiPencil'
+        />
+      </div>
+
+      {props.loading
+        ? <Spinner />
+        : <BookmarkGrid categories={props.categories} />
+      }
+    </Container>
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    loading: state.bookmark.loading,
+    categories: state.bookmark.categories
+  }
+}
+
+export default connect(mapStateToProps, { getCategories })(Bookmarks);

client/src/components/Home/Home.tsx

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
+import _ from 'underscore';
 import { Link } from 'react-router-dom';
-import { connect } from 'react-redux';
+import { connect, useSelector, useDispatch } from 'react-redux';
 import { GlobalState } from '../../interfaces/GlobalState';
-import { getApps } from '../../store/actions';
+import { getApps, getCategories } from '../../store/actions';
 
 import Icon from '../UI/Icons/Icon/Icon';
 
@@ -10,21 +11,33 @@ import classes from './Home.module.css';
 import { Container } from '../UI/Layout/Layout';
 import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
 import AppGrid from '../Apps/AppGrid/AppGrid';
-import { App } from '../../interfaces';
+import { App, Category } from '../../interfaces';
 import Spinner from '../UI/Spinner/Spinner';
 import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
+import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
 
 interface ComponentProps {
   getApps: Function;
-  loading: boolean;
+  getCategories: Function;
+  appsLoading: boolean;
   apps: App[];
+  categoriesLoading: boolean;
+  categories: Category[];
 }
 
 const Home = (props: ComponentProps): JSX.Element => {
   useEffect(() => {
-    props.getApps();
+    if (props.apps.length === 0) {
+      props.getApps();
+    }
   }, [props.getApps]);
 
+  useEffect(() => {
+    if (props.categories.length === 0) {
+      props.getCategories();
+    }
+  }, [props.getCategories]);
+
   const dateAndTime = (): string => {
     const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
     const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@@ -68,15 +81,19 @@ const Home = (props: ComponentProps): JSX.Element => {
       </header>
       
       <SectionHeadline title='Applications' link='/applications' />
-      {props.loading
+      {props.appsLoading
         ? <Spinner />
         : <AppGrid apps={props.apps.filter((app: App) => app.isPinned)} />
       }
 
       <SectionHeadline title='Bookmarks' link='/bookmarks' />
+      {props.categoriesLoading
+        ? <Spinner />
+        : <BookmarkGrid categories={props.categories.filter((category: Category) => category.isPinned)} />
+      }
 
       <Link to='/settings' className={classes.SettingsButton}>
-        <Icon icon='mdiCog' />
+        <Icon icon='mdiCog' color='var(--color-background)' />
       </Link>
     </Container>
   )
@@ -84,9 +101,11 @@ const Home = (props: ComponentProps): JSX.Element => {
 
 const mapStateToProps = (state: GlobalState) => {
   return {
-    loading: state.app.loading,
-    apps: state.app.apps
+    appsLoading: state.app.loading,
+    apps: state.app.apps,
+    categoriesLoading: state.bookmark.loading,
+    categories: state.bookmark.categories
   }
 }
 
-export default connect(mapStateToProps, { getApps })(Home);
+export default connect(mapStateToProps, { getApps, getCategories })(Home);