Finalize homepage editing functionality

frontend/src/AppEditable.jsx

@@ -60,7 +60,6 @@ function AppEditable() {
           "darkTheme": JSON.parse(responseData["dark_theme"]),
           "lightTheme": JSON.parse(responseData["light_theme"])
         })
-        setGlobalTheme(responseData["default_theme"])
       }
     )
   }

frontend/src/components/editable/home.jsx

@@ -1,4 +1,4 @@
-import { Container, Spinner, Input, InputGroup, InputGroupText, Button, ButtonGroup } from 'reactstrap';
+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'
@@ -6,6 +6,7 @@ import MediaService from '../../services/media-service'
 function HomePage(props) {
   const [introContent, setIntroContent] = useState("")
   const [saveKeyReady, setSaveKeyReady] = useState(true)
+  const [nameFieldInvalid, setNameFieldInvalid] = useState(false)
   const nameField = useRef(null)
   const UserData = props.UserData ? props.UserData : <Spinner> Loading... </Spinner>
   const GlobalTheme = props.GlobalTheme;
@@ -20,10 +21,20 @@ function HomePage(props) {
     console.log(response)
     if (response === 200)
       props.notificationToggler("Data saved successfully!")
-    if ([500, 404, 403].includes(response))
+    if ([500, 404, 403, 400].includes(response))
       props.notificationToggler("Something failed!", "danger")
   }
 
+  const showError = (elementValue, fieldType) => {
+    console.log(elementValue)
+    if (fieldType === 'nameField'){
+      if (elementValue === '')
+        setNameFieldInvalid(true)
+      else
+        setNameFieldInvalid(false)
+    }
+  }
+
   useEffect(() => {
     setIntroContent(UserData.introContent)
   }, [UserData])
@@ -39,7 +50,10 @@ function HomePage(props) {
               <InputGroupText>
                 Name
               </InputGroupText>
-              <Input innerRef={nameField} defaultValue={UserData.name} />
+              <Input invalid={nameFieldInvalid} innerRef={nameField} defaultValue={UserData.name} onChange={() => showError(nameField.current.value, 'nameField')}/>
+              {nameFieldInvalid ? <FormFeedback tooltip className="mt-1">
+                This field cannot be empty
+              </FormFeedback>:''}
             </InputGroup>
             <EditorComponent GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} content={UserData.introContent} setContent={setIntroContent}/>
           </>

frontend/src/components/editable/shared/footer.jsx

@@ -18,7 +18,7 @@ const Footer = (props) => {
   const ThemeConfig = props.ThemeConfig;
   const UserData = props.UserData;
 
-  const setInfo = async (color, colorArea) => {
+  const setInfo = async (colorArea, color) => {
     let localThemeConfig = {...ThemeConfig}
     localThemeConfig[GlobalTheme].footer[colorArea] = `${color}`
     let response = await props.setInfo('/data/shared/update/theme-config/', GlobalTheme === "darkTheme" ? {
@@ -42,39 +42,39 @@ const Footer = (props) => {
               </Button>
               <Button
                 color='primary'
-                onClick={() => setInfo('bg-primary', 'background')}/>
+                onClick={() => setInfo('background', 'bg-primary')}/>
               <Button
                 color='secondary'
-                onClick={() => setInfo('bg-secondary', 'background')}/>
+                onClick={() => setInfo('background', 'bg-secondary')}/>
               <Button
                 color='success'
-                onClick={() => setInfo('bg-success', 'background')}/>
+                onClick={() => setInfo('background', 'bg-success')}/>
               <Button
                 color='danger'
-                onClick={() => setInfo('bg-danger', 'background')}/>
+                onClick={() => setInfo('background', 'bg-danger')}/>
               <Button
                 color='warning'
-                onClick={() => setInfo('bg-warning', 'background')}/>
+                onClick={() => setInfo('background', 'bg-warning')}/>
               <Button
                 color='info'
-                onClick={() => setInfo('bg-info', 'background')}/>
+                onClick={() => setInfo('background', 'bg-info')}/>
               <Button
                 color='light'
-                onClick={() => setInfo('bg-light', 'background')}/>
+                onClick={() => setInfo('background', 'bg-light')}/>
               <Button
                 color='dark'
-                onClick={() => setInfo('bg-dark', 'background')}/>
+                onClick={() => setInfo('background', 'bg-dark')}/>
             </ButtonGroup>
             <ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
               <Button disabled color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}>      
                 <FontAwesomeIcon icon={faBrush} /> Set footer text color
               </Button>
-              <Button
-                color='dark'
-                onClick={() => setInfo('text-light', 'text')}>White on black</Button>
               <Button
                 color='light'
-                onClick={() => setInfo('text-black', 'text')}>Black on white</Button>
+                onClick={() => setInfo('text', 'text-white')}>White</Button>
+              <Button
+                color='dark'
+                onClick={() => setInfo('text', 'text-black')}>Black</Button>
             </ButtonGroup>
           <Col md="12">
             <div className="blogContent text-center text-md-left mt-3">

frontend/src/components/editable/shared/navbar.jsx

@@ -26,13 +26,19 @@ function Header(props) {
 
   const [collapseClasses, setCollapseClasses] = useState('');
   const [themeSelected, setThemeSelected] = useState('lightTheme');
+  const [defaultThemeConfig, setDefaultThemeConfig] = useState('lightTheme');
 
-  const setInfo = async (color, colorArea) => {
+  const setInfo = async (colorArea, color, defaultThemeConfig) => {
     let localThemeConfig = {...ThemeConfig}
-    localThemeConfig[GlobalTheme].navBar[colorArea] = `${color}`
+
+    if (colorArea && color)
+      localThemeConfig[GlobalTheme].navBar[colorArea] = `${color}`
+
     let response = await props.setInfo('/data/shared/update/theme-config/', GlobalTheme === "darkTheme" ? {
+      "default_theme": defaultThemeConfig,
       "dark_theme": JSON.stringify(localThemeConfig[GlobalTheme]),
     }:{
+      "default_theme": defaultThemeConfig,
       "light_theme": JSON.stringify(localThemeConfig[GlobalTheme]),
     })
     if (response === 200)
@@ -47,6 +53,7 @@ function Header(props) {
 
   useEffect(() => {
     setThemeSelected(props.ThemeConfig.defaultTheme)
+    setDefaultThemeConfig(props.ThemeConfig.defaultTheme)
   }, [])
 
   if (GlobalTheme && ThemeConfig && UserData)
@@ -102,41 +109,52 @@ function Header(props) {
               </Button>
               <Button
                 color='primary'
-                onClick={() => setInfo('bg-primary', 'background')}/>
+                onClick={() => setInfo('background', 'bg-primary', ThemeConfig['defaultTheme'])}/>
               <Button
                 color='secondary'
-                onClick={() => setInfo('bg-secondary', 'background')}/>
+                onClick={() => setInfo('background', 'bg-secondary', ThemeConfig['defaultTheme'])}/>
               <Button
                 color='success'
-                onClick={() => setInfo('bg-success', 'background')}/>
+                onClick={() => setInfo('background', 'bg-success', ThemeConfig['defaultTheme'])}/>
               <Button
                 color='danger'
-                onClick={() => setInfo('bg-danger', 'background')}/>
+                onClick={() => setInfo('background', 'bg-danger', ThemeConfig['defaultTheme'])}/>
               <Button
                 color='warning'
-                onClick={() => setInfo('bg-warning', 'background')}/>
+                onClick={() => setInfo('background', 'bg-warning', ThemeConfig['defaultTheme'])}/>
               <Button
                 color='info'
-                onClick={() => setInfo('bg-info', 'background')}/>
+                onClick={() => setInfo('background', 'bg-info', ThemeConfig['defaultTheme'])}/>
               <Button
                 color='light'
-                onClick={() => setInfo('bg-light', 'background')}/>
+                onClick={() => setInfo('background', 'bg-light', ThemeConfig['defaultTheme'])}/>
               <Button
                 color='dark'
-                onClick={() => setInfo('bg-dark', 'background')}/>
+                onClick={() => setInfo('background', 'bg-dark', ThemeConfig['defaultTheme'])}/>
             </ButtonGroup>
             <ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
               <Button disabled color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}>      
                 <FontAwesomeIcon icon={faBrush} /> Set button color
               </Button>
               <Button
-                color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
+                color='light'
-                outline
+                onClick={() => setInfo('buttonColor', 'light', ThemeConfig['defaultTheme'])}>White</Button>
-                onClick={() => setInfo('light', 'buttonColor')}>White</Button>
+              <Button
+                color='dark'
+                onClick={() => setInfo('buttonColor', 'black', ThemeConfig['defaultTheme'])}>Black</Button>
+            </ButtonGroup>
+            <ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
+              <Button disabled color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}>      
+                <FontAwesomeIcon icon={faBrush} /> Default Theme
+              </Button>
               <Button
                 color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
                 outline
-                onClick={() => setInfo('black', 'buttonColor')}>Black</Button>
+                onClick={() => setInfo(null, null, 'lightTheme')}>Light Theme</Button>
+              <Button
+                color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
+                outline
+                onClick={() => setInfo(null, null, 'darkTheme')}>Dark Theme</Button>
             </ButtonGroup>
           </NavItem>
         </Nav>