From 03a8f760de41c1c133833ff86912d9d93b72551c Mon Sep 17 00:00:00 2001
From: raduwen <raduwen@gmail.com>
Date: Mon, 11 Oct 2021 08:08:35 +0900
Subject: [PATCH 1/3] chore: remove debug print

---
 src/components/TimeWidget/editor.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TimeWidget/editor.tsx b/src/components/TimeWidget/editor.tsx
index ca35e2aa..69eb720e 100644
--- a/src/components/TimeWidget/editor.tsx
+++ b/src/components/TimeWidget/editor.tsx
@@ -32,7 +32,6 @@ const FormGroup = styled.div`
 class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
   constructor(props: Props) {
     super(props);
-    console.log(props);
     this.state = this.props.props;
     this.save = this.save.bind(this);
     this.delete = this.delete.bind(this);

From a58354d16e497cf366f0e98f6b01b2c80b10c721 Mon Sep 17 00:00:00 2001
From: raduwen <raduwen@gmail.com>
Date: Mon, 11 Oct 2021 08:09:03 +0900
Subject: [PATCH 2/3] chore: remove unused page

---
 src/pages/preview/index.tsx | 48 -------------------------------------
 1 file changed, 48 deletions(-)
 delete mode 100644 src/pages/preview/index.tsx

diff --git a/src/pages/preview/index.tsx b/src/pages/preview/index.tsx
deleted file mode 100644
index 0dfc53ac..00000000
--- a/src/pages/preview/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import { ref, onValue, DataSnapshot } from '@firebase/database';
-
-import { db } from '@/lib/firebase';
-import { TextWidget } from '@/components/TextWidget';
-import { TimeWidget } from '@/components/TimeWidget';
-import { IFrameWidget } from '@/components/IFrameWidget';
-
-const Widgets = {
-  'text': TextWidget,
-  'time': TimeWidget,
-  'iframe': IFrameWidget,
-};
-
-type Widget = {
-  name: string;
-  props: any;
-}
-
-type WidgetList = { [key: string]: Widget }
-
-const PreviewPage = () => {
-  const [widgets, setWidgets] = useState<WidgetList>({});
-  const profile = 'default';
-
-  useEffect(() => {
-    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
-    onValue(widgetsRef, (snap: DataSnapshot) => {
-      if (snap?.val()) {
-        setWidgets(snap.val());
-      }
-    });
-  }, []);
-
-  return (
-    <div>
-      {
-        Object.keys(widgets).map((id) => {
-          const widget: any = widgets[id];
-          const Widget = Widgets[widget.name];
-          return <Widget key={id} {...widget.props} />
-        })
-      }
-    </div>
-  );
-};
-
-export default PreviewPage;

From 613fa310d8e90ffff5788690d148048b1a856b9b Mon Sep 17 00:00:00 2001
From: raduwen <raduwen@gmail.com>
Date: Mon, 11 Oct 2021 08:53:05 +0900
Subject: [PATCH 3/3] feat: implements add and change current profile

---
 src/pages/admin/index.tsx | 130 +++++++++++++++++++++++++++++++-------
 1 file changed, 108 insertions(+), 22 deletions(-)

diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 22b3c4df..2ace1a1a 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -8,6 +8,7 @@ import {
   Toolbar,
   Menu,
   MenuItem,
+  Divider,
   Typography,
   Button,
   IconButton,
@@ -15,15 +16,14 @@ import {
   InputLabel,
   TextField,
   Select,
-  Backdrop,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  Fade,
 } 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 { User } from '@firebase/auth';
 import { ref, set, onValue, DataSnapshot } from '@firebase/database';
@@ -56,6 +56,9 @@ const useStyles = makeStyles((theme) => ({
   title: {
     flexGrow: 1,
   },
+  profile: {
+    flexGrow: 1
+  },
 }));
 
 type Widget = {
@@ -65,18 +68,15 @@ type Widget = {
 
 type WidgetList = { [key: string]: Widget }
 
-const Widgets = () => {
+const Widgets = ({ profile }: { profile: string }) => {
   const [widgets, setWidgets] = useState<WidgetList>({});
-  const profile = 'default';
 
   useEffect(() => {
     const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
     onValue(widgetsRef, (snap: DataSnapshot) => {
-      if (snap?.val()) {
-        setWidgets(snap.val());
-      }
+      setWidgets(snap.val() || {});
     });
-  }, []);
+  }, [profile]);
 
   return (
     <div>
@@ -91,8 +91,7 @@ const Widgets = () => {
   );
 };
 
-const AddWidgetModel = ({ open, onClose }: { open: boolean, onClose: () => void }) => {
-  const profile = 'default';
+const AddWidgetDialog = ({ profile, open, onClose }: { profile: string, open: boolean, onClose: () => void }) => {
   const [widgetId, setWidgetId] = useState("");
   const [widgetType, setWidgetType] = useState("text");
 
@@ -158,6 +157,34 @@ const AddWidgetModel = ({ open, onClose }: { open: boolean, onClose: () => void
             name: widgetType,
             props: Editors[widgetType].defaultProps
           });
+
+          setWidgetId("");
+          setWidgetType("text");
+          onClose();
+        }}>Add</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+const AddProfileDialog = ({ open, onClose }: { open: boolean, onClose: () => void}) => {
+  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>
@@ -167,9 +194,15 @@ const AddWidgetModel = ({ open, onClose }: { open: boolean, onClose: () => void
 const AdminIndexPage = () => {
   const classes = useStyles();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [addWidgetModalOpened, setAddWidgetModalOpened] = useState(false);
-  const isUserMenuOpen = Boolean(anchorEl);
+  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 [currentProfile, setCurrentProfile] = useState('default');
+  const [profiles, setProfiles] = useState<string[]>([]);
+
+  const isUserMenuOpen = Boolean(userAnchorEl);
+  const isProfileMenuOpen = Boolean(profileAnchorEl);
 
   useEffect(() => {
     auth.onAuthStateChanged((user) => {
@@ -177,8 +210,18 @@ const AdminIndexPage = () => {
     });
   });
 
+  useEffect(() => {
+    const profilesRef = ref(db, `/profiles`);
+    onValue(profilesRef, (snap: DataSnapshot) => {
+      if (snap?.val()) {
+        setProfiles(Object.keys(snap.val()));
+      }
+    });
+  }, []);
+
   const signout = async () => {
-    setAnchorEl(null);
+    setUserAnchorEl(null);
+    setProfileAnchorEl(null);
     try {
       await auth.signOut();
     } catch (err) {
@@ -188,10 +231,18 @@ const AdminIndexPage = () => {
 
   const userMenuId = 'user-menu';
   const handleUserMenuOpen = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+    setUserAnchorEl(event.currentTarget);
   };
   const handleUserMenuClose = () => {
-    setAnchorEl(null);
+    setUserAnchorEl(null);
+  };
+
+  const profileMenuId = 'profile-menu';
+  const handleProfileMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setProfileAnchorEl(event.currentTarget);
+  };
+  const handleProfileMenuClose = () => {
+    setProfileAnchorEl(null);
   };
 
   return currentUser !== null ? (
@@ -203,12 +254,27 @@ const AdminIndexPage = () => {
             <Typography variant="h6" className={classes.title}>
               Admin
             </Typography>
+            <Typography variant="h6" className={classes.title}>
+              Profile:{' '}
+              {currentProfile}
+            </Typography>
             <Box sx={{ flexGrow: 1 }} />
             <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
               <IconButton
                 size="large"
                 color="inherit"
-                onClick={()=>{setAddWidgetModalOpened(true);}}
+                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>
@@ -218,6 +284,7 @@ const AdminIndexPage = () => {
                 edge="end"
                 aria-controls={userMenuId}
                 aria-haspopup="true"
+                aria-expanded={isUserMenuOpen ? 'true' : undefined}
                 onClick={handleUserMenuOpen}
                >
                 <AccountCircleIcon />
@@ -225,24 +292,43 @@ const AdminIndexPage = () => {
             </Box>
           </Toolbar>
         </AppBar>
+        <Menu
+          id={profileMenuId}
+          anchorEl={profileAnchorEl}
+          open={isProfileMenuOpen}
+          onClose={handleProfileMenuClose}
+        >
+          {profiles.map((profile) => (
+            <MenuItem key={profile} color="inherit" onClick={() => { setCurrentProfile(profile); }}>{profile}</MenuItem>
+          ))}
+          <Divider />
+          <MenuItem color="inherit" onClick={() => { setAddProfileDialogOpened(true);}}>Add</MenuItem>
+        </Menu>
         <Menu
           id={userMenuId}
-          anchorEl={anchorEl}
+          anchorEl={userAnchorEl}
           open={isUserMenuOpen}
           onClose={handleUserMenuClose}
         >
           <MenuItem color="inherit" onClick={signout}>Logout</MenuItem>
         </Menu>
-        <AddWidgetModel
-          open={addWidgetModalOpened}
+        <AddProfileDialog
+          open={addProfileDialogOpened}
+          onClose={() => {
+            setAddProfileDialogOpened(false);
+          }}
+        />
+        <AddWidgetDialog
+          profile={currentProfile}
+          open={addWidgetDialogOpened}
           onClose={() => {
-            setAddWidgetModalOpened(false);
+            setAddWidgetDialogOpened(false);
           }}
         />
 
         <Container className={classes.content}>
           <Box my={4}>
-            <Widgets />
+            <Widgets profile={currentProfile} />
           </Box>
         </Container>
       </div>