Establish a way to set profile photo and cover image for blogs, remove cover image for categories

frontend/src/components/editable/blog-list.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { useEffect, useState } from 'react';
 import EditableDataService from '../../services/editable-data-service';
-import MediaService from '../../services/media-service';
 import CardListViewer from './shared/card-list-viewer';
 import CategoryBar from './shared/category-bar';
 import {
@@ -20,6 +19,7 @@ import {
 import { useNavigate, useParams } from 'react-router-dom';
 import { faLeftLong } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import EditableMediaService from "../../services/editable-media-service.jsx";
 
 function BlogList(props) {
 

frontend/src/components/editable/blog.jsx

@@ -1,10 +1,11 @@
 import { useEffect, useState, useRef } from 'react';
 
 import EditableDataService from '../../services/editable-data-service';
-import MediaService from '../../services/media-service'
+import EditableMediaService from '../../services/editable-media-service'
 import CategoryBar from './shared/category-bar';
 import EditorComponent from './shared/tiptap';
 import ModalComponent from './shared/modal-component';
+import MediaUpload from './shared/media-upload'
 
 import { faLeftLong } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -29,18 +30,22 @@ function Blog(props) {
 
   const [blogData, setBlogData] = useState([]);
   const [blogContent, setBlogContent] = useState();
+  const [coverImage, setCoverImage] = useState(false)
   const [modal, setModal] = useState(false);
   const [modalText, setModalText] = useState(false);
   const [modalTitle, setModalTitle] = useState(false);
+  const [fileModal, setFileModal] = useState(false);
 
   const toggle = () => setModal(!modal);
+  const toggleFileModal = () => setFileModal(!fileModal);
 
   const setInfo = (event) => {
     EditableDataService.updateData(`/data/blog/update/${blogID}/`,{
       "name": nameField.current.value,
       "description": descriptionField.current.value,
       "tagline": tagLineField.current.value,
-      "content_body": blogContent
+      "content_body": blogContent,
+      "cover_image": coverImage ? coverImage !== '-' ? coverImage : '' : blogData.coverImage
     }).then(response => {
       props.notificationToggler('Blog data saved!');
       getInfo()
@@ -85,10 +90,18 @@ function Blog(props) {
       getInfo()
   }, []);
 
+  useEffect(() => {
+    if (coverImage){
+      setInfo()
+      if (coverImage !== '-') toggleFileModal()
+    }
+  }, [coverImage])
+
   if (GlobalTheme && ThemeConfig && blogData) {
   return (
     <Container fluid className={`${ThemeConfig[GlobalTheme].background}`}>
       <ModalComponent modalText={modalText} modalTitle={modalTitle} modal={modal} toggle={toggle} confirmAction={deleteResource}/>
+      <MediaUpload setMedia={setCoverImage} notificationToggler={props.notificationToggler} modal={fileModal} toggle={toggleFileModal} resourceType='homepage' resourceId='homepage'></MediaUpload>
       <Col xs="3" className="d-none d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories/${blogData.parentCategory}`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col>
       <CategoryBar currentPage={blogData.parentCategory} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
       <Row className="mb-4">
@@ -96,7 +109,7 @@ function Blog(props) {
           {
             blogData.coverImage !== "" ?
             <img
-              src={MediaService.getMedia(blogData.coverImage)}
+              src={EditableMediaService.getMedia(blogData.coverImage)}
               alt="Banner"
               style={{ width: '100%', height: 'auto', maxHeight: '20vh', objectFit: 'cover' }}
             />:""
@@ -105,8 +118,25 @@ function Blog(props) {
       </Row>
       <Row className="mr-2 ml-2 mb-2 mt-1 blogContent">
         <Col xs="3" className="d-none d-md-block"></Col>
+
         <Col xs={`${window.screen.width >= 765 ? '6':''}`}>
           <Button color='danger' onClick={() => showModal()} className="mb-5">Delete Blog</Button>
+          <ButtonGroup className="mb-5 ms-5">
+            <Button
+              outline
+              color={ThemeConfig[GlobalTheme].buttonColor}
+              onClick={() => toggleFileModal()}
+            >
+              Set Profile Photo
+            </Button>
+            <Button
+              outline
+              color={ThemeConfig[GlobalTheme].buttonColor}
+              onClick={() => setCoverImage('-')}
+            >
+              Remove Profile Photo
+            </Button>
+          </ButtonGroup>
           <InputGroup className="mb-3">
             <InputGroupText>
                 Name

frontend/src/components/editable/category-list.jsx

@@ -136,6 +136,7 @@ function Blogs(props) {
                     bgColor={ThemeConfig[GlobalTheme].background} 
                     borderColor={ThemeConfig[GlobalTheme].borderColor}
                     buttonColor={ThemeConfig[GlobalTheme].buttonColor}
+                    notificationToggler={props.notificationToggler}
                     itemObject={item}
                   />
                 )) : <Spinner />}

frontend/src/components/editable/home.jsx

@@ -1,12 +1,15 @@
 import { Container, Spinner, Input, InputGroup, InputGroupText, Button, ButtonGroup, FormFeedback } from 'reactstrap';
 import {useEffect, useState, useRef} from 'react';
 import EditorComponent from './shared/tiptap';
-import MediaService from '../../services/media-service'
+import MediaUpload from './shared/media-upload'
+import EditableMediaService from '../../services/editable-media-service'
 
 function HomePage(props) {
   const [introContent, setIntroContent] = useState("")
+  const [profilePhoto, setProfilePhoto] = useState(false)
   const [saveKeyReady, setSaveKeyReady] = useState(true)
   const [nameFieldInvalid, setNameFieldInvalid] = useState(false)
+  const [modal, setModal] = useState(false)
   const nameField = useRef(null)
   const UserData = props.UserData ? props.UserData : <Spinner> Loading... </Spinner>
   const GlobalTheme = props.GlobalTheme;
@@ -16,7 +19,7 @@ function HomePage(props) {
     let response = await props.setInfo('/data/shared/update/user-data/', {
       "name": nameField.current.value,
       "intro_content": introContent,
-      "profile_photo": ""
+      "profile_photo": profilePhoto ? profilePhoto !== '-' ? profilePhoto : '' : UserData.profilePhoto
     })
     console.log(response)
     if (response === 200)
@@ -25,6 +28,8 @@ function HomePage(props) {
       props.notificationToggler("Something failed!", "danger")
   }
 
+  const toggle = () => {setModal(!modal)}
+
   const showError = (elementValue, fieldType) => {
     console.log(elementValue)
     if (fieldType === 'nameField'){
@@ -39,11 +44,35 @@ function HomePage(props) {
     setIntroContent(UserData.introContent)
   }, [UserData])
 
+  useEffect(() => {
+    if (profilePhoto){
+      setInfo()
+      if (profilePhoto !== '-') toggle()
+    }
+  }, [profilePhoto])
+
   if (GlobalTheme && ThemeConfig)
   return (
     <Container fluid className={`p-0 mt-5 ${ThemeConfig[GlobalTheme].background}`}>
+      <MediaUpload setMedia={setProfilePhoto} notificationToggler={props.notificationToggler} modal={modal} toggle={toggle} resourceType='homepage' resourceId='homepage'></MediaUpload>
       <div className="d-flex flex-column justify-content-center align-items-center min-vh-82">
-      {UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={MediaService.getMedia(UserData.profilePhoto)} /> : ""}
+      {UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={EditableMediaService.getMedia(UserData.profilePhoto)} /> : ""}
+      <ButtonGroup className='mt-4'>
+        <Button
+          outline
+          color={ThemeConfig[GlobalTheme].buttonColor}
+          onClick={() => toggle()}
+        >
+          Set Profile Photo
+        </Button>
+        <Button
+          outline
+          color={ThemeConfig[GlobalTheme].buttonColor}
+          onClick={() => setProfilePhoto('-')}
+        >
+          Remove Profile Photo
+        </Button>
+      </ButtonGroup>
         <div className={`mt-5 ${ThemeConfig[GlobalTheme].textColor}`}>
           <>
             <InputGroup className='mb-5'>

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

@@ -1,16 +1,16 @@
 import { useEffect, useState, useRef } from 'react';
-import MediaService from '../../../services/media-service'
+import EditableMediaService from '../../../services/editable-media-service'
 import {
-  Spinner,
   Card,
   CardImg,
   CardTitle,
   CardText,
   CardBody,
-  Input, InputGroup, InputGroupText, FormFeedback, Button
+  Input, InputGroup, InputGroupText, FormFeedback, Button, ButtonGroup
 } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import ModalComponent from './modal-component';
+import MediaUpload from './media-upload.jsx'
 
 function CardListViewer(props) {
 
@@ -52,7 +52,6 @@ function CardListViewer(props) {
       "featuredBlog": "",
       "description": descriptionField.current.value,
       "tagLine": taglineField.current.value,
-      "coverImage": ""
     })
   }
 
@@ -66,7 +65,7 @@ function CardListViewer(props) {
     props.deleteResource(props.id)
     toggle()
   }
-  
+
   const itemObject = props.itemObject
 
   if (props.totalItems > 0 && itemObject && Object.keys(itemObject).length !== 0){
@@ -75,7 +74,6 @@ function CardListViewer(props) {
         <>
         <ModalComponent modalText={modalText} modalTitle={modalTitle} modal={modal} toggle={toggle} confirmAction={deleteResource}/>
         <Card color={props.borderColor} outline className={`my-2 ${props.bgColor}`} style={{"width": props.cardType === "smallCard" ? "18rem": "100%"}}>
-          {itemObject.coverImage !== "" ? <CardImg src={MediaService.getMedia(itemObject.coverImage)} style={{ "height": "180px", "objectFit": "cover" }} top width="100%" /> : ""}
           <CardBody>
             <CardTitle className={`mb-3 ${props.textColor}`} tag="h5">
               <InputGroup>
@@ -125,7 +123,7 @@ function CardListViewer(props) {
     else
       return (
         <Card color={props.borderColor} outline className={`my-2 ${props.bgColor}`} style={{"width": props.cardType === "smallCard" ? "18rem": "100%"}}>
-          {itemObject.coverImage !== "" ? <CardImg src={MediaService.getMedia(itemObject.coverImage)} style={{ "height": "180px", "objectFit": "cover" }} top width="100%" /> : ""}
+          {itemObject.coverImage !== "" ? <CardImg src={EditableMediaService.getMedia(itemObject.coverImage)} style={{ "height": "180px", "objectFit": "cover" }} top width="100%" /> : ""}
           <CardBody>
             <Link to={`/${props.resourceType}/${itemObject.id}`}>
             <CardTitle className={`${props.textColor}`} tag="h3">

frontend/src/components/editable/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 EditableMediaService from '../../../services/editable-media-service'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSun, faMoon, faPen, faBrush } from '@fortawesome/free-solid-svg-icons';
 import { Link } from 'react-router-dom';
@@ -69,7 +69,7 @@ function Header(props) {
                 <img 
                   style={{ width: '40px', height: '40px', objectFit: 'cover', 'marginRight': '10px' }} 
                   className="rounded-circle" 
-                  src={MediaService.getMedia(UserData.profilePhoto)} 
+                  src={EditableMediaService.getMedia(UserData.profilePhoto)} 
                 /> : ""
             }
             <Button color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`} size="lg">

frontend/src/services/editable-media-service.jsx

@@ -0,0 +1,5 @@
+const getMedia = (mediaPath) => {
+  return `${mediaPath}`;
+}
+
+export default { getMedia };