From 1555cf37cda133fb74a963b2d43e6b29a7c3c86b Mon Sep 17 00:00:00 2001
From: Sheldon Lee <sheldon@sheldonlee.com>
Date: Thu, 23 Nov 2023 19:17:45 +0800
Subject: [PATCH] Refactor post() and deal with fetched data as a typed
 interface.

the post() function now uses await syntax rather than .then()
---
 src/Gallery/index.tsx | 85 +++++++++++++++++++------------------------
 1 file changed, 38 insertions(+), 47 deletions(-)

diff --git a/src/Gallery/index.tsx b/src/Gallery/index.tsx
index 1350797..8366394 100644
--- a/src/Gallery/index.tsx
+++ b/src/Gallery/index.tsx
@@ -3,22 +3,27 @@ import '../App.css';
 import { useState, useEffect } from 'react';
 
 function Gallery() {
-  const [data, setData] = useState('');
+  const [data, setData] = useState<galleryItemInfo[]>([]);
   const [category, setCategory] = useState('');
 
   useEffect(() => {
-    post(category, (json: string) => {
-      setData(json);
+    post(category, (data: galleryItemInfo[]) => {
+      setData(data);
     });
-  });
+  }, [category]);
+
+  const updateCategory = (category: string) => {
+    setData([]);
+    setCategory(category);
+  };
 
   return (
     <div className="Gallery">
       <div className="Header">
-        {getContents(data, true, category, setCategory)}
+        {Contents(data, true, category, updateCategory)}
       </div>
       <div className="Contents">
-        {getContents(data, false, category, setCategory)}
+        {Contents(data, false, category, updateCategory)}
       </div>
     </div>
   );
@@ -30,30 +35,21 @@ interface galleryItemInfo {
   thumbnail_url: string;
 }
 
-function getContents(
-  data: string,
+function Contents(
+  data: galleryItemInfo[],
   getDir: boolean,
   category: string,
   setCategory: (category: string) => void
 ) {
-  if (data === '') return;
+  if (data === null) return;
 
-  let obj = null;
-  try {
-    obj = JSON.parse(data);
-  } catch (error: unknown) {
-    if (!(error instanceof SyntaxError)) {
-      throw new Error(error as unknown as undefined);
-    }
-    return data;
-  }
-
-  return obj
-    .sort((a: galleryItemInfo, b: galleryItemInfo) => {
+  return data
+    .sort((a: galleryItemInfo, b: galleryItemInfo): number => {
       if (a.is_dir && b.is_dir) return 0;
       if (a.is_dir && !b.is_dir) return -1;
       if (!a.is_dir && b.is_dir) return 1;
       if (!a.is_dir && !b.is_dir) return 0;
+      return 0;
     })
     .filter((item: galleryItemInfo) => {
       return getDir == item.is_dir;
@@ -135,33 +131,28 @@ function getFileName(string: string): string {
   return string.split('/').at(-1) as unknown as string;
 }
 
-function post(category: string, callback: (text: string) => void) {
-  fetch(
-    'http://localhost/photo-viewer-backend/php/get.php',
-    //'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        category: category,
-      }),
-    }
-  )
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
+async function post(
+  category: string,
+  setDataCallback: (data: galleryItemInfo[]) => void
+) {
+  try {
+    const response = await fetch(
+      'http://localhost/photo-viewer-backend/php/get.php',
+      //'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          category: category,
+        }),
       }
-      return response;
-    })
-    .then((response) => response.text())
-    .then((data) => {
-      callback(data as unknown as string);
-    })
-    .catch((error) => {
-      console.error('There was a problem with the fetch operation:', error);
-    });
+    );
+    setDataCallback(await response.json());
+  } catch (error) {
+    console.error('Error fetching data: ', error);
+  }
 }
 
 export default Gallery;