fix: retrieve props for each widget editor component (#112)

Author: raduwen

src/components/IFrameWidget/editor.tsx

@@ -1,18 +1,18 @@
 import React, { Component, MouseEvent } from 'react';
 import styled from 'styled-components';
-import { ref, set } from '@firebase/database';
+import { ref, set, onValue } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import {
   TextField,
   Button,
   Typography,
 } from '@mui/material';
 import type { IFrameWidgetProps } from './types';
+import { IFrameWidget } from './widget';
 
 type Props = {
   profile: string;
   id: string;
-  props: IFrameWidgetProps;
 };
 
 const FormGroup = styled.div`
@@ -27,7 +27,7 @@ const FormGroup = styled.div`
 class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
   constructor(props: Props) {
     super(props);
-    this.state = this.props.props;
+    this.state = IFrameWidgetEditor.defaultProps;
     this.save = this.save.bind(this);
     this.delete = this.delete.bind(this);
   }
@@ -44,6 +44,12 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
     }
   }
 
+  componentDidMount() {
+    onValue(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}/props`), (snap) => {
+      this.setState(snap.val());
+    });
+  }
+
   render() {
     return (
       <div>

src/components/TextWidget/editor.tsx

@@ -8,14 +8,13 @@ import {
 } from '@mui/material';
 import styled from 'styled-components';
 import { Property } from 'csstype';
-import { ref, set } from '@firebase/database';
+import { ref, set, onValue } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import type { TextWidgetProps } from '@/components/TextWidget/types';
 
 type Props = {
   profile: string;
   id: string;
-  props: TextWidgetProps;
 };
 
 const FormGroup = styled.div`
@@ -87,7 +86,7 @@ class Color {
 class TextWidgetEditor extends Component<Props, TextWidgetProps> {
   constructor(props: Props) {
     super(props);
-    this.state = this.props.props;
+    this.state = TextWidgetEditor.defaultProps;
     this.save = this.save.bind(this);
     this.delete = this.delete.bind(this);
   }
@@ -104,6 +103,12 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
     }
   }
 
+  componentDidMount() {
+    onValue(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}/props`), (snap) => {
+      this.setState(snap.val());
+    });
+  }
+
   render() {
     return (
       <div>

src/components/TimeWidget/editor.tsx

@@ -7,14 +7,13 @@ import {
   FormControlLabel,
   Checkbox,
 } from '@mui/material';
-import { ref, set } from '@firebase/database';
+import { ref, set, onValue } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import type { TimeWidgetProps } from './types';
 
 type Props = {
   profile: string;
   id: string;
-  props: TimeWidgetProps;
 };
 
 const FormGroup = styled.div`
@@ -32,7 +31,7 @@ const FormGroup = styled.div`
 class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
   constructor(props: Props) {
     super(props);
-    this.state = this.props.props;
+    this.state = TimeWidgetEditor.defaultProps;
     this.save = this.save.bind(this);
     this.delete = this.delete.bind(this);
   }
@@ -49,6 +48,12 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
     }
   }
 
+  componentDidMount() {
+    onValue(ref(db, `/profiles/${this.props.profile}/widgets/${this.props.id}/props`), (snap) => {
+      this.setState(snap.val());
+    });
+  }
+
   render() {
     return (
       <div>

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

@@ -64,7 +64,6 @@ const useStyles = makeStyles((theme) => ({
 
 type Widget = {
   name: string;
-  props: any;
 }
 
 type WidgetList = { [key: string]: Widget }
@@ -85,7 +84,7 @@ const Widgets = ({ profile }: { profile: string }) => {
         Object.keys(widgets).map((id) => {
           const widget: any = widgets[id];
           const Editor = Editors[widget.name];
-          return <Editor key={`${profile}-${id}`} id={id} props={widget.props} profile={profile} />
+          return <Editor key={`${profile}-${id}`} id={id} profile={profile} />
         })
       }
     </div>

src/pages/admin/index.tsx

@@ -93,7 +93,6 @@ const AdminIndexPage = () => {
   const [userAnchorEl, setUserAnchorEl] = useState<HTMLElement | null>(null);
   const [profileAnchorEl, setProfileAnchorEl] = useState<HTMLElement | null>(null);
   const [addProfileDialogOpened, setAddProfileDialogOpened] = useState(false);
-  const [currentProfile, setCurrentProfile] = useState('default');
   const [profiles, setProfiles] = useState<string[]>([]);
 
   const isUserMenuOpen = Boolean(userAnchorEl);
@@ -149,10 +148,6 @@ const AdminIndexPage = () => {
             <Typography variant="h6" className={classes.title}>
               Admin
             </Typography>
-            <Typography variant="h6" className={classes.title}>
-              Profile:{' '}
-              {currentProfile}
-            </Typography>
             <Box sx={{ flexGrow: 1 }} />
             <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
               <IconButton