From 70ebc2fa2cdf6eee04db5967ca465a151dfeaab2 Mon Sep 17 00:00:00 2001
From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com>
Date: Sun, 15 Dec 2024 11:38:56 +1100
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=91=AF=20list=20all=20societies,=20ad?=
 =?UTF-8?q?d=20basic=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          |  5 ++
 .../SettingsNavbar/SettingsNavbar.tsx         |  6 ++
 .../SearchSocieties/SearchSocieties.tsx       | 81 +++++++++++++++++++
 frontend/src/TextInput/TextInput.tsx          | 16 ++--
 4 files changed, 101 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7cecd74..72227ae 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -19,6 +19,7 @@ import GenerateOTP from './GenerateOTP/GenerateOTP';
 import VerifyOTP from './VerifyOTP/VerifyOTP';
 import { SocietyManagementPage } from './Settings/SettingsPage/SocietyManagementPage/SocietyManagementPage';
 import { CreateNewSocietyPage } from './Settings/SettingsPage/SocietyManagementPage/CreateNewSociety/CreateNewSociety';
+import { SearchSocietiesPage } from './Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties';
 
 function App() {
   const [user, setUser] = useState<User | null>(null);
@@ -100,6 +101,10 @@ function App() {
               <Route path="events/new" element={<CreateNewEventPage />} />
               <Route path="societies" element={<SocietyManagementPage />} />
               <Route path="societies/new" element={<CreateNewSocietyPage />} />
+              <Route
+                path="societies/search"
+                element={<SearchSocietiesPage />}
+              />
               <Route path="discord" element={<DiscordPage />} />
             </Route>
             <Route path="/unauthenticated" element={<Unauthenticated />} />
diff --git a/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx b/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx
index 6a4f85f..35ca6e5 100644
--- a/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx
+++ b/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx
@@ -2,6 +2,7 @@ import {
   CalendarIcon,
   FaceSmileIcon,
   KeyIcon,
+  MagnifyingGlassIcon,
   MegaphoneIcon,
   StarIcon,
   UserCircleIcon,
@@ -38,6 +39,11 @@ const rows: Row[][] = [
       name: 'Create a new society',
       to: '/settings/societies/new',
     },
+    {
+      icon: <MagnifyingGlassIcon />,
+      name: 'Join a society',
+      to: '/settings/societies/search',
+    },
   ],
   [
     {
diff --git a/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
new file mode 100644
index 0000000..0007453
--- /dev/null
+++ b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
@@ -0,0 +1,81 @@
+import { UserGroupIcon } from '@heroicons/react/24/outline';
+import Button from '../../../../Button/Button';
+import { ButtonIcons, ButtonVariants } from '../../../../Button/ButtonTypes';
+import { TextInput, TextOptions } from '../../../../TextInput/TextInput';
+import { SettingsPage } from '../../SettingsPage';
+import { useContext, useEffect, useState } from 'react';
+import {
+  Societies,
+  Society,
+  UserContext,
+} from '../../../../UserContext/UserContext';
+
+export const SearchSocietiesPage = () => {
+  const [societyName, setSocietyName] = useState('');
+  const [foundSocieties, setFoundSocieties] = useState([]);
+  const [success, setSuccess] = useState('');
+  const [error, setError] = useState('');
+  const { setSocieties } = useContext(UserContext);
+  useEffect(() => {
+    searchSocieties('');
+  }, []);
+
+  const searchSocieties = async (societyName: string) => {
+    const societies = await fetch('http://localhost:5180/societies', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+
+    const societiesJson = await societies.json();
+
+    if (societies.ok) {
+      setError('');
+      setFoundSocieties(societiesJson);
+      if (societyName) {
+        setFoundSocieties(
+          societiesJson.filter((society: Society) =>
+            society.name.toLowerCase().includes(societyName.toLowerCase())
+          )
+        );
+      }
+    } else {
+      setError(societiesJson.message);
+      setSuccess('');
+    }
+  };
+
+  return (
+    <SettingsPage
+      title="Join a society"
+      pageAbovePath="/settings/societies"
+      headerButtons={[
+        <TextInput
+          placeholder="Society name"
+          name="societyName"
+          type={TextOptions.Text}
+          onChange={(name) => setSocietyName(name)}
+          icon={<UserGroupIcon />}
+          error={error !== ''}
+          noMargin
+        />,
+        <Button
+          variant={ButtonVariants.Primary}
+          icon={ButtonIcons.Search}
+          type="button"
+          onClick={() => searchSocieties(societyName)}
+        />,
+      ]}
+    >
+      <ul>
+        {foundSocieties.map((society: Society) => (
+          <li key={society.id}>{society.name}</li>
+        ))}
+      </ul>
+      {error && <p>{error}</p>}
+      {success && <p>{success}</p>}
+    </SettingsPage>
+  );
+};
diff --git a/frontend/src/TextInput/TextInput.tsx b/frontend/src/TextInput/TextInput.tsx
index 94f8895..7a3d5b4 100644
--- a/frontend/src/TextInput/TextInput.tsx
+++ b/frontend/src/TextInput/TextInput.tsx
@@ -1,10 +1,10 @@
-import { ReactNode, useState, ChangeEvent } from "react";
-import classes from "./TextInput.module.css";
+import { ReactNode, useState, ChangeEvent } from 'react';
+import classes from './TextInput.module.css';
 
 export enum TextOptions {
-  Text = "text",
-  Password = "password",
-  Email = "email",
+  Text = 'text',
+  Password = 'password',
+  Email = 'email',
 }
 
 type TextInputProp = {
@@ -14,6 +14,7 @@ type TextInputProp = {
   onChange: React.Dispatch<React.SetStateAction<string>>;
   type: TextOptions;
   error: boolean;
+  noMargin?: boolean;
 };
 
 export function TextInput(props: TextInputProp) {
@@ -28,9 +29,10 @@ export function TextInput(props: TextInputProp) {
 
   return (
     <div
-      className={`${classes.container} ${focus ? classes.focus : ""} ${
-        props.error ? classes.error : ""
+      className={`${classes.container} ${focus ? classes.focus : ''} ${
+        props.error ? classes.error : ''
       }`}
+      style={{ marginBottom: props.noMargin ? '0' : '' }}
     >
       <input
         type={props.type}

From 98afa2a7612653ea5d626941704800964fa0f9ae Mon Sep 17 00:00:00 2001
From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com>
Date: Sun, 15 Dec 2024 11:43:00 +1100
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20basic=20styles=20for=20socie?=
 =?UTF-8?q?ty=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SearchSocieties/SearchSocieties.module.css | 11 +++++++++++
 .../SearchSocieties/SearchSocieties.tsx        | 18 +++++++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.module.css

diff --git a/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.module.css b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.module.css
new file mode 100644
index 0000000..8009195
--- /dev/null
+++ b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.module.css
@@ -0,0 +1,11 @@
+.societiesList {
+  list-style-type: none;
+}
+
+.societiesList li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  border-radius: 32px;
+}
diff --git a/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
index 0007453..c267324 100644
--- a/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
+++ b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
@@ -4,11 +4,8 @@ import { ButtonIcons, ButtonVariants } from '../../../../Button/ButtonTypes';
 import { TextInput, TextOptions } from '../../../../TextInput/TextInput';
 import { SettingsPage } from '../../SettingsPage';
 import { useContext, useEffect, useState } from 'react';
-import {
-  Societies,
-  Society,
-  UserContext,
-} from '../../../../UserContext/UserContext';
+import { Society, UserContext } from '../../../../UserContext/UserContext';
+import classes from './SearchSocieties.module.css';
 
 export const SearchSocietiesPage = () => {
   const [societyName, setSocietyName] = useState('');
@@ -69,9 +66,16 @@ export const SearchSocietiesPage = () => {
         />,
       ]}
     >
-      <ul>
+      <ul className={classes.societiesList}>
         {foundSocieties.map((society: Society) => (
-          <li key={society.id}>{society.name}</li>
+          <li key={society.id}>
+            <h2>{society.name}</h2>
+            <Button
+              variant={ButtonVariants.Secondary}
+              icon={ButtonIcons.Plus}
+              type="button"
+            />
+          </li>
         ))}
       </ul>
       {error && <p>{error}</p>}

From 67bbb0aac49c4c5bc5705a566a8a13502ec1837d Mon Sep 17 00:00:00 2001
From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com>
Date: Sun, 15 Dec 2024 13:14:43 +1100
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A5=82=20finish=20scuffed=20join=20so?=
 =?UTF-8?q?cieties=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SearchSocieties/SearchSocieties.tsx       | 107 ++++++++++++------
 1 file changed, 73 insertions(+), 34 deletions(-)

diff --git a/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
index c267324..c72f270 100644
--- a/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
+++ b/frontend/src/Settings/SettingsPage/SocietyManagementPage/SearchSocieties/SearchSocieties.tsx
@@ -1,35 +1,42 @@
-import { UserGroupIcon } from '@heroicons/react/24/outline';
-import Button from '../../../../Button/Button';
-import { ButtonIcons, ButtonVariants } from '../../../../Button/ButtonTypes';
-import { TextInput, TextOptions } from '../../../../TextInput/TextInput';
-import { SettingsPage } from '../../SettingsPage';
-import { useContext, useEffect, useState } from 'react';
-import { Society, UserContext } from '../../../../UserContext/UserContext';
-import classes from './SearchSocieties.module.css';
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+import Button from "../../../../Button/Button";
+import { ButtonIcons, ButtonVariants } from "../../../../Button/ButtonTypes";
+import { TextInput, TextOptions } from "../../../../TextInput/TextInput";
+import { SettingsPage } from "../../SettingsPage";
+import { useContext, useEffect, useState } from "react";
+import { Society, UserContext } from "../../../../UserContext/UserContext";
+import classes from "./SearchSocieties.module.css";
 
 export const SearchSocietiesPage = () => {
-  const [societyName, setSocietyName] = useState('');
+  const [societyName, setSocietyName] = useState("");
   const [foundSocieties, setFoundSocieties] = useState([]);
-  const [success, setSuccess] = useState('');
-  const [error, setError] = useState('');
-  const { setSocieties } = useContext(UserContext);
+  const [error, setError] = useState("");
+  const { societies, setSocieties } = useContext(UserContext);
   useEffect(() => {
-    searchSocieties('');
+    searchSocieties("");
   }, []);
 
   const searchSocieties = async (societyName: string) => {
-    const societies = await fetch('http://localhost:5180/societies', {
-      method: 'GET',
+    const allSocieties = await fetch("http://localhost:5180/societies", {
+      method: "GET",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
-      credentials: 'include',
+      credentials: "include",
     });
 
-    const societiesJson = await societies.json();
+    const societiesJson = await allSocieties.json();
 
-    if (societies.ok) {
-      setError('');
+    const userSocieties = await fetch("http://localhost:5180/user/societies", {
+      method: "GET",
+      credentials: "include",
+    });
+
+    const userSocietiesJson = await userSocieties.json();
+    setSocieties?.(userSocietiesJson);
+
+    if (allSocieties.ok) {
+      setError("");
       setFoundSocieties(societiesJson);
       if (societyName) {
         setFoundSocieties(
@@ -39,8 +46,27 @@ export const SearchSocietiesPage = () => {
         );
       }
     } else {
-      setError(societiesJson.message);
-      setSuccess('');
+      setError("Failed to fetch all societies.");
+    }
+  };
+
+  const joinSociety = async (society: Society) => {
+    const res = await fetch("http://localhost:5180/user/society/join", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify({ societyId: society.id }),
+    });
+
+    if (res.ok) {
+      setSocieties?.({
+        joined: [...(societies?.joined ?? []), society],
+        administering: societies?.administering ?? [],
+      });
+    } else {
+      alert("Failed to join society");
     }
   };
 
@@ -55,7 +81,7 @@ export const SearchSocietiesPage = () => {
           type={TextOptions.Text}
           onChange={(name) => setSocietyName(name)}
           icon={<UserGroupIcon />}
-          error={error !== ''}
+          error={error !== ""}
           noMargin
         />,
         <Button
@@ -67,19 +93,32 @@ export const SearchSocietiesPage = () => {
       ]}
     >
       <ul className={classes.societiesList}>
-        {foundSocieties.map((society: Society) => (
-          <li key={society.id}>
-            <h2>{society.name}</h2>
-            <Button
-              variant={ButtonVariants.Secondary}
-              icon={ButtonIcons.Plus}
-              type="button"
-            />
-          </li>
-        ))}
+        {foundSocieties.map(
+          (society: Society) =>
+            !societies?.administering.some(
+              (administeredSociety) => administeredSociety.name === society.name
+            ) && (
+              <li key={society.id}>
+                <h2>{society.name}</h2>
+                {!societies?.joined.some(
+                  (joinedSociety) => joinedSociety.name === society.name
+                ) ? (
+                  <Button
+                    variant={ButtonVariants.Secondary}
+                    icon={ButtonIcons.Plus}
+                    type="button"
+                    onClick={() => {
+                      joinSociety(society);
+                    }}
+                  />
+                ) : (
+                  <p>Already joined</p>
+                )}
+              </li>
+            )
+        )}
       </ul>
       {error && <p>{error}</p>}
-      {success && <p>{success}</p>}
     </SettingsPage>
   );
 };

From 1d418f31e048913a50b788776d5b2b67d6119fcc Mon Sep 17 00:00:00 2001
From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com>
Date: Sun, 15 Dec 2024 13:17:35 +1100
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=91=20improve=20register=20page=20?=
 =?UTF-8?q?ux?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/Login/Login.tsx       | 32 +++++++++++++++---------------
 frontend/src/Register/Register.tsx | 10 +++++++++-
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Login/Login.tsx b/frontend/src/Login/Login.tsx
index 65b4789..b0f657a 100644
--- a/frontend/src/Login/Login.tsx
+++ b/frontend/src/Login/Login.tsx
@@ -1,28 +1,28 @@
-import classes from './Login.module.css';
-import { AuthScreen } from '../AuthScreen/AuthScreen';
-import { TextInput, TextOptions } from '../TextInput/TextInput';
-import { UserCircleIcon } from '@heroicons/react/24/outline';
-import { LockClosedIcon } from '@heroicons/react/24/outline';
-import { useState, FormEvent, useContext } from 'react';
-import { Link } from 'react-router';
-import { errorHandler, AuthError } from '../errorHandler';
-import { UserContext, User } from '../UserContext/UserContext';
+import classes from "./Login.module.css";
+import { AuthScreen } from "../AuthScreen/AuthScreen";
+import { TextInput, TextOptions } from "../TextInput/TextInput";
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { LockClosedIcon } from "@heroicons/react/24/outline";
+import { useState, FormEvent, useContext } from "react";
+import { Link } from "react-router";
+import { errorHandler, AuthError } from "../errorHandler";
+import { UserContext, User } from "../UserContext/UserContext";
 
 export default function LoginPage() {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
   const [error, setError] = useState<AuthError | undefined>(undefined);
   const [success, setSuccess] = useState<string | undefined>(undefined);
   const { setUser } = useContext(UserContext);
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    const res = await fetch('http://localhost:5180/auth/login', {
-      method: 'POST',
+    const res = await fetch("http://localhost:5180/auth/login", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
-      credentials: 'include',
+      credentials: "include",
       body: JSON.stringify({
         username,
         password,
@@ -34,7 +34,7 @@ export default function LoginPage() {
       setError(errorHandler(json.error));
     } else if (setUser) {
       setError(undefined);
-      setSuccess('Logged in successfully! Redirecting...');
+      setSuccess("Logged in successfully! Redirecting...");
       setTimeout(() => {
         setUser(json as User);
       }, 1000);
diff --git a/frontend/src/Register/Register.tsx b/frontend/src/Register/Register.tsx
index ec79664..1435f86 100644
--- a/frontend/src/Register/Register.tsx
+++ b/frontend/src/Register/Register.tsx
@@ -4,7 +4,7 @@ import { TextInput, TextOptions } from "../TextInput/TextInput";
 import { AtSymbolIcon, UserCircleIcon } from "@heroicons/react/24/outline";
 import { LockClosedIcon } from "@heroicons/react/24/outline";
 import { useState, FormEvent } from "react";
-import { Link } from "react-router";
+import { Link, useNavigate } from "react-router";
 import { errorHandler, AuthError } from "../errorHandler";
 
 export default function RegisterPage() {
@@ -12,6 +12,9 @@ export default function RegisterPage() {
   const [password, setPassword] = useState("");
   const [email, setEmail] = useState("");
   const [error, setError] = useState<AuthError | undefined>(undefined);
+  const [success, setSuccess] = useState<string | undefined>(undefined);
+  const navigate = useNavigate();
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const res = await fetch("http://localhost:5180/auth/register", {
@@ -31,6 +34,10 @@ export default function RegisterPage() {
       setError(errorHandler(json.error));
     } else {
       setError(undefined);
+      setSuccess("Signed up successfully! Redirecting to login page...");
+      setTimeout(() => {
+        navigate("/login");
+      }, 1000);
     }
   }
 
@@ -76,6 +83,7 @@ export default function RegisterPage() {
         buttonText="Sign up"
         onSubmit={handleSubmit}
         error={error}
+        success={success}
       />
       <div className={classes.lower} />
     </main>