barunespadhy/rangolio
barunespadhy/rangolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more frontend polishing changes

Browse Source
This commit is contained in:
Barunes Padhy 2024-04-29 09:14:17 +03:00
parent c7b202c90a
commit 6929af238e
15 changed files with 94 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"
}
]

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

@ -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"
}]
}

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

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

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

@ -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": [{
}]
}

8
frontend/src/App.css
View File

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

30
frontend/src/App.jsx
View File

@ -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>

21
frontend/src/components/views/blog-list.jsx → frontend/src/components/blog-list.jsx
View File

@ -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}

18
frontend/src/components/views/blog.jsx → frontend/src/components/blog.jsx
View File

@ -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}

2
frontend/src/components/views/category-list.jsx → frontend/src/components/category-list.jsx
View File

@ -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';

2
frontend/src/components/views/home.jsx → frontend/src/components/home.jsx
View File

@ -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>

2
frontend/src/components/views/shared/card-list-viewer.jsx → frontend/src/components/shared/card-list-viewer.jsx
View File

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

2
frontend/src/components/views/shared/category-bar.jsx → frontend/src/components/shared/category-bar.jsx
View File

@ -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';

0
frontend/src/components/views/shared/footer.jsx → frontend/src/components/shared/footer.jsx
View File

2
frontend/src/components/views/shared/navbar.jsx → frontend/src/components/shared/navbar.jsx
View File

@ -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';

18
frontend/src/components/shared/notification.jsx Normal file
View File

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