Static load gallery posts

pages/api/bin/gallery/posts.js

@@ -9,7 +9,17 @@ const fetchPosts = async () => {
     });
 
     const records = await airtable.read();
-    const posts = records.map((record) => record.fields);
+
+    const posts = records.map((record) =>  {
+      return {
+        id: record.id,
+        postID: record.id,
+        title: record.fields.Title,
+        // etc...
+      };
+    });
+  
+    
     return posts;
   } catch (error) {
     console.error('Error fetching posts:', error);

pages/bin/gallery.js

@@ -3,40 +3,11 @@ import BinPost from '../../components/bin/GalleryPosts'
 import styles from '../../public/bin/style/gallery.module.css'
 import Nav from '../../components/bin/nav'
 import Footer from '../../components/bin/footer'
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
-import { resolve } from 'styled-jsx/css';
-import { set } from 'lodash';
 
-function Gallery() {
+function Gallery({ posts }) {
-  const [allPosts, setAllPosts] = useState([]);
+  const [allPosts, setAllPosts] = useState(posts);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
-
-
-  const fetchPosts = async () => {
-        try {
-          const response = await fetch('http://hackclub.com/api/bin/gallery/posts/');
-    
-          if (!response.ok) {
-            throw new Error('Network response was not ok. Status: ' + response.ok);
-          }
-          const data = await response.json()
-          console.log(data);
-          console.log(data.filter(post => post.Status === 'Accepted'));
-          setAllPosts(data.filter(post => post.Status === 'Accepted')); //Filter out rejected or under review as well as hidden posts
-          console.log('done' + allPosts);
-        } catch (error) {
-          throw error;
-        } finally {
-          // Set loading to false when the async function is done
-          setLoading(false);
-          console.log('done' + loading);
-        }
-      }
-    
-      useEffect(() => {
-          console.log('Page has loaded');
-          fetchPosts()
-      }, []);
 
 
    return( 
@@ -74,4 +45,13 @@ function Gallery() {
    )
 }
 
+export async function getStaticProps(context) {
+  const res = await fetch(`https://hackclub.com/api/bin/gallery/posts/`)
+  const posts = await res.json()
+  const filteredPosts = posts.filter(post => post.Status === 'Accepted');
+  return {
+    props: { posts: filteredPosts }
+  }
+}
+
 export default Gallery