more frontend polishing changes

frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/blog-metadata.json

@@ -1,18 +0,0 @@
-[
-    {
-        "id": "72e4d550-a19b-4b62-bf5a-13f98813d31a",
-        "name": "Blog 1",
-        "description": "A subtitle for Blog 1",
-        "coverImage": "blogs/72e4d550-a19b-4b62-bf5a-13f98813d31a/media/blog1.png",
-        "tagLine": "Read more",
-        "parentCategory": "520b7982-069e-4a48-9ef3-64507d86a579"
-    },
-    {
-        "id": "b4d9e1a0-4a77-48eb-a04b-06ec23e2b73e",
-        "name": "Blog 2",
-        "description": "A subtitle for Blog 2",
-        "coverImage": "blogs/b4d9e1a0-4a77-48eb-a04b-06ec23e2b73e/media/blog2.png",
-        "tagLine": "Read more",
-        "parentCategory": "520b7982-069e-4a48-9ef3-64507d86a579"
-    }
-]

frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/category-data.json

@@ -4,5 +4,21 @@
     "coverImage": "category/520b7982-069e-4a48-9ef3-64507d86a579/media/technology.png",
     "tagLine": "Read articles about tech",
     "description": "I have been working in tech for long, and here are my thoughts of random stuff",
-    "featuredBlog": "b4d9e1a0-4a77-48eb-a04b-06ec23e2b73e"
+    "featuredBlog": "b4d9e1a0-4a77-48eb-a04b-06ec23e2b73e",
+    "blogMetadata": [{
+        "id": "72e4d550-a19b-4b62-bf5a-13f98813d31a",
+        "name": "Blog 1",
+        "description": "A subtitle for Blog 1",
+        "coverImage": "blogs/72e4d550-a19b-4b62-bf5a-13f98813d31a/media/blog1.png",
+        "tagLine": "Read more",
+        "parentCategory": "520b7982-069e-4a48-9ef3-64507d86a579"
+        },
+        {
+        "id": "b4d9e1a0-4a77-48eb-a04b-06ec23e2b73e",
+        "name": "Blog 2",
+        "description": "A subtitle for Blog 2",
+        "coverImage": "blogs/b4d9e1a0-4a77-48eb-a04b-06ec23e2b73e/media/blog2.png",
+        "tagLine": "Read more",
+        "parentCategory": "520b7982-069e-4a48-9ef3-64507d86a579"    
+    }]
 }

frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/blog-metadata.json

@@ -1,3 +0,0 @@
-[{
-	
-}]

frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/category-data.json

@@ -3,5 +3,7 @@
     "name": "Gaming",
     "coverImage": "category/b9e0d686-351d-49af-8e3d-b62023f44dbe/media/game.png",
     "tagLine": "Read articles about games",
-    "description": "I like to game, and here are my thoughts on games"
+    "description": "I like to game, and here are my thoughts on games",
+    "blogMetadata": [{
+    }]
 }

frontend/src/App.css

@@ -0,0 +1,8 @@
+a{
+	padding: 1em;
+}
+
+.blogContent{
+	margin-left:25% !important;
+	margin-right:25% !important;
+}

frontend/src/App.jsx

@@ -4,15 +4,16 @@ import {useEffect, useState} from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 //Import Views
-import Home from './components/views/home';
+import Home from './components/home';
-import CategoryList from './components/views/category-list';
+import CategoryList from './components/category-list';
-import BlogList from './components/views/blog-list';
+import BlogList from './components/blog-list';
-import Blog from './components/views/blog';
+import Blog from './components/blog';
 
 
 //Import Shared Views
-import Header from './components/views/shared/navbar';
+import Header from './components/shared/navbar';
-import Footer from './components/views/shared/footer';
+import Footer from './components/shared/footer';
+import Notification from './components/shared/notification';
 
 //Import Services
 import DataService from './services/data-service'
