Skip to content

Commit e667921

Browse files
raduwenraduwen
authored
refactor: comopnents (#115)
* refactor: split Preview component * refacor: use sx (remove makeStyles) at /admin * refacor: use sx (remove makeStyles) on admin navbar component * refacor: use sx (remove makeStyles) on /admin/[id] page * refactor: admin editors component
1 parent 254c75d commit e667921

File tree

7 files changed

+127
-105
lines changed

7 files changed

+127
-105
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ dist-ssr
66
*.local
77
.env
88
.next
9+
.DS_Store

‎src/components/Preview/index.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { useEffect, useState } from 'react';
2+
import { useRouter } from 'next/router';
3+
import { ref, onValue, DataSnapshot } from '@firebase/database';
4+
5+
import { db } from '@/lib/firebase';
6+
import { TextWidget } from '@/components/TextWidget';
7+
import { TimeWidget } from '@/components/TimeWidget';
8+
import { IFrameWidget } from '@/components/IFrameWidget';
9+
10+
const Widgets = {
11+
'text': TextWidget,
12+
'time': TimeWidget,
13+
'iframe': IFrameWidget,
14+
};
15+
16+
type Widget = {
17+
name: string;
18+
props: any;
19+
}
20+
21+
type WidgetList = { [key: string]: Widget }
22+
23+
type PreviewProps = {
24+
profile: string;
25+
}
26+
27+
const Preview = ({ profile }: PreviewProps) => {
28+
const router = useRouter();
29+
const [widgets, setWidgets] = useState<WidgetList>({});
30+
31+
useEffect(() => {
32+
const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
33+
onValue(widgetsRef, (snap: DataSnapshot) => {
34+
if (snap?.val()) {
35+
setWidgets(snap.val());
36+
}
37+
});
38+
}, [profile]);
39+
40+
return (
41+
<div>
42+
{
43+
Object.keys(widgets).map((id) => {
44+
const widget: any = widgets[id];
45+
const Widget = Widgets[widget.name];
46+
return <Widget key={id} {...widget.props} />
47+
})
48+
}
49+
</div>
50+
);
51+
};
52+
53+
export { Preview };

‎src/components/admin/Editors/index.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { useEffect, useState } from 'react';
2+
import { ref, onValue, DataSnapshot } from '@firebase/database';
3+
import { db } from '@/lib/firebase';
4+
import { TextWidgetEditor } from '@/components/TextWidget';
5+
import { TimeWidgetEditor } from '@/components/TimeWidget';
6+
import { IFrameWidgetEditor } from '@/components/IFrameWidget';
7+
8+
const EditorMap = {
9+
text: TextWidgetEditor,
10+
time: TimeWidgetEditor,
11+
iframe: IFrameWidgetEditor,
12+
};
13+
14+
type Widget = {
15+
name: string;
16+
}
17+
18+
type WidgetList = { [key: string]: Widget }
19+
20+
type EditorsProps = {
21+
profile: string;
22+
};
23+
24+
const Editors = ({ profile }: EditorsProps) => {
25+
const [widgets, setWidgets] = useState<WidgetList>({});
26+
27+
useEffect(() => {
28+
const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
29+
onValue(widgetsRef, (snap: DataSnapshot) => {
30+
setWidgets(snap.val() || {});
31+
});
32+
}, [profile]);
33+
34+
return (
35+
<div>
36+
{
37+
Object.keys(widgets).map((id) => {
38+
const widget: any = widgets[id];
39+
const Editor = EditorMap[widget.name];
40+
return <Editor key={`${profile}-${id}`} id={id} profile={profile} />
41+
})
42+
}
43+
</div>
44+
);
45+
};
46+
47+
export { Editors };

‎src/components/admin/Navbar/index.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
Typography,
1111
IconButton,
1212
} from '@mui/material';
13-
import { makeStyles } from '@mui/styles'
1413
import AddIcon from '@mui/icons-material/Add';
1514
import WidgetsIcon from '@mui/icons-material/Widgets';
1615
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
@@ -19,18 +18,11 @@ import { ref, onValue, DataSnapshot } from '@firebase/database';
1918
import { auth, db } from '@/lib/firebase';
2019
import { AddProfileDialog, AddWidgetDialog } from '@/components/admin/Dialog';
2120

