🐛 Fix networking and styling issues in home page

toridoriv · Oct 18, 2023 · 2aa13c0 · 2aa13c0
1 parent 34ff406
commit 2aa13c0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 30 deletions.
diff --git a/components/fanfiction-card.tsx b/components/fanfiction-card.tsx
@@ -33,7 +33,11 @@ export function FanfictionCard({ fanfiction, ...props }: FanfictionCardProps) {
               "card-text translation text-secondary-emphasis text-opacity-75",
           },
         })}
-        {tags.map(TagButton)}
+      </div>
+      <div class="card-footer">
+        <p style="text-align:center;">
+          {tags.map(TagButton)}
+        </p>
       </div>
     </article>
   );

diff --git a/routes/api/fanfiction-attributes/index.ts b/routes/api/fanfiction-attributes/index.ts
@@ -9,7 +9,7 @@ const ListQuerySchema = z.object({
   order: z.enum(["ASCENDING", "DESCENDING"]).default("ASCENDING"),
 });
 
-export const handler: Handlers<FanfictionAttributesOutput | null> = {
+export const handler: Required<Pick<Handlers, "GET">> = {
   async GET(req, _ctx) {
     const url = new URL(req.url);
     const query = ListQuerySchema.parse(
@@ -19,20 +19,21 @@ export const handler: Handlers<FanfictionAttributesOutput | null> = {
       ? { $expr: { $gt: ["$updated_at", "$created_at"] } }
       : {};
 
-    const fanfictions = await client.fanfictions.find(dbQuery, {
-      projection: {
-        _id: 0,
-        created_at: 0,
-        updated_at: 0,
-        kind: 0,
-        chapters: 0,
-      },
-      limit: query.limit,
-      skip: query.skip,
-      sort: {
-        [query.sort]: SortOrder[query.order],
-      },
-    })
+    const fanfictions = await client.fanfictions
+      .find(dbQuery, {
+        projection: {
+          _id: 0,
+          created_at: 0,
+          updated_at: 0,
+          kind: 0,
+          chapters: 0,
+        },
+        limit: query.limit,
+        skip: query.skip,
+        sort: {
+          [query.sort]: SortOrder[query.order],
+        },
+      })
       .toArray();
 
     return new Response(JSON.stringify(fanfictions), {

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -1,11 +1,11 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { FanfictionCard } from "@components/fanfiction-card.tsx";
 import { FanfictionAttributesOutput } from "@modules/fanfiction/mod.ts";
-import { logger } from "@utils/mod.ts";
+import { handler as FanfictionAttributesHandler } from "./api/fanfiction-attributes/index.ts";
 
-interface HomeState {
+type HomeState = {
   subtitle: string;
-}
+};
 
 interface HomeData {
   recentlyAdded: FanfictionAttributesOutput[];
@@ -15,18 +15,28 @@ interface HomeData {
 export const handler: Handlers<HomeData, HomeState> = {
   async GET(req, ctx) {
     const baseUrl = new URL(req.url);
-    const recentlyAddedUrl = new URL(
-      "/api/fanfiction-attributes?limit=3&sort=created_at&order=DESCENDING",
-      baseUrl.origin,
+    const recentlyAddedRequest = new Request(
+      new URL(
+        "/api/fanfiction-attributes?limit=3&sort=created_at&order=DESCENDING",
+        baseUrl.origin,
+      ),
+    );
+    const recentlyAddedResponse = await FanfictionAttributesHandler.GET(
+      recentlyAddedRequest,
+      ctx,
     );
-    const recentlyAddedResponse = await fetch(recentlyAddedUrl);
     const recentlyAdded = await recentlyAddedResponse.json();
 
-    const recentlyUpdatedUrl = new URL(
-      "/api/fanfiction-attributes?limit=3&sort=updated_at&order=DESCENDING",
-      baseUrl.origin,
+    const recentlyUpdatedRequest = new Request(
+      new URL(
+        "/api/fanfiction-attributes?limit=3&sort=updated_at&order=DESCENDING",
+        baseUrl.origin,
+      ),
+    );
+    const recentlyUpdatedResponse = await FanfictionAttributesHandler.GET(
+      recentlyUpdatedRequest,
+      ctx,
     );
-    const recentlyUpdatedResponse = await fetch(recentlyUpdatedUrl);
     const recentlyUpdated = await recentlyUpdatedResponse.json();
 
     ctx.state.subtitle = "Home";

diff --git a/static/styles/main.css b/static/styles/main.css
@@ -34,6 +34,8 @@ article.card {
   font-family: "Victor Mono", Monaco, Lucida, monospace;
   font-size: smaller;
   margin-right: 0.6em;
+  margin-bottom: 0.2em;
+  margin-top: 0.2em;
 }
 
 .btn.tag.counter {
@@ -47,4 +49,4 @@ article.card {
 
 span[lang] {
   margin-right: 0.6em;
-}
+}
diff --git a/utils/helpers/fanfiction-tags.ts b/utils/helpers/fanfiction-tags.ts
@@ -87,7 +87,7 @@ export function getRelationshipTag(
 ): FanfictionTag {
   return getTag(
     FanfictionTagName.Relationship,
-    relationship.replaceAll("/", ","),
+    relationship,
     total,
   );
 }
@@ -97,5 +97,7 @@ export function getAuthorTag(authorName: string, total?: number) {
 }
 
 function getTagHref(name: FanfictionTagName, value: string) {
-  return `/catalog?${QUERY_BY_TAG_NAME[name]}${value.replaceAll(" ", "%20")}`;
+  return `/catalog?${QUERY_BY_TAG_NAME[name]}${
+    value.replaceAll("/", ",").replaceAll(" ", "%20")
+  }`;
 }