merge master (#406)

* feat: update docs (#400)

* feat(docs): update docs to reflect v2

* feat(docs): add setup guides for be/fe/app

* feat(backend): create and adopt `/api/rooms` endpoint for room data (#401)

* create `/api/rooms` endpoint for room data

* Remove name and flatten data in bookings endpoint

* Use new endpoints on room page

* Add rooms to search modal

* feat: use common folder for shared code (e.g. data types) (#402)

* chore: fix cd

* chore: fix backend.dockerfile

* feat: integrate with CSESoc GraphQL API (#403)

* Rewrite backend to use Hasura instead of timetable API

* Use additional data in frontend

* Please the linter

* Please the type checks

* Show buildings before status is loaded

* Add correct GraphQL endpoint

* New Building images

* fix: fix broken filters with new data

* feat: add filter for whether ID is required

* New Building images

---------

Co-authored-by: 3bobchen <83627389+3bobchen@users.noreply.github.com>

Author: francojreyes

.dockerignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+**/.pnp
+**/.pnp.js
+
+# testing
+**/coverage
+
+# next.js
+**/.next/
+**/out/
+
+# production
+**/build
+**/dist
+
+# misc
+**/.DS_Store
+**/*.pem
+
+# debug
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
+**/.pnpm-debug.log*
+
+# local env files
+**/.env.local
+**/.env.development.local
+**/.env.test.local
+**/.env.production.local
+
+# vercel
+**/.vercel
+
+# typescript
+**/*.tsbuildinfo

.github/workflows/docker.yml

@@ -46,10 +46,10 @@ jobs:
       - name: Build and push Docker image
         uses: docker/build-push-action@v4
         with:
-          context: ${{ matrix.context }}
+          context: .
           push: ${{ github.event_name != 'pull_request' }}
           platforms: linux/amd64
-          file: ${{ matrix.context }}/Dockerfile
+          file: ${{ matrix.context }}.dockerfile
           tags: |
             ghcr.io/csesoc/freerooms-${{ matrix.name }}:${{ github.sha }}
             ghcr.io/csesoc/freerooms-${{ matrix.name }}:latest

README.md

@@ -17,21 +17,38 @@ You can find a live build of Freerooms at [https://freerooms.csesoc.app](https:/
 
 - Check which rooms are free:
 
-<img src="docs/gallery.png" alt="Gallery" width="450px">
-<img src="docs/list.png" alt="Room List" width="450px">
+<img src="docs/browse.png" alt="Browse page" width="450px">
+
+- Sort and filter by a range of criteria:
+
+<img src="docs/sort.png" alt="Sort" width="150">
+<img src="docs/filter.png" alt="Filter" width="150px">
+
+- See which buildings around you have free rooms on the map:
+
+<img src="docs/map.png" alt="Map" width="450px">
 
 - See the timetable for each room:
 
 <img src="docs/timetable.png" alt="Room Timetable" width="450px">
 
+- Quickly search for specific buildings or rooms:
+
+<img src="docs/search.png" alt="Search modal" width="450px">
+
+
 ## Future Plans
 
 This project is rapidly expanding and our roadmap includes features such as:
 
-- **Map View**: Find and navigate to free rooms near you.
-- **Search, Sort and Filter**: Find the perfect room for your needs.
+- **Detailed Room Information**: Information such as a room's type, how to book it, and all its aliases.
+- **Society Bookings**: Use data about society bookings and other bookings besides scheduled classes.
 - **Mobile App**: Use Freerooms anytime, anywhere!
 
-# Our team
+# Local Setup
+
+See the [backend](backend), [frontend](frontend) and [app](app) directories for instructions on setting up and running Freerooms locally.
+
+# Our Team
 
 We are a team that is part of CSESoc Development. See [TEAM.md](./TEAM.md) for more information on the current and previous team that contributed to the development of Freerooms.

app/App.tsx

@@ -1,15 +1,15 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { getBuildings, getRooms } from './services/freerooms_api/endpoints';
-import { Room_Dictionary, Buildings } from './services/freerooms_api/api_types';
+import { Building, StatusResponse } from "@common/types";
 import RootNavigator from './screens/Root/root_navigator';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect, useState } from 'react';
 import { FreeRoomsAPIContext } from './contexts';
 
 export default function App() {
 
-	const [ buildings, setBuildings ] = useState<Buildings>([]);
-	const [ roomDict, setRoomDict ] = useState<Room_Dictionary>({});
+	const [ buildings, setBuildings ] = useState<Building[]>([]);
+	const [ roomDict, setRoomDict ] = useState<StatusResponse>({});
 	const handleRefresh = () => {};
 
 	useEffect(() => {

app/README.md

@@ -0,0 +1,21 @@
+# Freerooms Mobile App
+
+The Freerooms mobile app uses Expo
+
+## Installation Guide
+
+You can run the following command to install dependencies:
+```bash
+npm install
+```
+
+In order to open the app on your phone, you will also need to install the [Expo Go app](https://expo.dev/client).
+
+## Usage Guide
+You can run the app with the following command:
+
+```bash
+npm run start
+```
+
+This should generate a QR Code, which you scan with your phone to view the app. Make sure your phone is connected to the same WiFi as the machine that is running the server.

app/components/BuildingCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React from 'react';
 import { 
 	StyleSheet,
 	Text,
@@ -8,8 +8,17 @@ import {
 } from "react-native";
 
 import StatusIndicator from './StatusIndicator';
+import { BuildingStackScreenProps } from "../screens/types";
+import { StatusResponse } from "@common/types";
 
-const BuildingCard = ({ nav, name, id, rooms }) => {
+interface BuildingCardProps {
+  nav: BuildingStackScreenProps<"All Buildings">['navigation'],
+  name: string,
+  id: string,
+  rooms: StatusResponse
+}
+
+const BuildingCard: React.FC<BuildingCardProps> = ({ nav, name, id, rooms }) => {
 
 	const handlePress = (name: string, id : string ) => {
 		nav.navigate("Building", { buildingName: name , buildingId : id });

app/components/RoomCard.tsx

@@ -2,26 +2,32 @@ import {
 	StyleSheet,
 	Text,
 	View,
-	SafeAreaView,
-	ScrollView,
 	Pressable,
 } from "react-native";
 
 import Ionicons from '@expo/vector-icons/Ionicons';
+import React from "react";
+import { RoomStatus } from "@common/types";
+import { BuildingStackScreenProps } from "../screens/types";
 
+interface RoomCardProps {
+	nav: BuildingStackScreenProps<"Building">['navigation'],
+	roomNumber: string,
+	status: RoomStatus
+}
 
-const RoomCard = ({ nav, roomName, status, endtime }) => {
+const RoomCard: React.FC<RoomCardProps> = ({ nav, roomNumber, status }) => {
 
 	const handlePress = () => {
 		nav.navigate("Room");
 	}
 
-	const date = new Date(endtime);
-    const hoursMinutes = date.toLocaleTimeString("en-AU", {
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: true,
-    });
+	const date = new Date(status.endtime);
+	const hoursMinutes = date.toLocaleTimeString("en-AU", {
+		hour: "numeric",
+		minute: "2-digit",
+		hour12: true,
+	});
 
 	const roomStatusColor = {
 		free: "#2AA300",
@@ -43,7 +49,7 @@ const RoomCard = ({ nav, roomName, status, endtime }) => {
 		]}>
 			<View>
 				<Text style={styles.subHeading}>
-					{ roomName }
+					{ roomNumber }
 				</Text>
 			</View>
 			<View style={styles.textContainer}>
@@ -52,9 +58,9 @@ const RoomCard = ({ nav, roomName, status, endtime }) => {
 					paddingTop: 3.5,
 					fontSize: 17,
 					fontWeight: '600',
-					color: roomStatusColor[status],
+					color: roomStatusColor[status.status],
 				}}>
-					{roomStatusMessage[status]}
+					{roomStatusMessage[status.status]}
 				</Text>
 				<Ionicons name="chevron-forward-outline" size={25} color='grey' />
 			</View>

app/components/StatusDot.tsx

@@ -1,7 +1,11 @@
 import { View, StyleSheet } from 'react-native';
+import React from "react";
 
+interface StatusDotProps {
+    numRooms: number;
+}
 
-const StatusDot = ({numRooms}) => {
+const StatusDot: React.FC<StatusDotProps> = ({ numRooms }) => {
     const bg = numRooms >= 5 ? "green" : numRooms !== 0 ? "orange" : "red";
 
     return (

app/components/StatusIndicator.tsx

@@ -1,11 +1,15 @@
 import { View, Text, StyleSheet } from 'react-native';
-import { Rooms } from '../services/freerooms_api/api_types';
 import StatusDot from './StatusDot';
+import { BuildingStatus } from "@common/types";
+import React from "react";
 
-const StatusIndicator = ({rooms}) => {
-	const roomsOfCurrBuilding:Rooms = rooms;
-    const totalRooms:number = rooms ? Object.keys(roomsOfCurrBuilding).length : null;
-    const freeRooms:number = rooms ? Object.values(roomsOfCurrBuilding).filter(x => x.status == "free" ).length : null;
+interface StatusIndicatorProps {
+    rooms: BuildingStatus;
+}
+
+const StatusIndicator: React.FC<StatusIndicatorProps> = ({rooms}) => {
+    const totalRooms: number | null = rooms ? Object.keys(rooms).length : null;
+    const freeRooms: number | null = rooms ? Object.values(rooms).filter(x => x.status == "free" ).length : null;
 
     return (
         <View style={styles.container}>

app/contexts.tsx

@@ -1,9 +1,9 @@
 import { createContext } from "react";
-import type { Buildings, Room_Dictionary } from "./services/freerooms_api/api_types";
+import { Building, StatusResponse } from "@common/types";
 
 type ContextType = { 
-	buildings : Buildings;
-	rooms : Room_Dictionary,
+	buildings : Building[];
+	rooms : StatusResponse,
 	onRefresh : () => void;
 }
 

app/screens/Buildings/building.tsx

@@ -1,13 +1,11 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 import {
 	StyleSheet,
 	Text,
 	View,
 	SafeAreaView,
-	StatusBar,
 	ScrollView,
 	Pressable,
-	Button,
 } from "react-native";
 
 import type { BuildingStackScreenProps } from '../types';
@@ -46,7 +44,13 @@ export default function Building({ route, navigation } : BuildingStackScreenProp
 		<SafeAreaView style={ styles.container }>
 			<ScrollView style={ styles.scrollView }>
 				<View style={[styles.container, {paddingBottom: 20} ]}>
-					{ Object.keys(roomsOfCurrBuilding).map( (roomId, index) => <RoomCard key={index} nav={navigation} roomName={roomId} {...roomsOfCurrBuilding[roomId]} /> )}
+					{ Object.keys(roomsOfCurrBuilding).map( (roomNumber, index) =>
+						<RoomCard
+							key={index}
+							nav={navigation}
+							roomNumber={roomNumber}
+							status={roomsOfCurrBuilding[roomNumber]}
+						/> )}
 				</View>
 			</ScrollView>
 		</SafeAreaView>

app/screens/Buildings/building_list.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 import { 
 	StyleSheet,
-	Text,
 	View,
 	SafeAreaView,
 	ScrollView,
@@ -39,7 +38,13 @@ export default function BuildingList({ route, navigation } : BuildingStackScreen
 				<View style={ styles.container }>
 					<View style={ styles.textContainer }>
 					</View>
-					{ buildings.map((building, index) => <BuildingCard key={index} nav={navigation} rooms={rooms} {...building} /> )}
+					{ buildings.map((building, index) =>
+						<BuildingCard
+							key={index}
+							nav={navigation}
+							rooms={rooms}
+							{...building}
+						/> )}
 				</View>
 			</ScrollView>
 		</SafeAreaView>

app/services/freerooms_api/api_types.ts

@@ -1,6 +1,6 @@
 
 const config = {
-	domain: "https://freerooms.csesoc.app",
+	domain: "https://freerooms.staging.csesoc.unsw.edu.au",
 	endpoints: {
 		getBuildings: "/api/buildings",
 		getRooms: "/api/rooms/status",

app/services/freerooms_api/config.ts

@@ -1,24 +1,24 @@
-import type { Buildings, Room_Dictionary } from "./api_types";
+import { Building, BuildingsResponse, StatusResponse } from "@common/types";
 import config from "./config";
 
 const domain = config.domain;
-export async function getBuildings() : Promise<Buildings> {
+export async function getBuildings() : Promise<Building[]> {
 
 	const buildingsEndpoint = config.endpoints.getBuildings;
 
 	const url = `${domain}${buildingsEndpoint}`;
 
-	let buildings : Buildings = [];
+	let buildings : Building[] = [];
 	try {
 		const response = await fetch(url);
-		const data : { buildings : Buildings } = await response.json();
+		const data : BuildingsResponse = await response.json();
 		buildings = data.buildings;
 	} catch {}
 
 	return buildings;
 }
 
-export async function getRooms() : Promise<Room_Dictionary> {
+export async function getRooms() : Promise<StatusResponse> {
 
 	const roomsEndpoint = config.endpoints.getRooms;
 	const url = `${domain}${roomsEndpoint}`;