refactor: components

.gitignore

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

src/components/Preview/index.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+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 }
+
+type PreviewProps = {
+  profile: string;
+}
+
+const Preview = ({ profile }: PreviewProps) => {
+  const router = useRouter();
+  const [widgets, setWidgets] = useState<WidgetList>({});
+
+  useEffect(() => {
+    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
+    onValue(widgetsRef, (snap: DataSnapshot) => {
+      if (snap?.val()) {
+        setWidgets(snap.val());
+      }
+    });
+  }, [profile]);
+
+  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 { Preview };

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/components/admin/Navbar/index.tsx

@@ -10,7 +10,6 @@ import {
   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';
@@ -19,18 +18,11 @@ 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);
@@ -79,10 +71,10 @@ const Navbar = ({ profile }: NavbarProps) => {
     <>
       <AppBar position="static">
         <Toolbar>
-          <Typography variant="h6" className={classes.title}>
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
             Admin
           </Typography>
-          {profile && (<Typography variant="h6" className={classes.title}>
+          {profile && (<Typography variant="h6" sx={{ flexGrow: 1 }}>
             Profile:{' '}
             {profile}
           </Typography>)}

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

@@ -6,68 +6,14 @@ import {
   Container,
   Box,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles'
 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,
-};
-
-const useStyles = makeStyles((_) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100vh',
-    overflow: 'hidden',
-  },
-  content: {
-    flex: 1,
-    overflow: 'auto',
-  },
-}));
-
-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 classes = useStyles();
   const router = useRouter();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
 
@@ -88,14 +34,20 @@ const AdminIndexPage = () => {
         currentUser !== null ? (
           <AuthProvider>
             <CssBaseline />
-            <div className={classes.root}>
+            <Box sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              height: '100vh',
+              overflow: 'hidden',
+            }}>
               <Navbar profile={currentProfile} />
-              <Container className={classes.content}>
+              <Container sx={{ flex: 1, overflow: 'auto' }}>
                 <Box my={4}>
-                  <Widgets profile={currentProfile} />
+                  <Editors profile={currentProfile} />
                 </Box>
               </Container>
-            </div>
+            </Box>
           </AuthProvider>
         ) : (
           <Signin />

src/pages/admin/index.tsx

@@ -2,26 +2,15 @@ import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import {
   CssBaseline,
+  Box,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles'
 import { User } from '@firebase/auth';
 import { AuthProvider } from '@/lib/AuthProvider';
 import { auth } from '@/lib/firebase';
 import { Signin } from '@/components/admin/signin';
 import { Navbar } from '@/components/admin/Navbar';
 
-const useStyles = makeStyles((_) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100vh',
-    overflow: 'hidden',
-  },
-}));
-
 const AdminIndexPage = () => {
-  const classes = useStyles();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
 
   useEffect(() => {
@@ -39,9 +28,15 @@ const AdminIndexPage = () => {
         currentUser !== null ? (
           <AuthProvider>
             <CssBaseline />
-            <div className={classes.root}>
+            <Box sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              height: '100vh',
+              overflow: 'hidden',
+            }}>
               <Navbar />
-            </div>
+            </Box>
           </AuthProvider>
         ) : (
           <Signin />

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

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-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';
+import { Preview } from '@/components/Preview';
 
 const Widgets = {
   'text': TextWidget,
@@ -23,30 +21,14 @@ type WidgetList = { [key: string]: Widget }
 
 const PreviewPage = () => {
   const router = useRouter();
-  const profile = router.query.id;
-  const [widgets, setWidgets] = useState<WidgetList>({});
-
-  useEffect(() => {
-    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
-    onValue(widgetsRef, (snap: DataSnapshot) => {
-      if (snap?.val()) {
-        setWidgets(snap.val());
-      }
-    });
-  }, [profile]);
+  const profile = router.query.id as string;
 
   return (
     <>
       <Head>
         <title>{profile} - Raduwen OBS Widgets</title>
       </Head>
-      <div>{
-        Object.keys(widgets).map((id) => {
-          const widget: any = widgets[id];
-          const Widget = Widgets[widget.name];
-          return <Widget key={id} {...widget.props} />
-        })
-      }</div>
+      <Preview profile={profile} />
     </>
   );
 };