reloads config settings endpoint on change of product

src/AppRouters.jsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom';
+import {Routes, Route} from 'react-router-dom';
 
 import UserExist from './component/authorization/UserExist';
 import AuthLayout from './component/auth/AuthLayout';
@@ -23,47 +23,49 @@ import SubscriptionPage from './views/SubscriptionPage';
 import OnboardPage from "./views/OnboardPage";
 import AccPWDResetPage from './views/AccPWDResetPage';
 import ProfileCompletePage from './views/ProfileCompletePage';
-import  SubscribePage from './views/Subscribe'
+import SubscribePage from './views/Subscribe'
+import StartPage from "./views/StartPage";
 
 function AppRouters() {
-  return (
-    <div className="">
-      <Routes>
-        <Route element={<BearerToken />}>
-          {/* auth routes wrapper */}
-          <Route element={<AuthLayout />}>
-            <Route path={siteLinks.home} element={<LoginPage />} />
-            <Route path={siteLinks.login} element={<LoginPage />} />
-            <Route path={siteLinks.signup} element={<SignupPage />} />
-            <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
-            <Route path={siteLinks.csignup} element={<CSignupPage />} />
-            <Route path={siteLinks.accreset} element={<AccPWDResetPage />} />
-            <Route path={siteLinks.error} element={<LoginPage />} />
-          </Route>
+    return (
+        <div className="">
+            <Routes>
+                <Route element={<BearerToken/>}>
+                    {/* auth routes wrapper */}
+                    <Route element={<AuthLayout/>}>
+                        <Route path={siteLinks.home} element={<LoginPage/>}/>
+                        <Route path={siteLinks.login} element={<LoginPage/>}/>
+                        <Route path={siteLinks.signup} element={<SignupPage/>}/>
+                        <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage/>}/>
+                        <Route path={siteLinks.csignup} element={<CSignupPage/>}/>
+                        <Route path={siteLinks.accreset} element={<AccPWDResetPage/>}/>
+                        <Route path={siteLinks.error} element={<LoginPage/>}/>
+                    </Route>
 
-          {/* protected routes */}
-          <Route element={<SocketIOContextProvider />}>
-            <Route element={<UserExist />}> 
-              <Route path={siteLinks.dash} element={<HomePage />} />
-              <Route path={siteLinks.profile_complete} element={<ProfileCompletePage />} />
-              <Route path={siteLinks.product} element={<ProductPage />} />
-              <Route path={siteLinks.reports} element={<ReportsPage />} />
-              <Route path={siteLinks.comments} element={<CommentsPage />} />
-              <Route path={siteLinks.contacts} element={<ContactsPage />} />
-              <Route path={siteLinks.user} element={<UserPage />} />
-              <Route path={siteLinks.subscription} element={<SubscriptionPage />} />
-              <Route path={siteLinks.subscription_success} element={<SubscriptionPage />} />
-              <Route path={siteLinks.onboard} element={<OnboardPage />} />
-              <Route path={siteLinks.calendar} element={<CalendarPage />} />
-              <Route path={siteLinks.settings} element={<SettingsPage />} />
-              <Route path={siteLinks.subscribe} element={<SubscribePage />} />
-              <Route path={siteLinks.help} element={<HelpPage />} />
-            </Route>
-          </Route>
-        </Route>
-      </Routes>
-    </div>
-  );
+                    {/* protected routes */}
+                    <Route element={<SocketIOContextProvider/>}>
+                        <Route element={<UserExist/>}>
+                            <Route path={siteLinks.start} element={<StartPage/>}/>
+                            <Route path={siteLinks.dash} element={<HomePage/>}/>
+                            <Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
+                            <Route path={siteLinks.product} element={<ProductPage/>}/>
+                            <Route path={siteLinks.reports} element={<ReportsPage/>}/>
+                            <Route path={siteLinks.comments} element={<CommentsPage/>}/>
+                            <Route path={siteLinks.contacts} element={<ContactsPage/>}/>
+                            <Route path={siteLinks.user} element={<UserPage/>}/>
+                            <Route path={siteLinks.subscription} element={<SubscriptionPage/>}/>
+                            <Route path={siteLinks.subscription_success} element={<SubscriptionPage/>}/>
+                            <Route path={siteLinks.onboard} element={<OnboardPage/>}/>
+                            <Route path={siteLinks.calendar} element={<CalendarPage/>}/>
+                            <Route path={siteLinks.settings} element={<SettingsPage/>}/>
+                            <Route path={siteLinks.subscribe} element={<SubscribePage/>}/>
+                            <Route path={siteLinks.help} element={<HelpPage/>}/>
+                        </Route>
+                    </Route>
+                </Route>
+            </Routes>
+        </div>
+    );
 }
 
 export default AppRouters;

