Show image controller

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

-import React from 'react'
-import EditIcon from '@material-ui/icons/Edit'
-import { Button, Grid } from '@material-ui/core'
-import SearchIcon from '@material-ui/icons/Search'
-import ClearIcon from '@material-ui/icons/Clear'
-
-export type SnackType =
-    | 'Startseite'
-    | 'Endseite'
-    | 'Wissenssnack'
-    | 'Bewegungsaufforderung'
-
-type SnackProp = {
-    typ: SnackType
-    titel: string
-}
-
-export const Snack: React.FC<SnackProp> = ({ typ, titel }: SnackProp) => {
-    return (
-        <Grid container direction="row">
-            <Button>
-                <EditIcon />
-            </Button>
-            <p>{typ}</p>
-            <p>{titel}</p>
-            <Button>
-                <SearchIcon />
-            </Button>
-            <Button>
-                <ClearIcon />
-            </Button>
-        </Grid>
-    )
-}

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

-import React from 'react'
+import React, { useState } from 'react'
 import {
     Button,
     Table,
@@ -13,6 +13,7 @@ import ClearIcon from '@material-ui/icons/Clear'
 import { CustomPage } from './SnackMockData'
 import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'
+import { ImageManagerPopup } from '../ImageManager'
 
 interface SnackTableProps {
     data: any
@@ -37,6 +38,8 @@ export const SnackTable: React.FC<SnackTableProps> = ({
         setData(copy)
     }
 
+    const [showImage, setShowImage] = useState(false)
+
     return (
         <Table>
             <TableHead>
@@ -54,7 +57,7 @@ export const SnackTable: React.FC<SnackTableProps> = ({
                         return (
                             <TableRow key={idx}>
                                 <TableCell align="left">
-                                    <Button>
+                                    <Button onClick={() => setShowImage(true)}>
                                         {' '}
                                         <EditIcon />{' '}
                                     </Button>
@@ -86,6 +89,7 @@ export const SnackTable: React.FC<SnackTableProps> = ({
                     } else return null
                 })}
             </TableBody>
+            <ImageManagerPopup open={showImage} onClose={() => setShowImage(false)}></ImageManagerPopup>
         </Table>
     )
 }

src/components/user/QuizWizard.tsx

@@ -7,7 +7,6 @@ import { useWizard, Wizard } from 'react-use-wizard'
 import { Page, SnackUserPage } from '../../types/ApiTypes'
 import EndView from './EndView'
 import StartView from './StartView'
-import { Snack } from '../admin/snacks & co/Snack'
 
 const QUIZ_ENDPOINT: string = '/api/frontendContainer'
 const QuizWizard = () => {