refactor: admin editors component

Author: raduwen

.gitignore

@@ -6,3 +6,4 @@ dist-ssr
 *.local
 .env
 .next
+.DS_Store

src/components/admin/Editors/index.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { ref, onValue, DataSnapshot } from '@firebase/database';
+import { db } from '@/lib/firebase';
+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;
+}
+
+type WidgetList = { [key: string]: Widget }
+
+type EditorsProps = {
+  profile: string;
+};
+
+const Editors = ({ profile }: EditorsProps) => {
+  const [widgets, setWidgets] = useState<WidgetList>({});
+
+  useEffect(() => {
+    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
+    onValue(widgetsRef, (snap: DataSnapshot) => {
+      setWidgets(snap.val() || {});
+    });
+  }, [profile]);
+
+  return (
+    <div>
+      {
+        Object.keys(widgets).map((id) => {
+          const widget: any = widgets[id];
+          const Editor = EditorMap[widget.name];
+          return <Editor key={`${profile}-${id}`} id={id} profile={profile} />
+        })
+      }
+    </div>
+  );
+};
+
+export { Editors };

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

@@ -7,49 +7,11 @@ import {
   Box,
 } from '@mui/material';
 import { User } from '@firebase/auth';
-import { ref, onValue, DataSnapshot } from '@firebase/database';
 import { AuthProvider } from '@/lib/AuthProvider';
-import { auth, db } from '@/lib/firebase';
+import { auth } from '@/lib/firebase';
 import { Signin } from '@/components/admin/signin';
-import { TextWidgetEditor } from '@/components/TextWidget';
-import { TimeWidgetEditor } from '@/components/TimeWidget';
-import { IFrameWidgetEditor } from '@/components/IFrameWidget';
 import { Navbar } from '@/components/admin/Navbar';
-
-const Editors = {
-  text: TextWidgetEditor,
-  time: TimeWidgetEditor,
-  iframe: IFrameWidgetEditor,
-};
-
-type Widget = {
-  name: string;
-}
-
-type WidgetList = { [key: string]: Widget }
-
-const Widgets = ({ profile }: { profile: string }) => {
-  const [widgets, setWidgets] = useState<WidgetList>({});
-
-  useEffect(() => {
-    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
-    onValue(widgetsRef, (snap: DataSnapshot) => {
-      setWidgets(snap.val() || {});
-    });
-  }, [profile]);
-
-  return (
-    <div>
-      {
-        Object.keys(widgets).map((id) => {
-          const widget: any = widgets[id];
-          const Editor = Editors[widget.name];
-          return <Editor key={`${profile}-${id}`} id={id} profile={profile} />
-        })
-      }
-    </div>
-  );
-};
+import { Editors } from '@/components/admin/Editors';
 
 const AdminIndexPage = () => {
   const router = useRouter();
@@ -82,7 +44,7 @@ const AdminIndexPage = () => {
               <Navbar profile={currentProfile} />
               <Container sx={{ flex: 1, overflow: 'auto' }}>
                 <Box my={4}>
-                  <Widgets profile={currentProfile} />
+                  <Editors profile={currentProfile} />
                 </Box>
               </Container>
             </Box>