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);