fix: ui fixes and scroll to top and stuff

frontend/app/(authenticated)/template.tsx

@@ -21,7 +21,6 @@ export default function RedirectIfNotAuthenticated({
   } = useQuery(getUserProfile());
 
   useEffect(() => {
-    console.log({ isUserProfileSuccess, userProfile });
     if (!isFetching) {
       if (!userProfile) {
         if (!isLoggedIn) {

frontend/app/home.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { getEventsEventsGet, MiniEventDTO } from "@/client";
+import ScrollToTopButton from "@/components/navigation/scroll-to-top-button";
 import ArticleLoading from "@/components/news/article-loading";
 import NewsArticle from "@/components/news/news-article";
 import { useUserStore } from "@/store/user/user-store-provider";
@@ -64,32 +65,42 @@ const Home = () => {
   }, [user, eventStartDate]);
 
   return (
-    <div className="flex w-full h-fit bg-muted py-8">
-      <div className="flex flex-col py-12 w-fit h-fit mx-4 md:mx-8 xl:mx-24 bg-background rounded-lg border border-border px-8">
-        {/* TODO: x-padding here is tied to the news article */}
-        <div className="flex flex-col mb-4 gap-y-2 xl:px-12">
-          <h1 className="text-4xl 2xl:text-4xl font-bold text-primary-800">
-            What happened this week
-          </h1>
-          <span className="text-primary text-lg">
-            {parseDate(eventStartDate)} - {parseDate(new Date())}
-          </span>
-        </div>
+    <div className="relative w-full h-full">
+      <div
+        className="flex bg-muted w-full h-full max-h-full py-8 overflow-y-auto"
+        id="home-page"
+      >
+        <div className="flex flex-col py-12 w-fit h-fit mx-4 md:mx-8 xl:mx-24 bg-background rounded-lg border border-border px-8">
+          {/* TODO: x-padding here is tied to the news article */}
+          <div className="flex flex-col mb-4 gap-y-2 xl:px-12" id="homePage">
+            <h1 className="text-4xl 2xl:text-4xl font-bold text-primary-800">
+              What happened this week
+            </h1>
+            <span className="text-primary text-lg">
+              {parseDate(eventStartDate)} - {parseDate(new Date())}
+            </span>
+          </div>
 
-        <div className="flex flex-col w-auto">
-          {!isLoaded ? (
-            <>
-              <ArticleLoading />
-              <ArticleLoading />
-              <ArticleLoading />
-            </>
-          ) : (
-            topEvents.map((newsEvent: MiniEventDTO, index: number) => (
-              <NewsArticle key={index} newsEvent={newsEvent} />
-            ))
-          )}
+          <div className="flex flex-col w-auto">
+            {!isLoaded ? (
+              <>
+                <ArticleLoading />
+                <ArticleLoading />
+                <ArticleLoading />
+              </>
+            ) : (
+              topEvents.map((newsEvent: MiniEventDTO, index: number) => (
+                <NewsArticle key={index} newsEvent={newsEvent} />
+              ))
+            )}
+          </div>
         </div>
       </div>
+      <ScrollToTopButton
+        className="absolute right-4 bottom-4"
+        minHeight={200}
+        scrollElementId="home-page"
+      />
     </div>
   );
 };

frontend/client/client.ts

@@ -1,15 +1,15 @@
-export { createClient } from './core/';
+export { createClient } from "./core/";
 export type {
   Client,
   Config,
   Options,
   RequestOptions,
   RequestOptionsBase,
   RequestResult,
-} from './core/types';
+} from "./core/types";
 export {
   createConfig,
   formDataBodySerializer,
   jsonBodySerializer,
   urlSearchParamsBodySerializer,
-} from './core/utils';
+} from "./core/utils";

frontend/client/core/index.ts

@@ -1,8 +1,8 @@
-import type { AxiosError } from 'axios';
-import axios from 'axios';
+import type { AxiosError } from "axios";
+import axios from "axios";
 
-import type { Client, Config, RequestOptions } from './types';
-import { createConfig, getUrl, mergeConfigs, mergeHeaders } from './utils';
+import type { Client, Config, RequestOptions } from "./types";
+import { createConfig, getUrl, mergeConfigs, mergeHeaders } from "./utils";
 
 export const createClient = (config: Config): Client => {
   let _config = mergeConfigs(createConfig(), config);
@@ -23,7 +23,7 @@ export const createClient = (config: Config): Client => {
   };
 
   // @ts-expect-error
-  const request: Client['request'] = async (options) => {
+  const request: Client["request"] = async (options) => {
     const opts: RequestOptions = {
       ..._config,
       ...options,
@@ -51,7 +51,7 @@ export const createClient = (config: Config): Client => {
 
       let { data } = response;
 
-      if (opts.responseType === 'json' && opts.responseTransformer) {
+      if (opts.responseType === "json" && opts.responseTransformer) {
         data = await opts.responseTransformer(data);
       }
 
@@ -71,15 +71,15 @@ export const createClient = (config: Config): Client => {
   };
 
   return {
-    delete: (options) => request({ ...options, method: 'delete' }),
-    get: (options) => request({ ...options, method: 'get' }),
+    delete: (options) => request({ ...options, method: "delete" }),
+    get: (options) => request({ ...options, method: "get" }),
     getConfig,
-    head: (options) => request({ ...options, method: 'head' }),
+    head: (options) => request({ ...options, method: "head" }),
     instance,
-    options: (options) => request({ ...options, method: 'options' }),
-    patch: (options) => request({ ...options, method: 'patch' }),
-    post: (options) => request({ ...options, method: 'post' }),
-    put: (options) => request({ ...options, method: 'put' }),
+    options: (options) => request({ ...options, method: "options" }),
+    patch: (options) => request({ ...options, method: "patch" }),
+    post: (options) => request({ ...options, method: "post" }),
+    put: (options) => request({ ...options, method: "put" }),
     request,
     setConfig,
   } as Client;

frontend/client/core/types.ts

@@ -5,14 +5,14 @@ import type {
   AxiosResponse,
   AxiosStatic,
   CreateAxiosDefaults,
-} from 'axios';
+} from "axios";
 
-import type { BodySerializer } from './utils';
+import type { BodySerializer } from "./utils";
 
 type OmitKeys<T, K> = Pick<T, Exclude<keyof T, K>>;
 
 export interface Config<ThrowOnError extends boolean = boolean>
-  extends Omit<CreateAxiosDefaults, 'headers'> {
+  extends Omit<CreateAxiosDefaults, "headers"> {
   /**
    * Axios implementation. You can use this option to provide a custom
    * Axios instance.
@@ -37,7 +37,7 @@ export interface Config<ThrowOnError extends boolean = boolean>
    * {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
    */
   headers?:
-    | CreateAxiosDefaults['headers']
+    | CreateAxiosDefaults["headers"]
     | Record<
         string,
         | string
@@ -54,15 +54,15 @@ export interface Config<ThrowOnError extends boolean = boolean>
    * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
    */
   method?:
-    | 'connect'
-    | 'delete'
-    | 'get'
-    | 'head'
-    | 'options'
-    | 'patch'
-    | 'post'
-    | 'put'
-    | 'trace';
+    | "connect"
+    | "delete"
+    | "get"
+    | "head"
+    | "options"
+    | "patch"
+    | "post"
+    | "put"
+    | "trace";
   /**
    * A function for transforming response data before it's returned to the
    * caller function. This is an ideal place to post-process server data,
@@ -99,16 +99,16 @@ type MethodFn = <
   TError = unknown,
   ThrowOnError extends boolean = false,
 >(
-  options: Omit<RequestOptionsBase<ThrowOnError>, 'method'>,
+  options: Omit<RequestOptionsBase<ThrowOnError>, "method">,
 ) => RequestResult<Data, TError, ThrowOnError>;
 
 type RequestFn = <
   Data = unknown,
   TError = unknown,
   ThrowOnError extends boolean = false,
 >(
-  options: Omit<RequestOptionsBase<ThrowOnError>, 'method'> &
-    Pick<Required<RequestOptionsBase<ThrowOnError>>, 'method'>,
+  options: Omit<RequestOptionsBase<ThrowOnError>, "method"> &
+    Pick<Required<RequestOptionsBase<ThrowOnError>>, "method">,
 ) => RequestResult<Data, TError, ThrowOnError>;
 
 export interface Client {
@@ -127,12 +127,12 @@ export interface Client {
 
 export type RequestOptions = RequestOptionsBase<false> &
   Config<false> & {
-    headers: AxiosRequestConfig['headers'];
+    headers: AxiosRequestConfig["headers"];
   };
 
 type OptionsBase<ThrowOnError extends boolean> = Omit<
   RequestOptionsBase<ThrowOnError>,
-  'url'
+  "url"
 > & {
   /**
    * You can provide a client instance returned by `createClient()` instead of
@@ -147,12 +147,12 @@ export type Options<
   ThrowOnError extends boolean = boolean,
 > = T extends { body?: any }
   ? T extends { headers?: any }
-    ? OmitKeys<OptionsBase<ThrowOnError>, 'body' | 'headers'> & T
-    : OmitKeys<OptionsBase<ThrowOnError>, 'body'> &
+    ? OmitKeys<OptionsBase<ThrowOnError>, "body" | "headers"> & T
+    : OmitKeys<OptionsBase<ThrowOnError>, "body"> &
         T &
-        Pick<OptionsBase<ThrowOnError>, 'headers'>
+        Pick<OptionsBase<ThrowOnError>, "headers">
   : T extends { headers?: any }
-    ? OmitKeys<OptionsBase<ThrowOnError>, 'headers'> &
+    ? OmitKeys<OptionsBase<ThrowOnError>, "headers"> &
         T &
-        Pick<OptionsBase<ThrowOnError>, 'body'>
+        Pick<OptionsBase<ThrowOnError>, "body">
     : OptionsBase<ThrowOnError> & T;