From 7b676b4fa2a3b3ccd07ea885a49fc1c08ebfe289 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <me@jeremyckahn.com>
Date: Wed, 6 Nov 2024 17:14:31 -0600
Subject: [PATCH] feat(ui): Community rooms (#372)

* chore(vim): disable eslint.experimental.useFlatConfig

https://github.com/neoclide/coc-eslint/issues/41#issuecomment-563879603

* feat(ui): implement community rooms

* feat(ui): remove old community room link

* feat(ui): improve room label
---
 .vim/coc-settings.json                   |  3 ++
 src/config/communityRooms.ts             | 10 ++++
 src/pages/About/About.tsx                |  4 --
 src/pages/Home/CommunityRoomSelector.tsx | 67 ++++++++++++++++++++++++
 src/pages/Home/Home.tsx                  |  7 ++-
 5 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 .vim/coc-settings.json
 create mode 100644 src/config/communityRooms.ts
 create mode 100644 src/pages/Home/CommunityRoomSelector.tsx

diff --git a/.vim/coc-settings.json b/.vim/coc-settings.json
new file mode 100644
index 0000000..b9db0bb
--- /dev/null
+++ b/.vim/coc-settings.json
@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": false
+}
diff --git a/src/config/communityRooms.ts b/src/config/communityRooms.ts
new file mode 100644
index 0000000..1367684
--- /dev/null
+++ b/src/config/communityRooms.ts
@@ -0,0 +1,10 @@
+export const communityRoomNames = [
+  'buy-and-sell',
+  'crypto',
+  'hacking',
+  'leaks',
+  'news',
+  'organize',
+  'politics',
+  'resist',
+]
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index 5331fc4..aca37fb 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -57,10 +57,6 @@ When you connect with a peer, Chitchatter automatically attempts to use [public-
 
 All public and private keys are generated locally. Your private key is never sent to any peer or server.
 
-##### Community rooms
-
-There is [a public list of community rooms](https://github.com/jeremyckahn/chitchatter/wiki/Chitchatter-Community-Rooms) that you can join to discuss various topics.
-
 ##### Conversation backfilling
 
 Conversation transcripts are erased from local memory as soon as you close the page or navigate away from the room. Conversations are only ever held in volatile memory and never persisted to any disk by Chitchatter.
diff --git a/src/pages/Home/CommunityRoomSelector.tsx b/src/pages/Home/CommunityRoomSelector.tsx
new file mode 100644
index 0000000..7de361f
--- /dev/null
+++ b/src/pages/Home/CommunityRoomSelector.tsx
@@ -0,0 +1,67 @@
+import { useState, SyntheticEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Autocomplete from '@mui/material/Autocomplete'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import { communityRoomNames } from 'config/communityRooms'
+
+export const CommunityRoomSelector = () => {
+  const navigate = useNavigate()
+  const [selectedRoom, setSelectedRoom] = useState<string | null>(null)
+
+  const handleRoomNameChange = (
+    _event: SyntheticEvent<Element, Event>,
+    roomName: string | null
+  ) => {
+    setSelectedRoom(roomName)
+  }
+
+  const handleJoinClick = () => {
+    navigate(`/public/${selectedRoom}`)
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel1-content"
+        id="panel1-header"
+        sx={{
+          fontWeight: 'bold',
+        }}
+      >
+        Community rooms
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography variant="body1">
+          You can also chat in a public community room. You'll be anonymous, but
+          be careful what information you choose to share.
+        </Typography>
+        <Box display="flex" mt={2} gap={1}>
+          <Autocomplete
+            disablePortal
+            options={communityRoomNames}
+            value={selectedRoom}
+            renderInput={params => <TextField {...params} label="Room" />}
+            onChange={handleRoomNameChange}
+            sx={{ flexGrow: 1 }}
+          />
+          <Button
+            variant="contained"
+            disabled={selectedRoom === null}
+            onClick={handleJoinClick}
+          >
+            Join
+          </Button>
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  )
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 3373725..2015440 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -22,6 +22,7 @@ import { Form, Main } from 'components/Elements'
 import Logo from 'img/logo.svg?react'
 
 import { EmbedCodeDialog } from './EmbedCodeDialog'
+import { CommunityRoomSelector } from './CommunityRoomSelector'
 
 const StyledLogo = styled(Logo)({})
 
@@ -100,7 +101,7 @@ export function Home({ userId }: HomeProps) {
           </Typography>
           <FormControl fullWidth>
             <TextField
-              label="Room name (generated client-side)"
+              label="Room name (generated on your device)"
               variant="outlined"
               value={roomName}
               onChange={handleRoomNameChange}
@@ -162,6 +163,10 @@ export function Home({ userId }: HomeProps) {
         </Form>
       </Main>
       <Divider sx={{ my: 2 }} />
+      <Box maxWidth={theme.breakpoints.values.sm} mx="auto" px={2}>
+        <CommunityRoomSelector />
+      </Box>
+      <Divider sx={{ my: 2 }} />
       <Box
         sx={{
           maxWidth: theme.breakpoints.values.sm,