src/component/auth/CSignup.jsx

@@ -66,7 +66,7 @@ export default function CSignup() {
         localStorage.setItem('room', room)
         localStorage.setItem('uid', uid)
         dispatch(updateUserDetails({ ...res?.data }));
-        navigate('/dash') // later add redux to dispatch state
+        navigate(siteLinks.start, {replace: true}) // later add redux to dispatch state
     },
     // onError: (err) => {
     //     console.log('err', err)

src/component/product/ProductFactory.jsx

@@ -2,14 +2,16 @@ import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
 import queryKeys from "../../services/queryKeys";
+import siteLinks from '../../links/siteLinks';
 
 export default function ProductFactory(){
+    const navigate = useNavigate()
     const location = useLocation();
     const pathname = location.pathname;
 
@@ -45,8 +47,9 @@ export default function ProductFactory(){
                     </>
                     : isError ?
                         <div className="row">
-                            <div className="col-12">
+                            <div className="text-center col-12" style={{minHeight: '500px', placeContent: 'center'}}>
                                 <p className='text-danger'>{error?.message}</p>
+                                <button onClick={() => navigate(siteLinks.home)} className='mt-3 btn btn-primary'>Return Home</button>
                             </div>
                         </div>
                     :

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,158 +1,177 @@
 import React, {memo, useEffect, useMemo, useState} from 'react'
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { pageSettings } from "../../../services/services";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {pageSettings} from "../../../services/services";
 import SiteTemplateSelector from './SiteTemplateSelector';
 import NoYesBooleanDropdown from './NoYesBooleanDropdown';
-import { IoMdArrowDropdown } from 'react-icons/io';
+import {IoMdArrowDropdown} from 'react-icons/io';
 import queryKeys from '../../../services/queryKeys';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
 
-const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) => {
 
-    const queryClient = useQueryClient()
+        const queryClient = useQueryClient()
 
-    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+        const [reqStatus, setReqStatus] = useState({error: null, message: ''})
 
-    
-    // const computeFieldData = useMemo(()=>{
-    //     const fieldData = {}
-    //     Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
-    //     fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
-    //     })
-    //     backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
-    //     fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
-    //     })
-    //     return fieldData
-    // },[backendValues.data])
 
-    
-    const [fields, setFields] = useState({})
+        // const computeFieldData = useMemo(()=>{
+        //     const fieldData = {}
+        //     Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+        //     fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+        //     })
+        //     backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+        //     fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+        //     })
+        //     return fieldData
+        // },[backendValues.data])
 
-    useEffect(()=>{
-        const fieldData = {}
-        Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
-        fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
-        })
-        backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
-        fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
-        })
-        setFields(fieldData)
-    },[backendValues.data])
-    
-    const handleChange = ({target:{name, value}}) => {
-        setFields(prev => ({...prev, [name]:value}))
-        setFieldsChanged(true)
-    }
-    
-    const submitSettings = useMutation({
-        mutationFn: (fields) => {
-            return pageSettings(fields)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                return setReqStatus({error: true, message: 'Unable to complete, try again later'})
-            }
-            setFieldsChanged(false)
-            setReqStatus({error: false, message: 'Completed successfully'})
-        },
-        onError: (err) => {
-            setReqStatus({error: true, message: 'Unable to complete, try again later'})
-        },
-        onSettled: () => {
-            queryClient.refetchQueries({  // refetches productProvision API call
-                queryKey: [...queryKeys.settingsData],
+
+        const [fields, setFields] = useState({})
+
+        const sortedData = sortObjectByListOrder(data ? data : {}) // SORTED SETTINGSCONFIG
+
+        useEffect(() => {
+            const fieldData = {}
+            Object.entries(sortedData)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+                fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
             })
-            setTimeout(()=>{
-                setReqStatus({error: null, message: ''})
-            },3000)
-        },
-    })
+            backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+                fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+            })
+            setFields(fieldData)
+        }, [backendValues.data])
 