22-
const useStyles = makeStyles((_) => ({
23-
title: {
24-
flexGrow: 1,
25-
},
26-
}));
27-
2821
type NavbarProps = {
2922
profile?: string;
3023
}
3124

3225
const Navbar = ({ profile }: NavbarProps) => {
33-
const classes = useStyles();
3426
const router = useRouter();
3527

3628
const [userAnchorEl, setUserAnchorEl] = useState<HTMLElement | null>(null);
@@ -79,10 +71,10 @@ const Navbar = ({ profile }: NavbarProps) => {
7971
<>
8072
<AppBar position="static">
8173
<Toolbar>
82-
<Typography variant="h6" className={classes.title}>
74+
<Typography variant="h6" sx={{ flexGrow: 1 }}>
8375
Admin
8476
</Typography>
85-
{profile && (<Typography variant="h6" className={classes.title}>
77+
{profile && (<Typography variant="h6" sx={{ flexGrow: 1 }}>
8678
Profile:{' '}
8779
{profile}
8880
</Typography>)}

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

Lines changed: 12 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,68 +6,14 @@ import {
66
Container,
77
Box,
88
} from '@mui/material';
9-
import { makeStyles } from '@mui/styles'
109
import { User } from '@firebase/auth';
11-
import { ref, onValue, DataSnapshot } from '@firebase/database';
1210
import { AuthProvider } from '@/lib/AuthProvider';
13-
import { auth, db } from '@/lib/firebase';
11+
import { auth } from '@/lib/firebase';
1412
import { Signin } from '@/components/admin/signin';
15-
import { TextWidgetEditor } from '@/components/TextWidget';
16-
import { TimeWidgetEditor } from '@/components/TimeWidget';
17-
import { IFrameWidgetEditor } from '@/components/IFrameWidget';
1813
import { Navbar } from '@/components/admin/Navbar';
19-
20-
const Editors = {
21-
text: TextWidgetEditor,
22-
time: TimeWidgetEditor,
23-
iframe: IFrameWidgetEditor,
24-
};
25-
26-
const useStyles = makeStyles((_) => ({
27-
root: {
28-
display: 'flex',
29-
flexDirection: 'column',
30-
width: '100%',
31-
height: '100vh',
32-
overflow: 'hidden',
33-
},
34-
content: {
35-
flex: 1,
36-
overflow: 'auto',
37-
},
38-
}));
39-
40-
type Widget = {
41-
name: string;
42-
}
43-
44-
type WidgetList = { [key: string]: Widget }
45-
46-
const Widgets = ({ profile }: { profile: string }) => {
47-
const [widgets, setWidgets] = useState<WidgetList>({});
48-
49-
useEffect(() => {
50-
const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
51-
onValue(widgetsRef, (snap: DataSnapshot) => {
52-
setWidgets(snap.val() || {});
53-
});
54-
}, [profile]);
55-
56-
return (
57-
<div>
58-
{
59-
Object.keys(widgets).map((id) => {
60-
const widget: any = widgets[id];
61-
const Editor = Editors[widget.name];
62-
return <Editor key={`${profile}-${id}`} id={id} profile={profile} />
63-
})
64-
}
65-
</div>
66-
);
67-
};
14+
import { Editors } from '@/components/admin/Editors';
6815

6916
const AdminIndexPage = () => {
70-
const classes = useStyles();
7117
const router = useRouter();
7218
const [currentUser, setCurrentUser] = useState<User | null>(null);
7319

@@ -88,14 +34,20 @@ const AdminIndexPage = () => {
8834
currentUser !== null ? (
8935
<AuthProvider>
9036
<CssBaseline />
91-
<div className={classes.root}>
37+
<Box sx={{
38+
display: 'flex',
39+
flexDirection: 'column',
40+
width: '100%',
41+
height: '100vh',
42+
overflow: 'hidden',
43+
}}>
9244
<Navbar profile={currentProfile} />
93-
<Container className={classes.content}>
45+
<Container sx={{ flex: 1, overflow: 'auto' }}>
9446
<Box my={4}>
95-
<Widgets profile={currentProfile} />
47+
<Editors profile={currentProfile} />
9648
</Box>
9749
</Container>
98-
</div>
50+
</Box>
9951
</AuthProvider>
10052
) : (
10153
<Signin />

‎src/pages/admin/index.tsx

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,15 @@ import { useEffect, useState } from 'react';
22
import Head from 'next/head';
33
import {
44
CssBaseline,
5+
Box,
56
} from '@mui/material';
6-
import { makeStyles } from '@mui/styles'
77
import { User } from '@firebase/auth';
88
import { AuthProvider } from '@/lib/AuthProvider';
99
import { auth } from '@/lib/firebase';
1010
import { Signin } from '@/components/admin/signin';
1111
import { Navbar } from '@/components/admin/Navbar';
1212

13-
const useStyles = makeStyles((_) => ({
14-
root: {
15-
display: 'flex',
16-
flexDirection: 'column',
17-
width: '100%',
18-
height: '100vh',
19-
overflow: 'hidden',
20-
},
21-
}));
22-
2313
const AdminIndexPage = () => {
24-
const classes = useStyles();
2514
const [currentUser, setCurrentUser] = useState<User | null>(null);
2615

2716
useEffect(() => {
@@ -39,9 +28,15 @@ const AdminIndexPage = () => {
3928
currentUser !== null ? (
4029
<AuthProvider>
4130
<CssBaseline />
42-
<div className={classes.root}>
31+
<Box sx={{
32+
display: 'flex',
33+
flexDirection: 'column',
34+
width: '100%',
35+
height: '100vh',
36+
overflow: 'hidden',
37+
}}>
4338
<Navbar />
44-
</div>
39+
</Box>
4540
</AuthProvider>
4641
) : (
4742
<Signin />

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

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { useEffect, useState } from 'react';
21
import Head from 'next/head';
32
import { useRouter } from 'next/router';
4-
import { ref, onValue, DataSnapshot } from '@firebase/database';
53

6-
import { db } from '@/lib/firebase';
74
import { TextWidget } from '@/components/TextWidget';
85
import { TimeWidget } from '@/components/TimeWidget';
96
import { IFrameWidget } from '@/components/IFrameWidget';
7+
import { Preview } from '@/components/Preview';
108

119
const Widgets = {
1210
'text': TextWidget,
@@ -23,30 +21,14 @@ type WidgetList = { [key: string]: Widget }
2321

2422
const PreviewPage = () => {
2523
const router = useRouter();
26-
const profile = router.query.id;
27-
const [widgets, setWidgets] = useState<WidgetList>({});
28-
29-
useEffect(() => {
30-
const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
31-
onValue(widgetsRef, (snap: DataSnapshot) => {
32-
if (snap?.val()) {
33-
setWidgets(snap.val());
34-
}
35-
});
36-
}, [profile]);
24+
const profile = router.query.id as string;
3725

3826
return (
3927
<>
4028
<Head>
4129
<title>{profile} - Raduwen OBS Widgets</title>
4230
</Head>
43-
<div>{
44-
Object.keys(widgets).map((id) => {
45-
const widget: any = widgets[id];
46-
const Widget = Widgets[widget.name];
47-
return <Widget key={id} {...widget.props} />
48-
})
49-
}</div>
31+
<Preview profile={profile} />
5032
</>
5133
);
5234
};

0 commit comments

Comments
 (0)