refactor: service display

interapp-frontend/src/api/api_client.ts

@@ -26,11 +26,8 @@ export class APIClient {
         : `http://${process.env.BACKEND_HOST}:${process.env.BACKEND_PORT}/api`,
     });
     this.instance.interceptors.request.use((req) => {
-
-      if (this.config.useMultiPart) 
-        req.headers['Content-Type'] = 'multipart/form-data';
-      else
-        req.headers['Content-Type'] = 'application/json';
+      if (this.config.useMultiPart) req.headers['Content-Type'] = 'multipart/form-data';
+      else req.headers['Content-Type'] = 'application/json';
       return req;
     });
     if (this.config.useClient) {

interapp-frontend/src/app/announcements/page.tsx

@@ -5,61 +5,52 @@ import { useState, useEffect } from 'react';
 
 const handleFetch = async () => {
   const apiClient = new APIClient().instance;
-  const res = await apiClient.get('/announcement/all', {params: {page: 1, page_size: 100}});
+  const res = await apiClient.get('/announcement/all', { params: { page: 1, page_size: 100 } });
   return res.data;
-}
-
-
+};
 
 export default function AnnouncementsPage() {
-
   const [A, setA] = useState<FileList | null>(null);
   const [B, setB] = useState<any>(null);
 
-
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    const apiClient = new APIClient({useMultiPart: true}).instance; 
+    const apiClient = new APIClient({ useMultiPart: true }).instance;
     event.preventDefault();
     const formData = new FormData();
-    if (A) for (let i = 0; i < A.length; i++) {
-      formData.append('docs', A[i]);
-    }
+    if (A)
+      for (let i = 0; i < A.length; i++) {
+        formData.append('docs', A[i]);
+      }
     const body = {
-      'creation_date': new Date().toISOString(),
-      'title': 'test5',
-      'description': 'test',
-      'username': 'sebas'
-    }
+      creation_date: new Date().toISOString(),
+      title: 'test5',
+      description: 'test',
+      username: 'sebas',
+    };
     for (const [key, value] of Object.entries(body)) {
       formData.append(key, value);
     }
-    apiClient.post('/announcement', formData).then((res) => {
-      console.log(res);
-    }).catch((err) => {
-      console.log(err);
-    });
-  }
+    apiClient
+      .post('/announcement', formData)
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
 
   useEffect(() => {
     handleFetch().then((res) => setB(res));
   }, []);
 
-
-
-
   return (
     <>
       <form onSubmit={handleSubmit}>
-        <input type='file' accept='*' multiple onChange={(e) => setA(e.currentTarget.files)}/>
+        <input type='file' accept='*' multiple onChange={(e) => setA(e.currentTarget.files)} />
         <button type='submit'>Submit</button>
       </form>
-      <div>
-        {
-          JSON.stringify(B)
-        }
-
-      </div>
+      <div>{JSON.stringify(B)}</div>
     </>
-
   );
 }

interapp-frontend/src/app/services/AddService/AddService.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Group, NumberInput, TextInput, Textarea, Button } from '@mantine/core';
+import { Group, NumberInput, TextInput, Textarea, Button, TagsInput } from '@mantine/core';
 import { TimeInput } from '@mantine/dates';
 import { IconPlus } from '@tabler/icons-react';
 import { useForm } from '@mantine/form';
@@ -15,15 +15,16 @@ import UploadImage, { convertToBase64, allowedFormats } from '@components/Upload
 import './styles.css';
 import { Permissions } from '@/app/route_permissions';
 import { getAllUsernames } from '@api/utils';
