feat: can create and join channels (#23)

ping-neo-meo-pong · Dec 14, 2022 · a2c4a6f · a2c4a6f
1 parent 249dcea
commit a2c4a6f
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 16 deletions.
diff --git a/frontend/components/ChannelList.tsx b/frontend/components/ChannelList.tsx
@@ -16,9 +16,6 @@ export default function ChannelList({ channels }) {
           <ListItemButton
             key={channel.id}
           >
-            <ListItemAvatar>
-              <Avatar>P</Avatar>
-            </ListItemAvatar>
             <ListItemText primary={channel.channelName} />
           </ListItemButton>
         );

diff --git a/frontend/components/ChannelPanel.tsx b/frontend/components/ChannelPanel.tsx
@@ -8,10 +8,13 @@ import axios from 'axios';
 import ChannelList from './ChannelList';
 import JoinChannelDialog from './JoinChannelDialog';
 import CreateChannelDialog from './CreateChannelDialog';
+import PasswordDialog from './PasswordDialog';
 
 export default function ChannelPanel() {
   const [joinDialogOpen, setJoinDialogOpen] = useState<boolean>(false);
   const [createDialogOpen, setCreateDialogOpen] = useState<boolean>(false);
+  const [passwordDialogOpen, setPasswordDialogOpen] = useState<boolean>(false);
+  const [selectedChannel, setSelectedChannel] = useState(null);
   const [channels, setChannels] = useState([]);
 
   useEffect(() => getAndSetChannels(), []);
@@ -26,14 +29,23 @@ export default function ChannelPanel() {
       })
   }
 
