Joining existing group / leaving group FE functionality

client/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.3",
+  "version": "1.1.4",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0bsGuxRgS5/cSnoPznlD7Wf09ouEtlf06G7N+FtVrw0LFurO3uOQIkxXIRwFN4uxOPdEjjNNZK/82VGdxo/PUGWH013DsZaFho2CvvpByn/hqlqfhhw8NqqyaGfIz369Tg1VOOY6p4qbXOydj9AH0eQrvcPUm5LjEv0sqEqzyKBMmJnjt5M5WFvOOHaJnxIQv4qt0AeieM4MmohDWVOe5upTVj0m0I4eOXTvURrRXtH/yAYu3i5uDaTFR+bwpI7tMbBtMfHb5jcwSpmx7Lv6tnbpRwQqcVmbjeYivaxI2Oav6KwD8d1+wUS76gcml1Z6WzBgwvA6xDNv0qlXE3OnCQIDAQAB",
   "manifest_version": 3,
   "name": "Flatini",

client/src/App.tsx

@@ -13,6 +13,7 @@ import ErrorPage from "./views/ErrorPage";
 import Explore from "./views/Explore";
 import RedFlags from "./RedFlags";
 import AddRedFlag from "./AddRedFlag";
+import JoinGroup from "./views/JoinGroup";
 
 function App() {
   const navigate = useNavigate();
@@ -131,6 +132,7 @@ function App() {
       <>
         <Routes>
           <Route path="/" element={<CreateGroup />} />
+          <Route path="/JoinGroup" element={<JoinGroup />} />
         </Routes>
       </>
     );

client/src/context/AppProvider.tsx

@@ -39,6 +39,7 @@ interface AppContextType {
   setAppHasError: any;
   activeFlatData: any;
   setActiveFlatData: any;
+  leaveGroup: () => void;
 }
 
 export type Group = {
@@ -271,6 +272,12 @@ const AppProvider = (props: Props) => {
     };
   };
 
+  const leaveGroup = () => {
+    // TODO: add leave group endpoint
+    setUserHasGroup(false);
+    setGroupId(null);
+  };
+
   return (
     <AppContext.Provider
       value={{
@@ -301,6 +308,7 @@ const AppProvider = (props: Props) => {
         setAppHasError,
         activeFlatData,
         setActiveFlatData,
+        leaveGroup,
       }}
     >
       {props.children}

client/src/utils/resources.ts

@@ -142,6 +142,21 @@ export const _addRedFlag = async (
   return res.data;
 };
 
+export const _joinExistingGroup = async (token: string, code: string) => {
+  const config = {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+
+  const res = (await axios.post(
+    `/participants?code=${code}`,
+    {},
+    config
+  )) as AxiosResponse;
+  return res.data;
+};
+
 export const _voteRedFlag = async (
   token: string,
   redFlagId: string,

client/src/views/CreateGroup.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled, { useTheme } from "styled-components";
 import { useProvider } from "../context/AppProvider";
 import { Button, Logo, Text, TextTypes } from "flatini-fe-library";
+import { useNavigate } from "react-router-dom";
 
 const Wrapper = styled.div`
   position: fixed;
@@ -23,6 +24,7 @@ const Content = styled.div`
 const CreateGroup = () => {
   const theme = useTheme();
   const { createGroup } = useProvider();
+  const navigate = useNavigate();
 
   return (
     <Wrapper>
@@ -42,12 +44,24 @@ const CreateGroup = () => {
           Ask the group leader to invite you and you will be able to join from
           here.
         </Text>
-        <div>
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+          }}
+        >
           <Button
-            style={{ maxWidth: "100%" }}
+            style={{ width: "100%" }}
             onClick={createGroup}
             label="Create group"
           />
+          <Button
+            style={{ width: "100%", background: "transparent", color: "white" }}
+            onClick={() => navigate("/JoinGroup")}
+            label="Join existing group"
+          />
         </div>
       </Content>
     </Wrapper>

client/src/views/JoinGroup.tsx

@@ -0,0 +1,105 @@
+import { Button, InputText, Text, TextTypes } from "flatini-fe-library";
+import React, { useState } from "react";
+import styled from "styled-components";
+import { _joinExistingGroup } from "../utils/resources";
+import { useProvider } from "../context/AppProvider";
+import { AxiosError } from "axios";
+import { FaArrowLeft } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+const Wrapper = styled.div`
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: left;
+  padding: 50px 20px;
+  gap: 2rem;
+  background: #0b0708;
+  color: white;
+`;
+
+const ErrorWrapper = styled.div`
+  background: #e47020;
+  padding: 1rem;
+  border-radius: 0.5rem;
+`;
+
+const JoinGroup = () => {
+  const [code, setCode] = useState<string | null>(null);
+  const [error, setError] = useState<string | boolean>(false);
+  const { userAuthToken } = useProvider();
+  const navigate = useNavigate();
+
+  return (
+    <Wrapper>
+      <div
+        onClick={() => navigate("/")}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.5rem",
+          cursor: "pointer",
+          opacity: 0.7,
+        }}
+      >
+        <FaArrowLeft />
+        <Text type={TextTypes.paragraph}>Back</Text>
+      </div>
+      <Text type={TextTypes.title}>Join existing group</Text>
+      <Text type={TextTypes.paragraph}>
+        Enter the code’s group to join it. Ask a member of the group to send you
+        an invite code.
+      </Text>
+      <InputText
+        name="text"
+        placeholder="Enter the group code..."
+        style={{ width: "100%" }}
+        onChange={(value) => {
+          setCode(value);
+        }}
+      />
+      <Button
+        style={{ width: "100%" }}
+        onClick={async () => {
+          try {
+            await _joinExistingGroup(userAuthToken, code as string);
+            window.location.reload();
+          } catch (err) {
+            if ((err as AxiosError)?.response?.status === 404) {
+              setError(
+                "That group doesn't exist. Please try again with a valid code."
+              );
+            }
+
+            if ((err as AxiosError)?.response?.status === 500) {
+              setError(
+                "There's been a server error. Please make sure you're entering a valid group code."
+              );
+            }
+
+            if ((err as any)?.response?.status === 400) {
+              setError(
+                "You are already in that group! Reload the extension and try again."
+              );
+            }
+          }
+        }}
+        label="Join group"
+      />
+      {error ? (
+        <ErrorWrapper>
+          <Text type={TextTypes.paragraph}>{error}</Text>
+        </ErrorWrapper>
+      ) : null}
+    </Wrapper>
+  );
+};
+
+export default JoinGroup;

client/src/views/Participants.tsx

@@ -6,6 +6,7 @@ import { FaCheck } from "react-icons/fa";
 import { flatiniAuthWebsite } from "../utils/constants";
 import { Button, Text, TextTypes } from "flatini-fe-library";
 import UserCircle from "../components/UserCircle";
+import { useNavigate } from "react-router-dom";
 
 const Wrapper = styled.div`
   display: flex;
@@ -17,7 +18,8 @@ const AddMembers = styled.div``;
 
 const Participants = () => {
   const [shareCode, setShareCode] = useState(null);
-  const { getGroupShareCode, participants } = useProvider();
+  const { getGroupShareCode, participants, leaveGroup } = useProvider();
+  const navigate = useNavigate();
 
   const copyToClipboard = async () => {
     if (shareCode) {
@@ -67,7 +69,9 @@ const Participants = () => {
           })}
         </ul>
         <AddMembers>
-          <div>
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
+          >
             <Button
               onClick={async () => {
                 setShareCode(await getGroupShareCode());
@@ -97,6 +101,19 @@ const Participants = () => {
                 </div>
               </div>
             ) : null}
+            <div
+              onClick={() => {
+                leaveGroup();
+                navigate("/");
+              }}
+            >
+              <Text
+                type={TextTypes.paragraph}
+                style={{ textAlign: "center", cursor: "pointer" }}
+              >
+                Leave group
+              </Text>
+            </div>
           </div>
         </AddMembers>
       </Wrapper>