confirm dialogs for most views

question is not working with the backend atm

src/components/admin/order/OrderView.tsx

@@ -18,6 +18,7 @@ import HelpIcon from '@material-ui/icons/Help'
 import SaveIcon from '@material-ui/icons/Save'
 import Fab from '@material-ui/core/Fab'
 import { useOrderHook } from './useOrderHook'
+import { ConfirmDialog } from '../shared/Dialogs/ConfirmDialog'
 
 const useStyles = makeStyles((theme) => ({
     entryPaper: {
@@ -189,8 +190,8 @@ export const OrderView: React.FC = () => {
         // TODO: send updated order to server
         console.log(ordered.map((e) => e.id))
     }, [ordered])
-
-    const [showImg, setShowImg] = useState(true)
+    const dialogConfirmState = useState(false)
+    //const [showImg, setShowImg] = useState(true)
 
     return (
         <div>
@@ -198,7 +199,6 @@ export const OrderView: React.FC = () => {
                 Reihenfolge der Fragen, Snacks & Bewegungsaufforderungen
             </Typography>
             <div>
-                {orderLoading && "Loading..."}
                 <DndProvider backend={HTML5Backend}>
                     {ordered.map((entry, idx) => (
                         <DraggableListEntry
@@ -214,17 +214,21 @@ export const OrderView: React.FC = () => {
                 color="primary"
                 aria-label="save"
                 className={classes.fab}
-                onClick={saveOrder}
+                onClick={() => dialogConfirmState[1](true)}
             >
                 <SaveIcon />
             </Fab>
-            {/* <ImageManagerPopup
-                open={showImg}
-                onClose={(e) => {
-                    console.log(e)
-                    setShowImg(false)
+            <ConfirmDialog
+                handleCategorie={saveOrder}
+                state={dialogConfirmState}
+                text={{
+                    header: 'Speichern',
+                    body: 'Sollen die Änderungen gespeichert werden',
+                    confirm: 'Bestätigen',
+                    abort: 'Abbrechen'
                 }}
-            />*/}
+            />
+            {/*<ImageManagerPopup open={showImg} onClose={(e) => {console.log(e); setShowImg(false)}} />*/}
         </div>
     )
 }

src/components/admin/questions/QuestionView.tsx

-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Question } from './Question'
-import { ListItem, List, Button } from '@material-ui/core'
+import { ListItem, List } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 import Divider from '@material-ui/core/Divider'
 import { IQuestion } from '../../../types/ApiTypes'
 import { action, CustomSpeedDial } from '../shared/CustomSpeedDial'
 import SaveIcon from '@material-ui/icons/Save'
-import { useFetchData } from './useFetchData'
-import { mockCategorieData } from '../shared/sharedMockData'
+import { ICategorie } from '../shared/sharedMockData'
 import ObjectID from 'bson-objectid'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
-import { updateSports } from '../../../redux/Slices/sportsSlice'
 
 export const QuestionView: React.FC = () => {
-    const count = useAppSelector((state) => state.sportsData.value)
-    // const count = useAppSelector((state) => state..value)
-    const dispatch = useAppDispatch()
-    const [isLoading, questions, setQuestions] = useFetchData()
+    const questionsData = useAppSelector((state) => state.questionsData.value)
+    const categoriesData = useAppSelector((state) => state.categoriesData.value)
+    const [questions, setQuestions] = useState<IQuestion[]>([])
+    const [categories, setCategories] = useState<ICategorie[]>([])
+    const isLoading = questions === []
+    useEffect(() => {
+        setQuestions(JSON.parse(JSON.stringify(questionsData)))
+        console.log('questions')
+        console.log(questions)
+    }, [questionsData])
+    useEffect(() => {
+        setCategories(JSON.parse(JSON.stringify(categoriesData)))
+        console.log('categories')
+        console.log(categories)
+    }, [categoriesData])
 
     const actions: action[] = [
         {
@@ -83,7 +92,7 @@ export const QuestionView: React.FC = () => {
                                             handler={handleCategorieChange}
                                             questionData={data}
                                             index={idx}
-                                            categories={mockCategorieData}
+                                            categories={categories}
                                         />{' '}
                                     </ListItem>{' '}
                                     <Divider />{' '}
@@ -108,7 +117,7 @@ export const QuestionView: React.FC = () => {
                                             handler={handleCategorieChange}
                                             questionData={data}
                                             index={idx}
-                                            categories={mockCategorieData}
+                                            categories={categories}
                                         />{' '}
                                     </ListItem>{' '}
                                     <Divider />{' '}
@@ -118,29 +127,6 @@ export const QuestionView: React.FC = () => {
                     })}
                 </List>
             )}
-            <Button
-                onClick={() => {
-                    dispatch(
-                        updateSports([
-                            {
-                                _id: '',
-                                name: 'Kunfgu',
-                                url: 'https://http.cat/',
-                                active: true,
-                                categoryWeights: {
-                                    '0': 1,
-                                    '1': 4,
-                                    '2': 1,
-                                    '3': 4,
-                                    '4': 5,
-                                    '5': 1
-                                }
-                            }
-                        ])
-                    )
-                    console.log(count)
-                }}
-            ></Button>
             <CustomSpeedDial actions={actions} />
         </div>
     )

src/components/admin/snacks & co/SnacksView.tsx

-import React from 'react'
+import React, { useState } from 'react'
 import { Fab, makeStyles } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 import { SnackTable } from './SnackTable'
 import { useFetchData } from './useFetchData'
+import { ConfirmDialog } from '../shared/Dialogs/ConfirmDialog'
+import { action, CustomSpeedDial } from '../shared/CustomSpeedDial'
+import SaveIcon from '@material-ui/icons/Save'
+import { Add } from '@material-ui/icons'
 
 const useStyles = makeStyles((theme) => ({
     fab: {
@@ -15,6 +19,15 @@ const useStyles = makeStyles((theme) => ({
 export const SnacksView: React.FC = () => {
     const classes = useStyles()
     const [isLoading, pages, setPages] = useFetchData()
+    const dialogConfirmState = useState(false)
+    const actions: action[] = [
+        {
+            handler: () => dialogConfirmState[1](true),
+            icon: <SaveIcon />,
+            title: 'Speichern'
+        },
+        { handler: () => {}, icon: <AddIcon />, title: 'Hinzufügen' }
+    ]
     return (
         <div>
             <h2>Aktive Snacks/Aktivitäten</h2>
@@ -27,9 +40,17 @@ export const SnacksView: React.FC = () => {
             {!isLoading && (
                 <SnackTable setData={setPages} data={pages} active={false} />
             )}
-            <Fab className={classes.fab}>
-                <AddIcon />
-            </Fab>
+            <ConfirmDialog
+                handleCategorie={() => {}}
+                state={dialogConfirmState}
+                text={{
+                    header: 'Speichern',
+                    body: 'Sollen die Änderungen gespeichert werden',
+                    confirm: 'Bestätigen',
+                    abort: 'Abbrechen'
+                }}
+            />
+            <CustomSpeedDial actions={actions} />
         </div>
     )
 }

src/components/admin/sports/sportsMockData.ts

@@ -78,13 +78,13 @@ export function compareSportWeights(a: ISports, b: ISports) {
     let c2 = 0
     Object.keys(a.categoryWeights).forEach((key) => {
         if (a.active) c1 += 100
-        if (!a.categoryWeights[key]) {
+        if (a.categoryWeights[key] === null) {
             c1 += 1
         }
     })
     Object.keys(b.categoryWeights).forEach((key) => {
         if (b.active) c2 += 100
-        if (!b.categoryWeights[key]) {
+        if (b.categoryWeights[key] === null) {
             c2 += 1
         }
     })

src/components/admin/synchronise/SynchroniseTableView.tsx

-import React from 'react'
+import React, { useState } from 'react'
 import { useFetchData } from './useFetchData'
 import { Fab, makeStyles } from '@material-ui/core'
 import SaveIcon from '@material-ui/icons/Save'
 import { createStyles, Theme } from '@material-ui/core/styles'
 import { SynchroniseContainer } from './SynchroniseContainer'
+import { ConfirmDialog } from '../shared/Dialogs/ConfirmDialog'
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -27,6 +28,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export const SynchroniseTableView: React.FC = () => {
     const classes = useStyles()
     const [isLoading, content] = useFetchData()
+    const dialogConfirmState = useState(false)
     return (
         <div style={{ minHeight: '100%', textAlign: 'center' }}>
             {isLoading && <h4 style={{ paddingTop: '300px' }}>loading...</h4>}
@@ -57,10 +59,23 @@ export const SynchroniseTableView: React.FC = () => {
                             'archivieren'
                         ]}
                     />
+                    <ConfirmDialog
+                        handleCategorie={() => {}}
+                        state={dialogConfirmState}
+                        text={{
+                            header: 'Speichern',
+                            body: 'Sollen die Änderungen gespeichert werden',
+                            confirm: 'Bestätigen',
+                            abort: 'Abbrechen'
+                        }}
+                    />
                 </div>
             )}
             {!isLoading && (
-                <Fab className={classes.fab}>
+                <Fab
+                    className={classes.fab}
+                    onClick={() => dialogConfirmState[1](true)}
+                >
                     <SaveIcon />
                 </Fab>
             )}