-      const handleSubmit = () => {
-        const reqData = {
-            token: localStorage.getItem('token'), // USER TOKEN
-            uid: localStorage.getItem('uid'), // USER UID
-            product_id: productData?.product_id,
-            settings : {
-            ...fields
-            }
+        const handleChange = ({target: {name, value}}) => {
+            setFields(prev => ({...prev, [name]: value}))
+            setFieldsChanged(true)
         }
-        submitSettings.mutate(reqData)
-      }
 
-      return (
-        <>
-        {backendValues?.isFetching || !backendValues?.data ? 
-            <>
-                <div className="row">
-                    <div className="col-12">
-                        <p className='text-mute'>Loading...</p>
-                    </div>
-                </div>
-            </>
-            : backendValues?.isError ?
-            <div className="row">
-                <div className="col-12">
-                    <p className='text-danger'>{backendValues?.error.message}</p>
-                </div>
-            </div>
-            :
-            <>
-            {isCustom ===  true ?
-            <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
-            :
-            <div className="page-account-form">
-                <div className="p-0" style={{ minHeight: '500px'}}>
+        const submitSettings = useMutation({
+            mutationFn: (fields) => {
+                return pageSettings(fields)
+            },
+            onSuccess: (res) => {
+                if (res?.data?.resultCode != '0') {
+                    return setReqStatus({error: true, message: 'Unable to complete, try again later'})
+                }
+                setFieldsChanged(false)
+                setReqStatus({error: false, message: 'Completed successfully'})
+            },
+            onError: (err) => {
+                setReqStatus({error: true, message: 'Unable to complete, try again later'})
+            },
+            onSettled: () => {
+                queryClient.refetchQueries({  // refetches productProvision API call
+                    queryKey: [...queryKeys.settingsData],
+                })
+                setTimeout(() => {
+                    setReqStatus({error: null, message: ''})
+                }, 3000)
+            },
+        })
 
-                    <form id='tab_form'>
-                        <div className="form-row">
-                            <>
-                                {Object.entries(data)?.map(([key, value]) => {
-                                    let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
-                                    let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
-                                    return (
-                                        <div key={key} className="form-group col-md-12">
-                                            <label htmlFor="name1">{value.name}</label>
-                                            {value.controls == 'TEXT' ?
-                                                <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
-                                                :value.controls == 'TEXTAREA' ?
-                                                <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
-                                                : value.controls == 'SELECT_NO_YES' ?
-                                                // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
-                                                <div className='position-relative'>
-                                                    <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
-                                                        <option value=''>Select</option>
-                                                        <option value='0'>No</option>
-                                                        <option value='1'>Yes</option>
-                                                    </select>
-                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
-                                                </div>
-                                                :
-                                                null
-                                            }
-                                        </div>
-                                    )
-                                }
-                                )}
-                            </>
-                            {reqStatus.message &&
-                                <>
-                                <div className="col-12">
-                                    <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
-                                </div>
-                                </>
-                            }
-                            <div className="form-group col-md-12" style={{textAlign:'right'}}>
-                                <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+        const handleSubmit = () => {
+            const reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id,
+                settings: {
+                    ...fields
+                }
+            }
+            submitSettings.mutate(reqData)
+        }
+
+        return (
+            <>
+                {backendValues?.isFetching || !backendValues?.data ?
+                    <>
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-mute'>Loading...</p>
                             </div>
                         </div>
-                    </form>
-                </div>
-            </div>
-            }
+                    </>
+                    : backendValues?.isError ?
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-danger'>{backendValues?.error.message}</p>
+                            </div>
+                        </div>
+                        :
+                        <>
+                            {isCustom === true ?
+                                <SiteTemplateSelector name={name} data={sortedData} isCustom={isCustom}
+                                                      productData={productData}/>
+                                :
+                                <div className="page-account-form">
+                                    <div className="p-0" style={{minHeight: '500px'}}>
+
+                                        <form id='tab_form'>
+                                            <div className="form-row">
+                                                <>
+                                                    {Object.entries(sortedData)?.map(([key, value]) => {
+                                                            let fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
+                                                            let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                                            return (
+                                                                <div key={key} className="form-group col-md-12">
+                                                                    <label htmlFor="name1">{value.name}</label>
+                                                                    {value.controls === 'TEXT' ?
+                                                                        <input name={fieldName} type="text"
+                                                                               className="form-control" id={key}
+                                                                               value={fieldValue} onChange={handleChange}/>
+                                                                        : value.controls === 'TEXTAREA' ?
+                                                                            <textarea name={fieldName} rows={5}
+                                                                                      style={{resize: 'none'}} type="text"
+                                                                                      className="form-control" id={key}
+                                                                                      value={fieldValue}
+                                                                                      onChange={handleChange}/>
+                                                                            : value.controls === 'SELECT_NO_YES' ?
+                                                                                // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
+                                                                                <div className='position-relative'>
+                                                                                    <select onChange={handleChange}
+                                                                                            name={fieldName} value={fieldValue}
+                                                                                            className="form-control">
+                                                                                        <option value=''>Select</option>
+                                                                                        <option value='0'>No</option>
+                                                                                        <option value='1'>Yes</option>
+                                                                                    </select>
+                                                                                    <IoMdArrowDropdown
+                                                                                        className='position-absolute w-auto'
+                                                                                        style={{
+                                                                                            top: '50%',
+                                                                                            right: '2px',
+                                                                                            transform: 'translateY(-50%)'
+                                                                                        }}/>
+                                                                                </div>
+                                                                                :
+                                                                                null
+                                                                    }
+                                                                </div>
+                                                            )
+                                                        }
+                                                    )}
+                                                </>
+                                                {reqStatus.message &&
+                                                    <>
+                                                        <div className="col-12">
+                                                            <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                                                        </div>
+                                                    </>
+                                                }
+                                                <div className="form-group col-md-12" style={{textAlign: 'right'}}>
+                                                    <button onClick={handleSubmit} type="button" className="btn btn-primary"
+                                                            disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+                                                </div>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            }
+                        </>
+                }
             </>
-            }
-        </>
-      )
+        )
     }
 )
 