@@ -21,6 +22,16 @@ function App() {
   const [userData, setUserData] = useState(null);
   const [themeConfig, setThemeConfig] = useState(null);
   const [globalTheme, setGlobalTheme] = useState("lightTheme");
+  const [isOpen, setIsOpen] = useState(false);
+  const [notificationMessage, setNotificationMessage] = useState("")
+
+  const notificationToggler = (message) => {
+    setIsOpen(true)
+    setNotificationMessage(message)
+    setTimeout(() => {
+      setIsOpen(false)
+    }, 3500)
+  }
 
   useEffect(() => {
     DataService.getData('shared/user-data').then( response =>
@@ -39,11 +50,12 @@ function App() {
     <div>
       <Router>
         <Header ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
+        <Notification isOpen={isOpen} notificationMessage={notificationMessage} />
         <Routes>
           <Route path="/" element={<Home GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />} />
-          <Route path="/categories" element={<CategoryList GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+          <Route path="/categories" element={<CategoryList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-          <Route path="/categories/:categoryID" element={<BlogList GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+          <Route path="/categories/:categoryID" element={<BlogList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-          <Route path="/blog/:blogID" element={<Blog GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+          <Route path="/blog/:blogID" element={<Blog notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
         </Routes>
         <Footer ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
       </Router>

frontend/src/components/blog-list.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { useEffect, useState } from 'react';
-import DataService from '../../services/data-service';
+import DataService from '../services/data-service';
-import MediaService from '../../services/media-service';
+import MediaService from '../services/media-service';
 import CardListViewer from './shared/card-list-viewer';
 import CategoryBar from './shared/category-bar';
 import {
@@ -25,16 +25,11 @@ function BlogList(props) {
   const GlobalTheme = props.GlobalTheme;
   const ThemeConfig = props.ThemeConfig;
 
-  const [blogMetadata, setBlogMetadata] = useState('loading');
   const [categoryData, setCategoryData] = useState('loading');
   const [featuredBlogData, setFeaturedBlogData] = useState('loading');
   const [currentPage, setCurrentPage] = useState('loading');
   
   useEffect(() => {
-    DataService.getData(`category/${categoryID}/blog-metadata`).then(response =>{
-          setBlogMetadata(response.data)
-      }
-    );
     DataService.getData(`category/${categoryID}/category-data`).then(response =>{
       setCategoryData(response.data);
       if (response.data.featuredBlog){
@@ -80,11 +75,11 @@ function BlogList(props) {
               />
             }
             {
-              blogMetadata === 'loading' ? <Spinner /> :
+              categoryData === 'loading' ? <Spinner /> :
-              blogMetadata.map((item, index) => (
+              categoryData.blogMetadata.map((item, index) => (
                 <CardListViewer
                   key={item.id}
-                  totalItems={blogMetadata.length} 
+                  totalItems={categoryData.blogMetadata.length} 
                   cardType={"smallCard"} 
                   resourceType={"blog"}
                   textColor={ThemeConfig[GlobalTheme].textColor} 

frontend/src/components/blog.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import DataService from '../../services/data-service';
+import DataService from '../services/data-service';
-import MediaService from '../../services/media-service'
+import MediaService from '../services/media-service'
 import CategoryBar from './shared/category-bar';
 import {
   Container,Row, Col,Spinner, UncontrolledCollapse, Button, ButtonGroup, Card, CardBody
@@ -35,7 +35,7 @@ function Blog(props) {
           />
         </Col>
       </Row>
-      <Row className="mr-2 ml-2 mb-2 mt-1">
+      <Row className="mr-2 ml-2 mb-2 mt-1 blogContent">
         <Col>
           <h1 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.name}</h1>
           <h4 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.description}</h4>
@@ -55,6 +55,16 @@ function Blog(props) {
                   <ButtonGroup
                     className="my-2"
                   >
+                  <Button outline>
+                    <Link to="#" onClick={(e) => {
+                      e.preventDefault();
+                      navigator.clipboard.writeText(window.location.href)
+                      props.notificationToggler("Link copied")
+                      return false;
+                    }}>
+                      Copy Link
+                      </Link>
+                    </Button>
                     <Button outline>
                     <Link to="#" onClick={(e) => {
                       e.preventDefault();
@@ -96,7 +106,7 @@ function Blog(props) {
         </Col>
       </Row>
 
-      <Row className="mr-5 ml-5 mt-1">
+      <Row className="mr-5 ml-5 mt-1 blogContent">
         <Col>
           <p style={{marginLeft: '50px', marginRight: '50px'}} className={`${ThemeConfig[GlobalTheme].textColor}`}>
             {blogData.contentBody}

frontend/src/components/category-list.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 //import services
-import DataService from '../../services/data-service';
+import DataService from '../services/data-service';
 
 //import views
 import CardListViewer from './shared/card-list-viewer';

frontend/src/components/home.jsx

@@ -1,5 +1,5 @@
 import { Container, Spinner } from 'reactstrap';
-import MediaService from '../../services/media-service'
+import MediaService from '../services/media-service'
 
 function HomePage(props) {
   const UserData = props.UserData ? props.UserData : <Spinner> Loading... </Spinner>

frontend/src/components/shared/card-list-viewer.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import MediaService from '../../../services/media-service'
+import MediaService from '../../services/media-service'
 import {
   Spinner,
   Card,

frontend/src/components/shared/category-bar.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import DataService from '../../../services/data-service';
+import DataService from '../../services/data-service';
 import { Link } from 'react-router-dom';
 import { Container, Row, Col, Button, Spinner, ListGroup, ListGroupItem, ButtonGroup } from 'reactstrap';
 

frontend/src/components/shared/navbar.jsx

@@ -13,7 +13,7 @@ import {
   Button, ButtonGroup, Label, Input
 } from 'reactstrap';
 import { useState, useEffect } from 'react';
-import MediaService from '../../../services/media-service'
+import MediaService from '../../services/media-service'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSun, faMoon, faPen } from '@fortawesome/free-solid-svg-icons';
 import { Link } from 'react-router-dom';

frontend/src/components/shared/notification.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { Collapse, Button, CardBody, Card, Alert } from 'reactstrap';
+
+function Notification(props) {
+  return (
+    <React.StrictMode>
+      <Collapse isOpen={props.isOpen} {...props}>
+        <Card>
+          <CardBody>
+            <Alert>{props.notificationMessage}</Alert>
+          </CardBody>
+        </Card>
+      </Collapse>
+    </React.StrictMode>
+  );
+}
+
+export default Notification;