-import PillsInputWithSearch from '@components/PillsInputWithSearch/PillsInputWithSearch';
 import { useRouter } from 'next/navigation';
 import { CreateServiceWithUsers } from '../types';
 
 const AddService = ({ alreadyServiceICUsernames }: { alreadyServiceICUsernames: string[] }) => {
   const { user } = useContext(AuthContext);
   const [opened, setOpened] = useState(false);
+
   const [allUsernames, setAllUsernames] = useState<string[]>([]);
   const [allValidServiceICUsernames, setAllValidServiceICUsernames] = useState<string[]>([]);
+
   const [loading, setLoading] = useState(false);
   const apiClient = new APIClient().instance;
   const router = useRouter();
@@ -58,15 +59,19 @@ const AddService = ({ alreadyServiceICUsernames }: { alreadyServiceICUsernames:
         if (!value) return false;
         return value.toString().length !== 8 && 'Invalid phone number';
       },
-      website: (value) => {
-        if (!value) return false;
-        return !value.includes('http') && 'Invalid website';
-      },
+
       end_time: (value, values) =>
         value <= values.start_time && 'End time must be after start time',
     },
   });
 
+  useEffect(() => {
+    if (!form.values.service_ic_username) return;
+    if (!form.values.usernames.includes(form.values.service_ic_username)) {
+      form.setFieldValue('usernames', [...form.values.usernames, form.values.service_ic_username]);
+    }
+  }, [form.values.service_ic_username]);
+
   const handleSubmit = async (data: CreateServiceWithUsers) => {
     setLoading(true);
     const serviceUsers = data.usernames;
@@ -185,18 +190,21 @@ const AddService = ({ alreadyServiceICUsernames }: { alreadyServiceICUsernames:
           </div>
 
           <SearchableSelect
-            defaultValue={''}
+            defaultValue={form.values.service_ic_username}
             allValues={allValidServiceICUsernames}
             onChange={(newServiceIc) => form.setFieldValue('service_ic_username', newServiceIc)}
             label='Service IC'
             required
           />
-          <PillsInputWithSearch
+
+          <TagsInput
             label='Service Users'
-            allValues={allUsernames}
-            onChange={(newServiceUsers) => form.setFieldValue('usernames', newServiceUsers)}
+            placeholder='Users that participate in this service regularly'
             required
+            data={allUsernames}
+            {...form.getInputProps('usernames')}
           />
+
           <Group gap={3} justify='center'>
             <Button onClick={() => setOpened(false)} variant='outline' color='red'>
               Cancel

interapp-frontend/src/app/services/EditService/EditService.tsx

@@ -75,10 +75,6 @@ const EditService = ({
         if (!value) return false;
         return value.toString().length !== 8 && 'Invalid phone number';
       },
-      website: (value) => {
-        if (!value) return false;
-        return !value.includes('http') && 'Invalid website';
-      },
       end_time: (value, values) =>
         value <= values.start_time && 'End time must be after start time',
     },

interapp-frontend/src/app/services/ServiceBox/ServiceBox.tsx

@@ -2,8 +2,8 @@
 import dynamic from 'next/dynamic';
 import { Service } from '../types';
 import { Suspense, memo } from 'react';
-import { Text, Title, Skeleton } from '@mantine/core';
-import { IconMail, IconPhoneCall, IconNetwork, IconCalendar, IconClock } from '@tabler/icons-react';
+import { Text, Title, Skeleton, Card, Image } from '@mantine/core';
+import { IconMail, IconPhoneCall, IconNetwork, IconClock } from '@tabler/icons-react';
 import APIClient from '@api/api_client';
 
 const ServiceBoxUsers = dynamic(() => import('../ServiceBoxUsers/ServiceBoxUsers'));
@@ -59,10 +59,6 @@ const ServiceBox = (service: Service & { alreadyServiceICUsernames: string[] })
     const added_users = service_users.filter((user) => !old_service_users.includes(user));
     const removed_users = old_service_users.filter((user) => !service_users.includes(user));
 
-    // sigh... this endpoint was originally not implemented at all, and i just thought to send multiple requests at once
-    // then i have to remind myself that this is not a hackathon and i can't just rush silly things like this
-    // i'm so tired
-
     const actions = [
       ...added_users.map((user) => {
         return { action: 'add', username: user };
@@ -95,10 +91,10 @@ const ServiceBox = (service: Service & { alreadyServiceICUsernames: string[] })
   };
 
   return (
-    <div className='service-box'>
+    <Card shadow='sm' padding='md' radius='md' className='service-box'>
       <div className='service-box-image-container'>
         <Suspense fallback={<Skeleton className='service-box-image-skeleton' />}>
-          <img
+          <Image
             src={service.promotional_image ?? '/placeholder-image.jpg'}
             alt={service.name}
             className='service-box-image'
@@ -133,39 +129,26 @@ const ServiceBox = (service: Service & { alreadyServiceICUsernames: string[] })
         </div>
 
         <div className='service-box-info-content'>
-          <div>
-            <Text className='service-box-info-title'>Contact Info:</Text>
-            <div className='service-box-info-content-inner'>
-              <IconMail size={20} />
-              <Text>{service.contact_email}</Text>
+          <IconClock className='service-box-icon' />
+          <Text>
+            {daysOfWeek[service.day_of_week]}{' '}
+            {roundTimeToMinutes(service.start_time) + ' - ' + roundTimeToMinutes(service.end_time)}
+          </Text>
+          <IconMail className='service-box-icon' />
+          <Text>{service.contact_email}</Text>
 
-              {service.contact_number && (
-                <>
-                  <IconPhoneCall size={20} />
-                  <Text>{service.contact_number}</Text>
-                </>
-              )}
-              {service.website && (
-                <>
-                  <IconNetwork size={20} />
-                  <Text>{service.website}</Text>
-                </>
-              )}
-            </div>
-          </div>
-          <div>
-            <Text className='service-box-info-title'>Service Info:</Text>
-            <div className='service-box-info-content-inner'>
-              <IconCalendar size={20} />
-              <Text>{daysOfWeek[service.day_of_week]}</Text>
-              <IconClock size={20} />
-              <Text>
-                {roundTimeToMinutes(service.start_time) +
-                  ' - ' +
-                  roundTimeToMinutes(service.end_time)}
-              </Text>
-            </div>
-          </div>
+          {service.contact_number && (
+            <>
+              <IconPhoneCall className='service-box-icon' />
+              <Text>{service.contact_number}</Text>
+            </>
+          )}
+          {service.website && (
+            <>
+              <IconNetwork className='service-box-icon' />
+              <Text>{service.website}</Text>
+            </>
+          )}
         </div>
         <ServiceBoxUsers
           service_id={service.service_id}
@@ -175,7 +158,7 @@ const ServiceBox = (service: Service & { alreadyServiceICUsernames: string[] })
           handleChangeServiceUsers={handleChangeServiceUsers}
         />
       </div>
-    </div>
+    </Card>
   );
 };
 

interapp-frontend/src/app/services/ServiceBox/styles.css

@@ -3,8 +3,6 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  border-radius: 7px;
-  border: 1px solid var(--mantine-color-dark-6);
 }
 
 .service-box-image {
@@ -14,8 +12,6 @@
 }
 
 .service-box-image-container {
-  border-radius: 7px 7px 0 0;
-  border-bottom: 1px solid var(--mantine-color-dark-6);
   width: 100%;
   height: 15rem;
   position: relative;
@@ -42,24 +38,37 @@
   flex-direction: column;
   align-items: center;
   margin-bottom: 0.5rem;
+  overflow: hidden;
 }
 
 .service-box-info-title {
   font-weight: bold;
   margin-bottom: 0.2rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: block;
+  overflow: hidden;
 }
 
 .service-box-info-content {
-  display: flex;
-  justify-content: space-around;
-  gap: 0.5rem;
-}
-
-.service-box-info-content-inner {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   column-gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.service-box-info-content > p {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.service-box-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--mantine-color-teal-6);
 }
 
 .service-box-info-content-inner > svg {