src/component/product/settingsTab/Settings.jsx

@@ -4,6 +4,7 @@ import { getSettingsData, getMyProductConfig } from '../../../services/services'
 import queryKeys from '../../../services/queryKeys';
 import { useSelector } from 'react-redux';
 import { useQuery } from '@tanstack/react-query';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
 
 const Settings = memo(({productData}) => {
 
@@ -19,6 +20,7 @@ const Settings = memo(({productData}) => {
             }
            return getMyProductConfig(reqData)
         },
+        staleTime: 0,
     })
     const settingsConfig = configData?.data?.settings_items
     // console.log('CONFIG DATA...', settingsConfig)
@@ -53,12 +55,15 @@ const Settings = memo(({productData}) => {
             }
            return getSettingsData(reqData)
         },
+        staleTime: 0,
         enabled: settingsConfig ? true : false
     })
 
     const settingsData = {data: data?.data?.settings, isFetching, isError, error}
     // console.log('data', settingsData)
 
+    const sortedSettingsConfig = sortObjectByListOrder(settingsConfig ? settingsConfig : {}) // SORTED SETTINGSCONFIG
+
       return (
         <>
         {configIsFetching ? 
@@ -79,7 +84,7 @@ const Settings = memo(({productData}) => {
             <div className="tab tab-vertical">
                 <ul className="nav nav-tabs" role="tablist">
                     <>
-                        {Object.entries(settingsConfig).map(([key, value], index) => (
+                        {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <li key={key} className="nav-item">
                             <a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
                                 id={key} 
@@ -99,7 +104,7 @@ const Settings = memo(({productData}) => {
                 </ul>
                 <div className="tab-content">
                     <>
-                        {Object.entries(settingsConfig).map(([key, value], index) => (
+                        {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
                                 // id={value.controls} role="tabpanel"
                                 // aria-labelledby={key}
@@ -116,4 +121,4 @@ const Settings = memo(({productData}) => {
     }
 )
 
-export default Settings
+export default Settings

src/component/start/Start.jsx

@@ -0,0 +1,82 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+
+export default function Start() {
+
+    const bgImg = getImage("side-banner.jpg");
+
+    return (
+        <>
+            <BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']}/>
+            <div className="row">
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3"
+                         style={{minHeight: '550px', borderRadius: '10px', backgroundImage: `url(${bgImg})`}}>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Start with</h5>
+                                <h2 className="text-primary pt-3"><a href="/product/A000001">Personal Website</a></h2>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <li>post events</li>
+                                    <li>cancel any time</li>
+                                </ul>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Start with</h5>
+                                <h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <li>post events</li>
+                                    <li>cancel any time</li>
+                                </ul>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    {/*<div className="card card-statistics text-center py-3">*/}
+                    {/*<div className="card-body pricing-content">*/}
+                    {/*<div className="pricing-content-card">*/}
+                    {/*    <h5>small</h5>*/}
+                    {/*    <h2 className="text-primary pt-3">$80</h2>*/}
+                    {/*    <p className="text-primary pb-3">/ Monthly</p>*/}
+                    {/*    <ul className="py-2">*/}
+                    {/*        <li>post jobs</li>*/}
+                    {/*        <li>advanced instructors search</li>*/}
+                    {/*        <li>invite candidates</li>*/}
+                    {/*        <li>post events</li>*/}
+                    {/*        <li>cancel any time</li>*/}
+                    {/*    </ul>*/}
+                    {/*    <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
+                </div>
+            </div>
+
+        </>
+    )
+}

src/helpers/sortObjectByListOrder.js

@@ -0,0 +1,14 @@
+const sortObjectByListOrder = (data) => {
+    const sortedEntriesByValue = Object.entries(data).sort((a, b) => {
+        if(a[1].list_order > b[1].list_order){
+            return 1
+        }else{
+            return -1
+        }
+    }); // Sorts numerically by value
+
+    const sortedObjectByValue = Object.fromEntries(sortedEntriesByValue);
+    return sortedObjectByValue
+}
+
+export default sortObjectByListOrder

src/links/siteLinks.js

@@ -3,6 +3,7 @@ const siteLinks = {
     help: '/help',
     home: '/',
     dash: '/dash',
+    start: '/start',
     profile_complete: '/profile-complete',
     product: '/product/*',
     contacts: '/contacts',

src/services/services.js

@@ -26,7 +26,8 @@ const postAuxEnd = (path, postData, media=false) => {
     return axios.post(`${basePath}${path}`, postData).then(res => {
         return res
     }).catch(err => {
-        throw new Error(err.response.data.msg);
+        // console.log('res', err.response.data)
+        throw new Error(err.response.data.error_message);
     })
 }
 

src/views/StartPage.jsx

@@ -0,0 +1,7 @@
+
+import Start from "../component/start/Start";
+
+
+export default function StartPage(){
+    return <Start />
+}