-  function joinChannel(channelId: string) {
+  function joinChannelWithPassword(password: string) {
     axios
-      .post(`/server/api/channel/${channelId}`).
+      .post(
+        `/server/api/channel/${selectedChannel.id}`,
+        { password }
+      ).
       then((response) => getAndSetChannels())
       .catch((error) => {
         alert(error.response.data.message);
       });
+    setPasswordDialogOpen(false);
+  }
+
+  function onSelectChannelToJoin(channel) {
+    setSelectedChannel(channel);
     setJoinDialogOpen(false);
+    setPasswordDialogOpen(true);
   }
 
   function openCreateDialog() {
@@ -53,12 +65,18 @@ export default function ChannelPanel() {
       <JoinChannelDialog
         open={joinDialogOpen}
         onClose={() => setJoinDialogOpen(false)}
-        onSelect={joinChannel}
+        onSelect={onSelectChannelToJoin}
         onCreateNew={openCreateDialog}
       />
+      <PasswordDialog
+        open={passwordDialogOpen}
+        onClose={() => setPasswordDialogOpen(false)}
+        onSubmit={joinChannelWithPassword}
+      />
       <CreateChannelDialog
         open={createDialogOpen}
         onClose={() => setCreateDialogOpen(false)}
+        onSubmit={getAndSetChannels}
       />
     </Box>
   );

diff --git a/frontend/components/CreateChannelDialog.tsx b/frontend/components/CreateChannelDialog.tsx
@@ -1,10 +1,77 @@
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import CheckBox from '@mui/material/CheckBox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { useState } from 'react';
+import axios from 'axios';
+
+export default function CreateChannelDialog({ open, onClose, onSubmit }) {
+  const [name, setName] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [isPrivate, setIsPrivate] = useState<boolean>(false);
+
+  function submit() {
+    axios
+      .post(
+        "/server/api/channel",
+        {
+          channelName: name,
+          description,
+          password,
+          isPublic: !isPrivate
+        },
+      )
+      .then((response) => onSubmit())
+      .catch((error) => {
+      });
+    onClose();
+  }
 
-export default function CreateChannelDialog({ open, onClose }) {
   return (
-    <Dialog onClose={onClose} open={open}>
+    <Dialog open={open} onClose={onClose} fullWidth>
       <DialogTitle>Create new channel</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          label="Channel name"
+          fullWidth
+          required
+          onChange={(event) => setName(event.target.value)}
+        />
+        <TextField
+          margin="dense"
+          label="Channel description"
+          fullWidth
+          multiline
+          rows={8}
+          onChange={(event) => setDescription(event.target.value)}
+        />
+        <TextField
+          margin="dense"
+          label="Channel password"
+          fullWidth
+          name="password"
+          onChange={(event) => setPassword(event.target.value)}
+        />
+        <FormControlLabel
+          label="Set private"
+          control={<CheckBox onChange={() => {
+            console.log('CheckBox onChange');
+            setIsPrivate(!isPrivate);
+          }} />}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={submit}>Create</Button>
+      </DialogActions>
     </Dialog>
   );
 }
diff --git a/frontend/components/JoinChannelDialog.tsx b/frontend/components/JoinChannelDialog.tsx
@@ -26,15 +26,15 @@ export default function JoinChannelDialog({
       .catch((error) => {
         console.error(error);
       });
-  }, []);
+  }, [open]);
 
   return (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>Join new channel</DialogTitle>
       <List sx={{ pt: 0 }}>
         {channels.map((channel) => (
-          <ListItemButton onClick={() => onSelect(channel.id)} key={channel.id}>
-            <ListItemText primary={channel.name} />
+          <ListItemButton onClick={() => onSelect(channel)} key={channel.id}>
+            <ListItemText primary={channel.channelName} />
           </ListItemButton>
         ))}
         <ListItemButton onClick={onCreateNew}>

diff --git a/frontend/components/PasswordDialog.tsx b/frontend/components/PasswordDialog.tsx
@@ -0,0 +1,33 @@
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import { useState } from 'react';
+
+export default function PasswordDialog({ open, onClose, onSubmit }) {
+  const [password, setPassword] = useState('');
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>
+        Enter password
+      </DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          label="password"
+          fullWidth
+          variant="standard"
+          onChange={(event) => setPassword(event.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={() => onSubmit(password)}>Enter</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/frontend/pages/dm.tsx b/frontend/pages/dm.tsx
@@ -4,7 +4,7 @@ import axios from "axios";
 import { user_data } from "./login";
 import { dmSocket } from "../sockets/sockets";
 import Link from "next/link";
-import Layout from "../components/layout";
+import Layout from "../components/Layout";
 
 export default function Dm() {
   const router = useRouter();

diff --git a/frontend/pages/dm/[room_id].tsx b/frontend/pages/dm/[room_id].tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import { dmSocket } from "../../sockets/sockets";
 import { useSocketAuthorization } from "../../lib/socket";
 import { getLoginUser } from "../../lib/login";
-import Layout from "../../components/layout";
+import Layout from "../../components/Layout";
 
 export default function Dm() {
   useSocketAuthorization();

diff --git a/frontend/pages/game/[room_id].tsx b/frontend/pages/game/[room_id].tsx
@@ -16,7 +16,7 @@ import {
   draw_countDown2,
 } from "./sketch";
 import { getLoginUser } from "../../lib/login";
-import Layout from "../../components/layout";
+import Layout from "../../components/Layout";
 
 // Will only import `react-p5` on client-side
 const Sketch = dynamic(() => import("react-p5").then((mod) => mod.default), {

diff --git a/frontend/pages/matching.tsx b/frontend/pages/matching.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { user_data } from "./login";
 import { socket, useSocketAuthorization } from "../lib/socket";
 import { useEffect } from "react";
-import Layout from "../components/layout";
+import Layout from "../components/Layout";
 
 export default function matching() {
   useSocketAuthorization();

diff --git a/frontend/pages/profile/[user_name].tsx b/frontend/pages/profile/[user_name].tsx
@@ -4,7 +4,7 @@ import axios from "axios";
 import { user_data } from "../login";
 import { socket, useSocketAuthorization } from "../../lib/socket";
 import { logout, getLoginUser } from "../../lib/login";
-import Layout from "../../components/layout";
+import Layout from "../../components/Layout";
 import { Button } from "@mui/material";
 import {
   InviteModal,