feat: #28: Basics

Skym0sh0 · Nov 21, 2024 · f854bc5 · f854bc5
1 parent be8b048
commit f854bc5
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 34 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -10,6 +10,7 @@ import {ConfirmationDialogProvider} from "./utils/ConfirmationDialogContext.tsx"
 import {ApiAccessProvider} from "./utils/ApiAccessContext.tsx";
 import {NotificationContextProvider} from "./utils/NotificationContext.tsx";
 import {WebsocketContextProvider} from "./utils/WebsocketContext.tsx";
+import {DataModalDialogProvider} from "./utils/DataModalDialogContext.tsx";
 
 function NamedLogo() {
   return <Stack direction="row" spacing={2} justifyContent="center" alignItems="center" sx={{width: DRAWER_WIDTH}}>
@@ -54,35 +55,37 @@ function App() {
     <ThemeProvider theme={theme}>
       <LocalizationProvider dateAdapter={AdapterLuxon}>
         <NotificationContextProvider>
-          <ConfirmationDialogProvider>
-            <ApiAccessProvider>
-              <WebsocketContextProvider>
-                <Box sx={{width: '100%', height: '100%'}}>
-                  <Box sx={{display: 'flex', width: '100%', height: '100%'}}>
-                    <CssBaseline/>
+          <ApiAccessProvider>
+            <ConfirmationDialogProvider>
+              <DataModalDialogProvider>
+                <WebsocketContextProvider>
+                  <Box sx={{width: '100%', height: '100%'}}>
+                    <Box sx={{display: 'flex', width: '100%', height: '100%'}}>
+                      <CssBaseline/>
 
-                    <AppBar position="fixed" sx={{zIndex: (theme) => theme.zIndex.drawer + 1}} color="info">
-                      <SStack direction="row" spacing={2} justifyContent="space-between" alignItems="center">
-                        <NamedLogo/>
+                      <AppBar position="fixed" sx={{zIndex: (theme) => theme.zIndex.drawer + 1}} color="info">
+                        <SStack direction="row" spacing={2} justifyContent="space-between" alignItems="center">
+                          <NamedLogo/>
 
-                        <AppBarLinks/>
+                          <AppBarLinks/>
 
-                        <AppBarMenu/>
-                      </SStack>
-                    </AppBar>
+                          <AppBarMenu/>
+                        </SStack>
+                      </AppBar>
 
-                    <Box component="main" sx={{flexGrow: 1, p: 1, width: '100%', height: '100%',}}>
-                      <Toolbar/>
+                      <Box component="main" sx={{flexGrow: 1, p: 1, width: '100%', height: '100%',}}>
+                        <Toolbar/>
 
-                      <div style={{height: 'calc(100% - 64px)', maxHeight: 'calc(100% - 64px)'}}>
-                        <GlobalRouting/>
-                      </div>
+                        <div style={{height: 'calc(100% - 64px)', maxHeight: 'calc(100% - 64px)'}}>
+                          <GlobalRouting/>
+                        </div>
+                      </Box>
                     </Box>
                   </Box>
-                </Box>
-              </WebsocketContextProvider>
-            </ApiAccessProvider>
-          </ConfirmationDialogProvider>
+                </WebsocketContextProvider>
+              </DataModalDialogProvider>
+            </ConfirmationDialogProvider>
+          </ApiAccessProvider>
         </NotificationContextProvider>
       </LocalizationProvider>
     </ThemeProvider>

diff --git a/frontend/src/components/orders/ordersList/NewOrder.tsx b/frontend/src/components/orders/ordersList/NewOrder.tsx
@@ -0,0 +1,7 @@
+import {Restaurant} from "../../../../build/generated-ts/api";
+
+export default function NewOrder({restaurant}: { restaurant: Restaurant }) {
+  return <div>
+    New order for {restaurant.name} !!!!
+  </div>
+}
diff --git a/frontend/src/components/orders/ordersList/NewOrderButton.tsx b/frontend/src/components/orders/ordersList/NewOrderButton.tsx
@@ -7,6 +7,8 @@ import {useApiAccess} from "../../../utils/ApiAccessContext.tsx";
 import {useNotification} from "../../../utils/NotificationContext.tsx";
 import {RestaurantOrderable} from "../types.ts";
 import RestaurantAvatar from "../../restaurant/RestaurantAvatar.tsx";
+import {useDataModalDialog} from "../../../utils/DataModalDialogContext.tsx";
+import NewOrder from "./NewOrder.tsx";
 
 type NewOrderButtonProps = {
   restaurants: RestaurantOrderable[],
@@ -25,21 +27,29 @@ export default function NewOrderButton({restaurants, onChange}: NewOrderButtonPr
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
   const handleClose = () => setAnchorEl(null);
 
-  const handleRestaurantClick = useCallback((restaurant: Restaurant) => {
-    setIsLoading(true);
+  const {openDialog} = useDataModalDialog()
 
+  const handleRestaurantClick = useCallback(async (restaurant: Restaurant) => {
     handleClose()
 
-    orderApi.createOrder(restaurant.id)
-      .then(res => res.data)
-      .then(newOrder => {
-        notifySuccess("Neue Bestellung eröffnet")
-        onChange()
-        navigate({pathname: `/order/${newOrder.id}`});
-      })
-      .catch(e => notifyError("Konnte keine neue Order erstellen", e))
-      .finally(() => setIsLoading(false))
-  }, [navigate, onChange, orderApi, notifyError, notifySuccess]);
+    await openDialog({
+      content: <NewOrder restaurant={restaurant}      />,
+
+      onSuccess: () => {
+        setIsLoading(true);
+
+        orderApi.createOrder(restaurant.id)
+          .then(res => res.data)
+          .then(newOrder => {
+            notifySuccess("Neue Bestellung eröffnet")
+            onChange()
+            navigate({pathname: `/order/${newOrder.id}`});
+          })
+          .catch(e => notifyError("Konnte keine neue Order erstellen", e))
+          .finally(() => setIsLoading(false))
+      }
+    })
+  }, [openDialog, orderApi, notifySuccess, onChange, navigate, notifyError]);
 
   return <>
     <Button disabled={isLoading}

diff --git a/frontend/src/utils/DataModalDialogContext.tsx b/frontend/src/utils/DataModalDialogContext.tsx
@@ -0,0 +1,60 @@
+import {createContext, ReactNode, useContext, useState} from "react";
+import Dialog from "@mui/material/Dialog";
+import {DialogActions, DialogContent, DialogTitle} from "@mui/material";
+
+export type DialogOptions = {
+  title?: JSX.Element;
+  content: JSX.Element;
+  actions?: JSX.Element;
+
+  onSuccess?: () => void;
+}
+
+export type DialogContextType = {
+  openDialog: (options: DialogOptions) => Promise<unknown>;
+}
+
+const DataModalDialogContext = createContext<DialogContextType>({
+  openDialog: () => Promise.resolve(undefined),
+});
+
+export const useDataModalDialog = () => useContext(DataModalDialogContext);
+
+export const DataModalDialogProvider = ({children}: { children: ReactNode }) => {
+  const [options, setOptions] = useState<DialogOptions>()
+
+  const openDialog = (options: DialogOptions) => {
+    setOptions(options);
+
+    return Promise.resolve(undefined);
+  }
+
+  const handleClose = () => {
+    setOptions(undefined);
+  };
+
+  return <DataModalDialogContext.Provider value={{openDialog}}>
+    {children}
+
+    <Dialog open={!!options}
+            onClose={handleClose}>
+      {options?.title &&
+        <DialogTitle>
+          {options.title}
+        </DialogTitle>
+      }
+
+      {options?.content &&
+        <DialogContent>
+          {options.content}
+        </DialogContent>
+      }
+
+      {options?.actions &&
+        <DialogActions>
+          {options.actions}
+        </DialogActions>
+      }
+    </Dialog>
+  </DataModalDialogContext.Provider>
+}