feat: edit a widget (#146)

Author: raduwen

src/components/admin/LeftSideNav/index.tsx

@@ -4,24 +4,38 @@ import {
   Toolbar,
   List,
   ListItem,
-  ListItemText,
+  ListItemButton,
   Divider,
 } from '@mui/material';
 import { ref, onValue, DataSnapshot } from '@firebase/database';
 import { db } from '@/lib/firebase';
 
+type Widget = {
+  name: string;
+  id: string;
+};
+
 type LeftSideBarProps = {
   profile: string;
+  selectWidget: ({ id, name }: Widget) => void;
 }
 
-const LeftSideBar = ({ profile }: LeftSideBarProps) => {
-  const [widgets, setWidgets] = useState<string[]>([]);
+const LeftSideBar = ({ profile, selectWidget }: LeftSideBarProps) => {
+  const [widgets, setWidgets] = useState<Widget[]>([]);
 
   useEffect(() => {
     const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
     onValue(widgetsRef, (snap: DataSnapshot) => {
       if (snap?.val()) {
-        setWidgets(Object.keys(snap.val()));
+        const widgets = snap.val();
+        setWidgets(
+          Object.entries(widgets).map((widget: any) => {
+            return {
+              name: widget[1].name,
+              id: widget[0],
+            };
+          })
+        );
       }
     });
   }, [profile]);
@@ -45,10 +59,10 @@ const LeftSideBar = ({ profile }: LeftSideBarProps) => {
       <Divider />
       <List>
         {widgets.map((widget) => (
-          <ListItem key={widget}>
-            <ListItemText>
-              <a href={`#${widget}`}>{widget}</a>
-            </ListItemText>
+          <ListItem key={widget.id}>
+            <ListItemButton onClick={() => { selectWidget(widget); }}>
+              {widget.id}
+            </ListItemButton>
           </ListItem>
         ))}
       </List>

src/pages/admin/[id]/index.tsx

@@ -8,23 +8,39 @@ import {
 } from '@mui/material';
 import { User } from '@firebase/auth';
 import { AuthProvider } from '@/lib/AuthProvider';
-import { auth } from '@/lib/firebase';
+import { auth, db } from '@/lib/firebase';
 import { Signin } from '@/components/admin/signin';
 import { Navbar } from '@/components/admin/Navbar';
 import { LeftSideBar } from '@/components/admin/LeftSideNav';
-import { Editors } from '@/components/admin/Editors';
+import { TextWidgetEditor } from '@/components/TextWidget';
+import { TimeWidgetEditor } from '@/components/TimeWidget';
+import { IFrameWidgetEditor } from '@/components/IFrameWidget';
+
+const EditorMap = {
+  text: TextWidgetEditor,
+  time: TimeWidgetEditor,
+  iframe: IFrameWidgetEditor,
+};
+
+type Widget = {
+  name: string;
+  id: string;
+}
 
 const AdminIndexPage = () => {
   const router = useRouter();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [currentWidget, setCurrentWidget] = useState<Widget | null>(null);
 
   const currentProfile = router.query.id as string;
 
   useEffect(() => {
     auth.onAuthStateChanged((user) => {
       setCurrentUser(user);
     });
-  });
+  }, []);
+
+  const Editor = currentWidget ? EditorMap[currentWidget.name] : null;
 
   return (
     <>
@@ -50,10 +66,15 @@ const AdminIndexPage = () => {
                   flexDirection: 'row',
                 }}
               >
-                <LeftSideBar profile={currentProfile} />
+                <LeftSideBar
+                  profile={currentProfile}
+                  selectWidget={(widget) => {
+                    setCurrentWidget(widget);
+                  }}
+                />
                 <Box component="main">
                   <Container sx={{ pt: 4, flex: 1, overflow: 'auto' }}>
-                    <Editors profile={currentProfile} />
+                    {currentWidget && <Editor id={currentWidget.id} profile={currentProfile} />}
                   </Container>
                 </Box>
               </Box>