Merge pull request #105 from cs3216-a3-group-4/seeleng/add-likes

feat(event/analysis): add likes

frontend/app/(authenticated)/events/[id]/event-analysis.tsx

@@ -3,14 +3,20 @@
 import { useState } from "react";
 import { SparklesIcon } from "lucide-react";
 
-import { EventDTO } from "@/client";
+import {
+  EventDTO,
+  src__events__schemas__AnalysisDTO as AnalysisDTO,
+} from "@/client";
+import LikeButtons from "@/components/likes/like-buttons";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useLikeEvent } from "@/queries/like";
+import { useUserStore } from "@/store/user/user-store-provider";
 import {
   categoriesToDisplayName,
   categoriesToIconsMap,
@@ -23,19 +29,25 @@ interface Props {
 }
 
 const EventAnalysis = ({ event }: Props) => {
+  const user = useUserStore((state) => state.user);
+
   const eventCategories = event.categories.map((category) =>
     getCategoryFor(category.name),
   );
 
-  const [activeCategories, setActiveCategories] = useState<string[]>([]);
+  const [activeCategories, setActiveCategories] = useState<string[]>(
+    event.analysises.map((item) => getCategoryFor(item.category.name)),
+  );
 
   // @ts-expect-error deadline doesnt give me time to bother with type errors
-  const analysis: { [key in Category]: string } = {};
+  const analysis: { [key in Category]: AnalysisDTO } = {};
 
   event.analysises.forEach(
-    (item) => (analysis[getCategoryFor(item.category.name)] = item.content),
+    (item) => (analysis[getCategoryFor(item.category.name)] = item),
   );
 
+  const likeMutation = useLikeEvent(event.id);
+
   return (
     <div className="flex flex-col px-6 gap-y-8">
       <div className="flex flex-col gap-y-1">
@@ -45,7 +57,7 @@ const EventAnalysis = ({ event }: Props) => {
         </span>
         <div className="flex w-full">
           <ToggleGroup
-            className="gap-3"
+            className="flex flex-col sm:flex-row flex-wrap md:flex-row gap-3"
             onValueChange={(value) => setActiveCategories(value)}
             size="lg"
             type="multiple"
@@ -80,6 +92,10 @@ const EventAnalysis = ({ event }: Props) => {
       >
         {Object.entries(analysis).map((item) => {
           const [category, analysis] = item;
+          const content = analysis.content;
+          const likes = analysis.likes;
+          const userLike = likes.filter((like) => like.user_id == user?.id)[0];
+          const userLikeValue = userLike ? userLike.type : 0;
           const CategoryIcon = categoriesToIconsMap[category as Category];
           return (
             <AccordionItem
@@ -98,14 +114,23 @@ const EventAnalysis = ({ event }: Props) => {
               </AccordionTrigger>
               <AccordionContent className="text-lg pt-2 text-cyan-950 font-[450]">
                 <div>
-                  <div>{analysis}</div>
+                  <div>{content}</div>
                   {/* Commenting out GP questions for now */}
                   {/* <Separator className="my-4" />
                   <div>
                     How does the commercialization of global sports impact
                     societal values and economies?
                   </div> */}
                 </div>
+                <LikeButtons
+                  onDislike={() =>
+                    likeMutation.mutate({ analysis_id: analysis.id, type: -1 })
+                  }
+                  onLike={() =>
+                    likeMutation.mutate({ analysis_id: analysis.id, type: 1 })
+                  }
+                  userLikeValue={userLikeValue}
+                />
               </AccordionContent>
             </AccordionItem>
           );

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;