refactor: admin components (#114)

* refactor: split add Profile/Wdiget Dialog components

* refactor: split Navbar component

Author: raduwen

src/components/admin/Dialog/AddProfileDialog.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  FormControl,
+  TextField,
+  Button,
+} from '@mui/material';
+import { ref, set } from '@firebase/database';
+import { db } from '@/lib/firebase';
+
+type AddProfileDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+const AddProfileDialog = ({ open, onClose }: AddProfileDialogProps) => {
+  const [profileId, setProfileId] = useState("");
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Add Profile</DialogTitle>
+      <DialogContent>
+        <FormControl variant="standard">
+          <TextField required autoFocus fullWidth label="ID" value={profileId} variant="standard" onChange={(e) => { setProfileId(e.target.value); }} />
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button color="primary" variant="contained" onClick={() =>{
+          if (profileId.length > 0) {
+            set(ref(db, `/profiles/${profileId}/name`), profileId);
+            setProfileId("");
+            onClose();
+          }
+        }}>Add</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export { AddProfileDialog };
+export type { AddProfileDialogProps };

src/components/admin/Dialog/AddWidgetDialog.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  FormControl,
+  InputLabel,
+  Select,
+  Button,
+  TextField,
+  MenuItem,
+} from '@mui/material';
+import { ref, set, onValue } from '@firebase/database';
+import { db } from '@/lib/firebase';
+import { TextWidgetEditor } from '@/components/TextWidget';
+import { TimeWidgetEditor } from '@/components/TimeWidget';
+import { IFrameWidgetEditor } from '@/components/IFrameWidget';
+
+const Editors = {
+  text: TextWidgetEditor,
+  time: TimeWidgetEditor,
+  iframe: IFrameWidgetEditor,
+};
+
+type AddWidgetDialogProps = {
+ profile: string;
+ open: boolean;
+ onClose: () => void;
+};
+
+const AddWidgetDialog = ({ profile, open, onClose }: AddWidgetDialogProps) => {
+  const [widgetId, setWidgetId] = useState("");
+  const [widgetType, setWidgetType] = useState("text");
+
+  const FormGroup = styled.div`
+    display: flex;
+    margin-bottom: 1rem;
+    & > div {
+      fleprofilex-grow: 1;
+      margin-left: 0.25rem;
+    }
+  `;
+
+  const style = {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 640,
+    bgcolor: 'background.paper',
+    border: '1px solid #ddd',
+    borderRadius: '4px',
+    boxShadow: 24,
+    pt: 4,
+    px: 4,
+    pb: 3,
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+    >
+      <DialogTitle>Add Widget</DialogTitle>
+      <DialogContent>
+        <FormGroup>
+          <FormControl variant="standard">
+            <TextField autoFocus fullWidth label="ID" value={widgetId} variant="standard" onChange={(e) => { setWidgetId(e.target.value); }}/>
+          </FormControl>
+        </FormGroup>
+
+        <FormGroup>
+          <FormControl variant="standard">
+            <InputLabel id="widget-type-label">Widget</InputLabel>
+            <Select
+              labelId="widget-type-label"
+              id="widget-type"
+              value={widgetType}
+              label="Widget"
+              onChange={(e) => { setWidgetType(e.target.value); }}
+            >
+              <MenuItem value={"text"}>Text</MenuItem>
+              <MenuItem value={"time"}>Time</MenuItem>
+              <MenuItem value={"iframe"}>IFrame</MenuItem>
+            </Select>
+          </FormControl>
+        </FormGroup>
+      </DialogContent>
+      <DialogActions>
+        <Button color="primary" variant="contained" onClick={() => {
+          set(ref(db, `/profiles/${profile}/widgets/${widgetId}`), {
+            name: widgetType,
+            props: Editors[widgetType].defaultProps
+          });
+
+          setWidgetId("");
+          setWidgetType("text");
+          onClose();
+        }}>Add</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export { AddWidgetDialog };
+export type { AddWidgetDialogProps };

src/components/admin/Dialog/index.tsx

@@ -0,0 +1,4 @@
+export { AddProfileDialog } from './AddProfileDialog';
+export type { AddProfileDialogProps } from './AddProfileDialog';
+export { AddWidgetDialog } from './AddWidgetDialog';
+export type { AddWidgetDialogProps } from './AddWidgetDialog';

src/components/admin/Navbar/index.tsx

@@ -0,0 +1,161 @@
+import { useState, useEffect, MouseEvent } from 'react';
+import { useRouter } from 'next/router'
+import {
+  Box,
+  AppBar,
+  Toolbar,
+  Menu,
+  MenuItem,
+  Divider,
+  Typography,
+  IconButton,
+} from '@mui/material';
+import { makeStyles } from '@mui/styles'
+import AddIcon from '@mui/icons-material/Add';
+import WidgetsIcon from '@mui/icons-material/Widgets';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { ref, onValue, DataSnapshot } from '@firebase/database';
+
+import { auth, db } from '@/lib/firebase';
+import { AddProfileDialog, AddWidgetDialog } from '@/components/admin/Dialog';
+
+const useStyles = makeStyles((_) => ({
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+type NavbarProps = {
+  profile?: string;
+}
+
+const Navbar = ({ profile }: NavbarProps) => {
+  const classes = useStyles();
+  const router = useRouter();
+
+  const [userAnchorEl, setUserAnchorEl] = useState<HTMLElement | null>(null);
+  const [profileAnchorEl, setProfileAnchorEl] = useState<HTMLElement | null>(null);
+  const [addProfileDialogOpened, setAddProfileDialogOpened] = useState(false);
+  const [addWidgetDialogOpened, setAddWidgetDialogOpened] = useState(false);
+  const [profiles, setProfiles] = useState<string[]>([]);
+
+  const userMenuId = 'user-menu';
+  const handleUserMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setUserAnchorEl(event.currentTarget);
+  };
+  const handleUserMenuClose = () => {
+    setUserAnchorEl(null);
+  };
+
+  const profileMenuId = 'profile-menu';
+  const handleProfileMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setProfileAnchorEl(event.currentTarget);
+  };
+  const handleProfileMenuClose = () => {
+    setProfileAnchorEl(null);
+  };
+
+  const isUserMenuOpen = Boolean(userAnchorEl);
+  const isProfileMenuOpen = Boolean(profileAnchorEl);
+
+  const signout = async () => {
+    try {
+      await auth.signOut();
+    } catch (err) {
+      alert(err.message);
+    }
+  };
+
+  useEffect(() => {
+    const profilesRef = ref(db, `/profiles`);
+    onValue(profilesRef, (snap: DataSnapshot) => {
+      if (snap?.val()) {
+        setProfiles(Object.keys(snap.val()));
+      }
+    });
+  }, []);
+
+  return (
+    <>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" className={classes.title}>
+            Admin
+          </Typography>
+          {profile && (<Typography variant="h6" className={classes.title}>
+            Profile:{' '}
+            {profile}
+          </Typography>)}
+          <Box sx={{ flexGrow: 1 }} />
+          <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+            <IconButton
+              size="large"
+              color="inherit"
+              edge="end"
+              aria-controls={profileMenuId}
+              aria-haspopup="true"
+              aria-expanded={isProfileMenuOpen ? 'true' : undefined}
+              onClick={handleProfileMenuOpen}
+            >
+              <WidgetsIcon />
+            </IconButton>
+            <IconButton
+              size="large"
+              color="inherit"
+              onClick={()=>{setAddWidgetDialogOpened(true);}}
+            >
+              <AddIcon />
+            </IconButton>
+            <IconButton
+              size="large"
+              color="inherit"
+              edge="end"
+              aria-controls={userMenuId}
+              aria-haspopup="true"
+              aria-expanded={isUserMenuOpen ? 'true' : undefined}
+              onClick={handleUserMenuOpen}
+            >
+              <AccountCircleIcon />
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </AppBar>
+      <Menu
+        id={profileMenuId}
+        anchorEl={profileAnchorEl}
+        open={isProfileMenuOpen}
+        onClose={handleProfileMenuClose}
+      >
+        {profiles.map((profile) => (
+          <MenuItem key={profile} color="inherit" onClick={() => { router.push(`/admin/${profile}`); }}>{profile}</MenuItem>
+        ))}
+        <Divider />
+        <MenuItem color="inherit" onClick={() => { setAddProfileDialogOpened(true);}}>Add</MenuItem>
+      </Menu>
+      <Menu
+        id={userMenuId}
+        anchorEl={userAnchorEl}
+        open={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <MenuItem color="inherit" onClick={signout}>Logout</MenuItem>
+      </Menu>
+      <AddProfileDialog
+        open={addProfileDialogOpened}
+        onClose={() => {
+          setAddProfileDialogOpened(false);
+        }}
+      />
+      {profile && (<AddWidgetDialog
+        profile={profile}
+        open={addWidgetDialogOpened}
+        onClose={() => {
+          setAddWidgetDialogOpened(false);
+        }}
+      />)}
+    </>
+  );
+};
+
+export { Navbar };
+export type { NavbarProps };