feat: prepare profile (#107)

Author: raduwen

src/components/IFrameWidget/editor.tsx

@@ -10,6 +10,7 @@ import {
 import type { IFrameWidgetProps } from './types';
 
 type Props = {
+  profile: string;
   id: string;
   props: IFrameWidgetProps;
 };
@@ -33,13 +34,13 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
-    set(ref(db, `/widgets/${this.props.id}/props`), this.state);
+    set(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}/props`), this.state);
   }
 
   delete(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
     if (confirm('本当に削除してよろしいですか?')) {
-      set(ref(db, `/widgets/${this.props.id}`), null);
+      set(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}`), null);
     }
   }
 

src/components/TextWidget/editor.tsx

@@ -13,6 +13,7 @@ import { db } from '@/lib/firebase';
 import type { TextWidgetProps } from '@/components/TextWidget/types';
 
 type Props = {
+  profile: string;
   id: string;
   props: TextWidgetProps;
 };
@@ -93,13 +94,13 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
-    set(ref(db, `/widgets/${this.props.id}/props`), this.state);
+    set(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}/props`), this.state);
   }
 
   delete(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
     if (confirm('本当に削除してよろしいですか?')) {
-      set(ref(db, `/widgets/${this.props.id}`), null);
+      set(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}`), null);
     }
   }
 

src/components/TimeWidget/editor.tsx

@@ -12,6 +12,7 @@ import { db } from '@/lib/firebase';
 import type { TimeWidgetProps } from './types';
 
 type Props = {
+  profile: string;
   id: string;
   props: TimeWidgetProps;
 };
@@ -31,20 +32,21 @@ 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);
   }
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
-    set(ref(db, `/widgets/${this.props.id}/props`), this.state);
+    set(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}/props`), this.state);
   }
 
   delete(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
     if (confirm('本当に削除してよろしいですか?')) {
-      set(ref(db, `/widgets/${this.props.id}`), null);
+      set(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}`), null);
     }
   }
 

src/pages/admin/index.tsx

@@ -67,9 +67,10 @@ type WidgetList = { [key: string]: Widget }
 
 const Widgets = () => {
   const [widgets, setWidgets] = useState<WidgetList>({});
+  const profile = 'default';
 
   useEffect(() => {
-    const widgetsRef = ref(db, '/widgets');
+    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
     onValue(widgetsRef, (snap: DataSnapshot) => {
       if (snap?.val()) {
         setWidgets(snap.val());
@@ -83,14 +84,15 @@ const Widgets = () => {
         Object.keys(widgets).map((id) => {
           const widget: any = widgets[id];
           const Editor = Editors[widget.name];
-          return <Editor key={id} id={id} props={widget.props} />
+          return <Editor key={id} id={id} props={widget.props} profile={profile} />
         })
       }
     </div>
   );
 };
 
 const AddWidgetModel = ({ open, onClose }: { open: boolean, onClose: () => void }) => {
+  const profile = 'default';
   const [widgetId, setWidgetId] = useState("");
   const [widgetType, setWidgetType] = useState("text");
 
@@ -152,7 +154,7 @@ const AddWidgetModel = ({ open, onClose }: { open: boolean, onClose: () => void
       </DialogContent>
       <DialogActions>
         <Button color="primary" variant="contained" onClick={() => {
-          set(ref(db, `/widgets/${widgetId}`), {
+          set(ref(db, `/profiles/${profile}/widgets/${widgetId}`), {
             name: widgetType,
             props: Editors[widgetType].defaultProps
           });

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

@@ -0,0 +1,50 @@
+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 }
+
+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]);
+
+  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;

src/pages/preview/index.tsx

@@ -21,9 +21,10 @@ type WidgetList = { [key: string]: Widget }
 
 const PreviewPage = () => {
   const [widgets, setWidgets] = useState<WidgetList>({});
+  const profile = 'default';
 
   useEffect(() => {
-    const widgetsRef = ref(db, '/widgets');
+    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
     onValue(widgetsRef, (snap: DataSnapshot) => {
       if (snap?.val()) {
         setWidgets(snap.val());