From 6929af238efc5bfcd761906e674f75f66af5eb01 Mon Sep 17 00:00:00 2001
From: Barunes Padhy <contact@barunes.io>
Date: Mon, 29 Apr 2024 09:14:17 +0300
Subject: [PATCH] more frontend polishing changes

---
 .../blog-metadata.json                        | 18 -----------
 .../category-data.json                        | 18 ++++++++++-
 .../blog-metadata.json                        |  3 --
 .../category-data.json                        |  4 ++-
 frontend/src/App.css                          |  8 +++++
 frontend/src/App.jsx                          | 30 +++++++++++++------
 .../src/components/{views => }/blog-list.jsx  | 21 +++++--------
 frontend/src/components/{views => }/blog.jsx  | 18 ++++++++---
 .../components/{views => }/category-list.jsx  |  2 +-
 frontend/src/components/{views => }/home.jsx  |  2 +-
 .../{views => }/shared/card-list-viewer.jsx   |  2 +-
 .../{views => }/shared/category-bar.jsx       |  2 +-
 .../components/{views => }/shared/footer.jsx  |  0
 .../components/{views => }/shared/navbar.jsx  |  2 +-
 .../src/components/shared/notification.jsx    | 18 +++++++++++
 15 files changed, 94 insertions(+), 54 deletions(-)
 delete mode 100644 frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/blog-metadata.json
 delete mode 100644 frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/blog-metadata.json
 rename frontend/src/components/{views => }/blog-list.jsx (82%)
 rename frontend/src/components/{views => }/blog.jsx (86%)
 rename frontend/src/components/{views => }/category-list.jsx (94%)
 rename frontend/src/components/{views => }/home.jsx (90%)
 rename frontend/src/components/{views => }/shared/card-list-viewer.jsx (93%)
 rename frontend/src/components/{views => }/shared/category-bar.jsx (94%)
 rename frontend/src/components/{views => }/shared/footer.jsx (100%)
 rename frontend/src/components/{views => }/shared/navbar.jsx (95%)
 create mode 100644 frontend/src/components/shared/notification.jsx

diff --git a/frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/blog-metadata.json b/frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/blog-metadata.json
deleted file mode 100644
index f3f1037..0000000
--- a/frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/blog-metadata.json
+++ /dev/null
@@ -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"
-    }
-]
\ No newline at end of file
diff --git a/frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/category-data.json b/frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/category-data.json
index 476aad9..9fce824 100644
--- a/frontend/public/data/category/520b7982-069e-4a48-9ef3-64507d86a579/category-data.json
+++ b/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"    
+    }]
 }
\ No newline at end of file
diff --git a/frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/blog-metadata.json b/frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/blog-metadata.json
deleted file mode 100644
index 367e8fa..0000000
--- a/frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/blog-metadata.json
+++ /dev/null
@@ -1,3 +0,0 @@
-[{
-	
-}]
\ No newline at end of file
diff --git a/frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/category-data.json b/frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/category-data.json
index 8f1143e..848ba83 100644
--- a/frontend/public/data/category/b9e0d686-351d-49af-8e3d-b62023f44dbe/category-data.json
+++ b/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": [{
+    }]
 }
diff --git a/frontend/src/App.css b/frontend/src/App.css
index e69de29..de837b8 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,8 @@
+a{
+	padding: 1em;
+}
+
+.blogContent{
+	margin-left:25% !important;
+	margin-right:25% !important;
+}
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0bf03c3..16a2e1f 100644
--- a/frontend/src/App.jsx
+++ b/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 CategoryList from './components/views/category-list';
-import BlogList from './components/views/blog-list';
-import Blog from './components/views/blog';
+import Home from './components/home';
+import CategoryList from './components/category-list';
+import BlogList from './components/blog-list';
+import Blog from './components/blog';
 
 
 //Import Shared Views
