Add landing page link to logo

.github/workflows/formatting.yml

@@ -8,19 +8,19 @@ jobs:
     runs-on: ubuntu-latest
 
     permissions:
-      contents: write  # Required to push to the repo
+      contents: write # Required to push to the repo
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.head_ref }}  # Checkout PR branch
+          ref: ${{ github.head_ref }} # Checkout PR branch
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

README.md

@@ -10,6 +10,12 @@ To clone and run this application, [Node.js](https://nodejs.org/en/download/) (w
 npm install npm@latest -g
 ```
 
+### `.env` Setup
+
+Create a file called `.env` in the root directory, copying the contents of `example.env`.
+
+Replace all values in the file with the relevant information.
+
 ### Installation
 
 ```bash

app/_lib/availability/availability-reducer.tsx

@@ -0,0 +1,58 @@
+import { AvailabilitySet } from "./types";
+import { createEmptyUserAvailability, toggleUtcSlot } from "./utils";
+
+export interface AvailabilityState {
+  displayName: string;
+  timeZone: string;
+  userAvailability: AvailabilitySet;
+}
+
+export type AvailabilityAction =
+  | { type: "RESET_AVAILABILITY" }
+  | { type: "SET_DISPLAY_NAME"; payload: string }
+  | { type: "SET_TIME_ZONE"; payload: string }
+  | {
+      type: "TOGGLE_SLOT";
+      payload: { slot: string };
+    };
+
+// 3. Create the reducer function
+export function availabilityReducer(
+  state: AvailabilityState,
+  action: AvailabilityAction,
+): AvailabilityState {
+  switch (action.type) {
+    case "RESET_AVAILABILITY": {
+      return {
+        ...state,
+        userAvailability: createEmptyUserAvailability(),
+      };
+    }
+
+    case "SET_DISPLAY_NAME": {
+      return {
+        ...state,
+        displayName: action.payload,
+      };
+    }
+
+    case "SET_TIME_ZONE": {
+      return {
+        ...state,
+        timeZone: action.payload,
+      };
+    }
+
+    case "TOGGLE_SLOT": {
+      const { slot } = action.payload;
+      return {
+        ...state,
+        userAvailability: toggleUtcSlot(state.userAvailability, slot),
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

app/_lib/availability/types.tsx

@@ -0,0 +1,2 @@
+// a set containing ISO strings of selected UTC date-time slots
+export type AvailabilitySet = Set<string>;

app/_lib/availability/use-availability.tsx

@@ -0,0 +1,41 @@
+import { useReducer, useCallback } from "react";
+import { availabilityReducer, AvailabilityState } from "./availability-reducer";
+import { createEmptyUserAvailability } from "./utils";
+
+export function useAvailability(
+  initialDisplayName = "",
+  initialTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
+) {
+  const initialState: AvailabilityState = {
+    displayName: initialDisplayName,
+    timeZone: initialTimeZone,
+    userAvailability: createEmptyUserAvailability(),
+  };
+
+  const [state, dispatch] = useReducer(availabilityReducer, initialState);
+
+  // DISPATCHERS
+  const setDisplayName = useCallback((name: string) => {
+    dispatch({ type: "SET_DISPLAY_NAME", payload: name });
+  }, []);
+
+  const setTimeZone = useCallback((tz: string) => {
+    dispatch({ type: "SET_TIME_ZONE", payload: tz });
+  }, []);
+
+  const toggleSlot = useCallback((slot: string) => {
+    dispatch({ type: "TOGGLE_SLOT", payload: { slot } });
+  }, []);
+
+  const resetAvailability = useCallback(() => {
+    dispatch({ type: "RESET_AVAILABILITY" });
+  }, []);
+
+  return {
+    state,
+    setDisplayName,
+    setTimeZone,
+    toggleSlot,
+    resetAvailability,
+  };
+}

app/_lib/availability/utils.tsx

@@ -0,0 +1,55 @@
+// app/_lib/availability.ts
+
+import { fromZonedTime } from "date-fns-tz";
+import { AvailabilitySet } from "@/app/_lib/availability/types";
+
+// Creates an empty UserAvailability object
+export const createEmptyUserAvailability = (): AvailabilitySet => {
+  return new Set<string>();
+};
+
+// Toggles a single time slot in the user's availability
+export function toggleUtcSlot(
+  prev: AvailabilitySet,
+  timeSlot: string, // ISO string
+): AvailabilitySet {
+  const updated = new Set(prev);
+  if (updated.has(timeSlot)) {
+    updated.delete(timeSlot);
+  } else {
+    updated.add(timeSlot);
+  }
+  return updated;
+}
+
+// Checks if a specific time slot is in the user's availability
+export function isSlotSelected(
+  availability: AvailabilitySet,
+  timeSlot: Date,
+): boolean {
+  return availability.has(timeSlot.toISOString());
+}
+
+// Converts a local time representation to a UTC ISO string
+export function getUtcIsoString(
+  dateKey: string, // "YYYY-MM-DD"
+  hour: number,
+  minute: number,
+  timezone: string,
+): string {
+  const localDateTimeString = `${dateKey}T${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:00`;
+  const utcDate = fromZonedTime(localDateTimeString, timezone);
+  return utcDate.toISOString();
+}
+
+// Gets a UTC ISO slot for a specific date and time
+export function getUtcIsoSlot(
+  dateKey: string,
+  hour: number,
+  minute: number,
+  timezone: string,
+): { utcDate: Date; isoString: string } {
+  const localDateTimeString = `${dateKey}T${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:00`;
+  const utcDate = fromZonedTime(localDateTimeString, timezone);
+  return { utcDate, isoString: utcDate.toISOString() };
+}

app/_lib/providers.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { createContext, useState } from "react";
+
+export const LoginContext = createContext<{
+  loggedIn: boolean;
+  setLoggedIn: (loggedIn: boolean) => void;
+}>({
+  loggedIn: false,
+  setLoggedIn: () => {},
+});
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [loggedIn, setLoggedIn] = useState(false);
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <LoginContext.Provider value={{ loggedIn, setLoggedIn }}>
+        {children}
+      </LoginContext.Provider>
+    </ThemeProvider>
+  );
+}

app/_lib/schedule/event-info-reducer.tsx

@@ -0,0 +1,52 @@
+import { EventInformation } from "./types";
+import { EventRangeReducer, EventRangeAction } from "./event-range-reducer";
+
+export type EventInfoAction =
+  | { type: "SET_TITLE"; payload: string }
+  | { type: "SET_CUSTOM_CODE"; payload: string }
+  | EventRangeAction
+  | { type: "RESET" };
+
+export function EventInfoReducer(
+  state: EventInformation,
+  action: EventInfoAction,
+): EventInformation {
+  switch (action.type) {
+    case "SET_TITLE":
+      return {
+        ...state,
+        title: action.payload,
+      };
+    case "SET_CUSTOM_CODE":
+      return {
+        ...state,
+        customCode: action.payload,
+      };
+    case "RESET":
+      return {
+        title: "",
+        customCode: "",
+        eventRange: {
+          type: "specific",
+          duration: 60,
+          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+          dateRange: {
+            from: new Date().toISOString(),
+            to: new Date().toISOString(),
+          },
+          timeRange: {
+            from: 9,
+            to: 17,
+          },
+        },
+      };
+    default:
+      return {
+        ...state,
+        eventRange: EventRangeReducer(
+          state.eventRange,
+          action as EventRangeAction,
+        ),
+      };
+  }
+}