refactor/remove unused code (#148)

* refactor: remove Preview component

* refactor: remove unused import

Author: raduwen

src/components/Preview/index.tsx

@@ -12,7 +12,7 @@ import {
   TextField,
   MenuItem,
 } from '@mui/material';
-import { ref, set, onValue } from '@firebase/database';
+import { ref, set } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import { EditorMap } from '@/components/widgets';
 

src/components/admin/Dialog/AddWidgetDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, MouseEvent } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Drawer,
   Toolbar,

src/components/admin/LeftSideNav/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { signInWithEmailAndPassword } from '@firebase/auth';

src/components/admin/SignInForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 import styled from 'styled-components';
 
 import { SignInForm } from "@/components/admin/SignInForm";

src/components/admin/signin.tsx

@@ -1,4 +1,4 @@
-import React, { VFC, CSSProperties } from 'react';
+import { VFC, CSSProperties } from 'react';
 import type { TextWidgetProps } from './types';
 
 const calcTextShadow = (weight, color) => {

src/components/widgets/TextWidget/widget.tsx

@@ -1,11 +1,11 @@
-import React, { CSSProperties } from 'react';
+import { Component, CSSProperties } from 'react';
 import type { TimeWidgetProps } from './types';
 
 interface TimeWidgetState {
   time: Date;
 };
 
-class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
+class TimeWidget extends Component<TimeWidgetProps, TimeWidgetState> {
   interval: NodeJS.Timer | null;
 
   constructor(props: TimeWidgetProps) {

src/components/widgets/TimeWidget/widget.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/material';
 import { User } from '@firebase/auth';
 import { AuthProvider } from '@/lib/AuthProvider';
-import { auth, db } from '@/lib/firebase';
+import { auth } from '@/lib/firebase';
 import { Signin } from '@/components/admin/signin';
 import { Navbar } from '@/components/admin/Navbar';
 import { LeftSideBar } from '@/components/admin/LeftSideNav';

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

@@ -7,9 +7,7 @@ import {
   Box,
   Typography,
   Stack,
-  Paper,
 } from '@mui/material';
-import { styled } from '@mui/material/styles';
 import { User } from '@firebase/auth';
 import { ref, onValue, DataSnapshot } from '@firebase/database';
 import { AuthProvider } from '@/lib/AuthProvider';

src/pages/admin/index.tsx

@@ -1,7 +1,46 @@
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { ref, onValue, DataSnapshot } from '@firebase/database';
 
-import { Preview } from '@/components/Preview';
+import { db } from '@/lib/firebase';
+import { PreviewMap } from '@/components/widgets';
+
+type Widget = {
+  name: string;
+  props: any;
+}
+
+type WidgetList = { [key: string]: Widget }
+
+type PreviewProps = {
+  profile: string;
+}
+
+const Preview = ({ profile }: PreviewProps) => {
+  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 = PreviewMap[widget.name];
+          return <Widget key={id} {...widget.props} />
+        })
+      }
+    </div>
+  );
+};
 
 const PreviewPage = () => {
   const router = useRouter();