-import Header from './components/views/shared/navbar';
-import Footer from './components/views/shared/footer';
+import Header from './components/shared/navbar';
+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/:categoryID" element={<BlogList GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-          <Route path="/blog/:blogID" element={<Blog GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+          <Route path="/categories" element={<CategoryList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+          <Route path="/categories/:categoryID" element={<BlogList notificationToggler={notificationToggler} 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>
diff --git a/frontend/src/components/views/blog-list.jsx b/frontend/src/components/blog-list.jsx
similarity index 82%
rename from frontend/src/components/views/blog-list.jsx
rename to frontend/src/components/blog-list.jsx
index 1adad04..130f499 100644
--- a/frontend/src/components/views/blog-list.jsx
+++ b/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 MediaService from '../../services/media-service';
+import DataService from '../services/data-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){
@@ -72,19 +67,19 @@ function BlogList(props) {
               <CardListViewer
                 key={featuredBlogData.id}
                 totalItems={featuredBlogData === 'nodata' ? 0 : 1}
-                cardType={"longCard"} 
+                cardType={"longCard"}
                 resourceType={"blog"}
-                textColor={ThemeConfig[GlobalTheme].textColor} 
-                bgColor={ThemeConfig[GlobalTheme].background} 
+                textColor={ThemeConfig[GlobalTheme].textColor}
+                bgColor={ThemeConfig[GlobalTheme].background}
                 itemObject={featuredBlogData}
               />
             }
             {
-              blogMetadata === 'loading' ? <Spinner /> :
-              blogMetadata.map((item, index) => (
+              categoryData === 'loading' ? <Spinner /> :
+              categoryData.blogMetadata.map((item, index) => (
                 <CardListViewer
                   key={item.id}
-                  totalItems={blogMetadata.length} 
+                  totalItems={categoryData.blogMetadata.length} 
                   cardType={"smallCard"} 
                   resourceType={"blog"}
                   textColor={ThemeConfig[GlobalTheme].textColor} 
diff --git a/frontend/src/components/views/blog.jsx b/frontend/src/components/blog.jsx
similarity index 86%
rename from frontend/src/components/views/blog.jsx
rename to frontend/src/components/blog.jsx
index 49ba3ec..233a121 100644
--- a/frontend/src/components/views/blog.jsx
+++ b/frontend/src/components/blog.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import DataService from '../../services/data-service';
-import MediaService from '../../services/media-service'
+import DataService from '../services/data-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}
diff --git a/frontend/src/components/views/category-list.jsx b/frontend/src/components/category-list.jsx
similarity index 94%
rename from frontend/src/components/views/category-list.jsx
rename to frontend/src/components/category-list.jsx
index aa20f42..ff138e9 100644
--- a/frontend/src/components/views/category-list.jsx
+++ b/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';
diff --git a/frontend/src/components/views/home.jsx b/frontend/src/components/home.jsx
similarity index 90%
rename from frontend/src/components/views/home.jsx
rename to frontend/src/components/home.jsx
index 7d54f28..2579be4 100644
--- a/frontend/src/components/views/home.jsx
+++ b/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>
diff --git a/frontend/src/components/views/shared/card-list-viewer.jsx b/frontend/src/components/shared/card-list-viewer.jsx
similarity index 93%
rename from frontend/src/components/views/shared/card-list-viewer.jsx
rename to frontend/src/components/shared/card-list-viewer.jsx
index 226d550..e469c35 100644
--- a/frontend/src/components/views/shared/card-list-viewer.jsx
+++ b/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,
diff --git a/frontend/src/components/views/shared/category-bar.jsx b/frontend/src/components/shared/category-bar.jsx
similarity index 94%
rename from frontend/src/components/views/shared/category-bar.jsx
rename to frontend/src/components/shared/category-bar.jsx
index 8c5954c..88232f0 100644
--- a/frontend/src/components/views/shared/category-bar.jsx
+++ b/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';
 
diff --git a/frontend/src/components/views/shared/footer.jsx b/frontend/src/components/shared/footer.jsx
similarity index 100%
rename from frontend/src/components/views/shared/footer.jsx
rename to frontend/src/components/shared/footer.jsx
diff --git a/frontend/src/components/views/shared/navbar.jsx b/frontend/src/components/shared/navbar.jsx
similarity index 95%
rename from frontend/src/components/views/shared/navbar.jsx
rename to frontend/src/components/shared/navbar.jsx
index 11ebc19..ceefe17 100644
--- a/frontend/src/components/views/shared/navbar.jsx
+++ b/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';
diff --git a/frontend/src/components/shared/notification.jsx b/frontend/src/components/shared/notification.jsx
new file mode 100644
index 0000000..d03f9c4
--- /dev/null
+++ b/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;
\ No newline at end of file