Fix frontend linter errors

jippy-the-frog · Sep 25, 2024 · 0c85693 · 0c85693
1 parent 6bd46bb
commit 0c85693
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 71 deletions.
diff --git a/frontend/app/(authenticated)/categories/[id]/page.tsx b/frontend/app/(authenticated)/categories/[id]/page.tsx
@@ -1,73 +1,77 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+
 import { CategoryDTO, MiniEventDTO } from "@/client";
 import ArticleLoading from "@/components/news/article-loading";
 import NewsArticle from "@/components/news/news-article";
 import { getCategories } from "@/queries/category";
 import { getEventsForCategory } from "@/queries/event";
-import { useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
 
 const Page = ({ params }: { params: { id: string } }) => {
-    const categoryId = parseInt(params.id);
-    const [ categoryName, setCategoryName ] = useState<string>("");
-    const { data: events, isSuccess: isEventsLoaded } = useQuery(getEventsForCategory(categoryId));
-    const { data: categories, isSuccess: isCategoriesLoaded } = useQuery(getCategories());
-
-    // Very inefficient, but is there a better way to do this? New StoreProvider for CategoryDTO[]?
-    useEffect(() => {
-        if (isCategoriesLoaded && categories!.length > 0) {
-            categories!.forEach((category: CategoryDTO) => {
-                if (category.id == categoryId) {
-                    setCategoryName(category.name);
-                }
-            });
-        }
-    }, [categories, isCategoriesLoaded]);
+  const categoryId = parseInt(params.id);
+  const [categoryName, setCategoryName] = useState<string>("");
+  const { data: events, isSuccess: isEventsLoaded } = useQuery(
+    getEventsForCategory(categoryId),
+  );
+  const { data: categories, isSuccess: isCategoriesLoaded } =
+    useQuery(getCategories());
 
-    const Articles = () => {
-        if (!isEventsLoaded) {
-            return (
-                <>
-                    <ArticleLoading />
-                    <ArticleLoading />
-                    <ArticleLoading />
-                </>
-            )
+  // Very inefficient, but is there a better way to do this? New StoreProvider for CategoryDTO[]?
+  useEffect(() => {
+    if (isCategoriesLoaded && categories!.length > 0) {
+      categories!.forEach((category: CategoryDTO) => {
+        if (category.id == categoryId) {
+          setCategoryName(category.name);
         }
+      });
+    }
+  }, [categories, isCategoriesLoaded, categoryId]);
 
-        const eventData = events!.data;
-        if (eventData.length == 0) {
-            return (
-                <div className="flex w-full justify-center">
-                    <p className="text-sm text-offblack">No recent events. Try refreshing the page.</p>
-                </div>
-            )
-        }
+  const Articles = () => {
+    if (!isEventsLoaded) {
+      return (
+        <>
+          <ArticleLoading />
+          <ArticleLoading />
+          <ArticleLoading />
+        </>
+      );
+    }
 
-        return (
-            eventData.map((newsEvent: MiniEventDTO, index: number) => (
-                <NewsArticle key={index} newsEvent={newsEvent} />
-            ))
-        )
+    const eventData = events!.data;
+    if (eventData.length == 0) {
+      return (
+        <div className="flex w-full justify-center">
+          <p className="text-sm text-offblack">
+            No recent events. Try refreshing the page.
+          </p>
+        </div>
+      );
     }
 
-    return (
-        <div className="flex flex-col w-full py-8">
-            <div className="flex flex-col mb-8 gap-y-2 mx-8 md:mx-16 xl:mx-32">
-                <span className="text-sm text-muted-foreground">
-                {new Date().toDateString()}
-                </span>
-                <h1 className="text-3xl 2xl:text-4xl font-bold">
-                Top events from {categoryName}
-                </h1>
-            </div>
+    return eventData.map((newsEvent: MiniEventDTO, index: number) => (
+      <NewsArticle key={index} newsEvent={newsEvent} />
+    ));
+  };
 
-            <div className="flex flex-col w-auto mx-4 md:mx-8 xl:mx-24">
-                <Articles />
-            </div>
-        </div>
-    )
+  return (
+    <div className="flex flex-col w-full py-8">
+      <div className="flex flex-col mb-8 gap-y-2 mx-8 md:mx-16 xl:mx-32">
+        <span className="text-sm text-muted-foreground">
+          {new Date().toDateString()}
+        </span>
+        <h1 className="text-3xl 2xl:text-4xl font-bold">
+          Top events from {categoryName}
+        </h1>
+      </div>
+
+      <div className="flex flex-col w-auto mx-4 md:mx-8 xl:mx-24">
+        <Articles />
+      </div>
+    </div>
+  );
 };
 
 export default Page;
diff --git a/frontend/components/navigation/sidebar/sidebar-item-with-icon.tsx b/frontend/components/navigation/sidebar/sidebar-item-with-icon.tsx
@@ -1,19 +1,26 @@
-import { LucideIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { LucideIcon } from "lucide-react";
 
 interface SidebarItemWithIconProps {
   Icon: LucideIcon;
   label: string;
   categoryId: number;
 }
 
-const SidebarItemWithIcon = ({ Icon, label, categoryId }: SidebarItemWithIconProps) => {
+const SidebarItemWithIcon = ({
+  Icon,
+  label,
+  categoryId,
+}: SidebarItemWithIconProps) => {
   const router = useRouter();
 
   const onClickCategory = () => router.push(`/categories/${categoryId}`);
 
   return (
-    <div onClick={onClickCategory} className="flex rounded px-2 py-1.5 hover:bg-muted-foreground/5 text-sm font-medium items-center">
+    <div
+      className="flex rounded px-2 py-1.5 hover:bg-muted-foreground/5 text-sm font-medium items-center"
+      onClick={onClickCategory}
+    >
       <Icon
         className="mr-3 text-muted-foreground"
         size={16}

diff --git a/frontend/components/navigation/sidebar/sidebar-other-topics.tsx b/frontend/components/navigation/sidebar/sidebar-other-topics.tsx
@@ -1,34 +1,31 @@
 "use client";
 
-import {
-  getIconFor,
-} from "@/types/categories";
+import { useQuery } from "@tanstack/react-query";
 
-import SidebarItemWithIcon from "./sidebar-item-with-icon";
-import { useEffect } from "react";
 import { getCategories } from "@/queries/category";
-import { useQuery } from "@tanstack/react-query";
+import { getIconFor } from "@/types/categories";
+
+import SidebarItemWithIcon from "./sidebar-item-with-icon";
 
 const SidebarOtherTopics = () => {
-  const { data: categories, isSuccess: isCategoriesSuccess } = useQuery(getCategories());
+  const { data: categories } = useQuery(getCategories());
 
   return (
     <div className="flex flex-col space-y-2.5">
       <h1 className="text-sm font-medium text-muted-foreground/80 px-2">
         Other topics
       </h1>
       <div className="flex flex-col">
-        {
-        categories?.map((category) => {
+        {categories?.map((category) => {
           const categoryIcon = getIconFor(category.name);
           return (
             <SidebarItemWithIcon
-              Icon={categoryIcon} 
-              key={category.id} 
-              label={category.name} 
+              Icon={categoryIcon}
               categoryId={category.id}
+              key={category.id}
+              label={category.name}
             />
-          )
+          );
         })}
       </div>
     </div>

diff --git a/frontend/queries/event.ts b/frontend/queries/event.ts
@@ -24,7 +24,7 @@ export const getEventsForCategory = (categoryId: number) =>
       getEventsEventsGet({
         withCredentials: true,
         query: {
-          category_ids: [ categoryId ]
+          category_ids: [ categoryId ],
         },
       }).then((data) => data.data),
   });