api fix

components/bin/galleryview.js

@@ -1,38 +1,15 @@
 import React from 'react'
 import styles from '../../public/bin/style/gallery.module.css'
-import { useEffect } from 'react';
 
 
 const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link, images = []}) => {
 
+
   const handleClick = () => {
     window.open("www.example.com", '_blank', 'noopener,noreferrer');
   };
 
-  async function fetchPosts() {
-    const response = await fetch('https://hackclub.com/api/bin/gallery/posts/');
-    if (!response.ok) {
-        throw new Error('Network response was not ok.');
-    }
-    data = await response.json();
 
-    return data
-  }
-
-
-  useEffect(() => { 1
-    const handleLoad = async (e) => {
-      console.log('Page has loaded');
-
-      const fetchedParts = await fetchPosts()
-    };
-
-    window.addEventListener('load', handleLoad);
-
-    return () => {
-      window.removeEventListener('load', handleLoad);
-    };
-  }, []);
 
 
 

pages/api/bin/gallery/posts.js

@@ -1,18 +1,28 @@
-import AirtablePlus from "airtable-plus"
+import AirtablePlus from "airtable-plus";
 
 const fetchPosts = async () => {
-  const airtable = new AirtablePlus({
-    apiKey: process.env.AIRTABLE_API_KEY,
-    baseID: 'appKjALSnOoA0EmPk',
-    tableName: 'Main'
-  })
+  try {
+    const airtable = new AirtablePlus({
+      apiKey: process.env.AIRTABLE_API_KEY,
+      baseID: 'appKjALSnOoA0EmPk',
+      tableID: 'tblkpXP848G112FPg',
+      tableName: 'Main',
+    });
 
-  const records = await airtable.read()
-  const posts = records.map(record => record.fields)
-  return posts
-}
+    const records = await airtable.read();
+    const posts = records.map((record) => record.fields);
+    return posts;
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+    throw error; // Re-throw the error after logging it
+  }
+};
 
 export default async function handler(req, res) {
-  const data = await fetchPosts()
-  res.status(200).json(data)
-}
+  try {
+    const data = await fetchPosts();
+    res.status(200).json(data);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch posts' });
+  }
+}

pages/bin/gallery.js

@@ -1,10 +1,45 @@
 import React from 'react'
-import BinPost from '../../components/bin/galleryView'
+import BinPost from '../../components/bin/galleryview'
 import styles from '../../public/bin/style/gallery.module.css'
 import Nav from '../../components/bin/nav'
+import { useEffect, useRef } from 'react';
+import { resolve } from 'styled-jsx/css';
+
 
 
 function Gallery() {
+    var data = ""; 
+
+    console.log("working");
+    async function fetchPosts() {
+        try {
+          const response = await fetch('http://hackclub.com/api/bin/wokwi/parts/');
+          console.log(response);
+      
+          if (!response.ok) {
+            throw new Error('Network response was not ok. Status: ' + response.ok);
+          }
+      
+          data = await response.json();
+          console.log(data);
+      
+          return data;
+        } catch (error) {
+          console.error('Error fetching posts:', error);
+          throw error;
+        }
+      }
+    
+      useEffect(() => {
+          console.log('Page has loaded');
+    
+          const posts = fetchPosts()
+          console.log(posts);
+    
+    
+      }, []);
+    
+    
 
    return( 
     <section className='page'>

public/bin/selector/script.js

@@ -1,18 +1,6 @@
 const partsLimit = 8
 var fetchedParts;
-async function fetchParts() {
-    const response = await fetch('https://hackclub.com/api/bin/wokwi/parts/');
-    if (!response.ok) {
-        throw new Error('Network response was not ok.');
-    }
-    data = await response.json();
 
-    data = removeItemByAttribute(data, "type", "Microprocessor");
-    return data
-}
-function removeItemByAttribute(arr, attr, value) {
-    return arr.filter(item => item[attr] !== value);
-}
 /*
 async function preloadImage(item) {
     let response = await fetch(item.imageUrl);
@@ -88,7 +76,6 @@ function addPartToPage(part) {
         newImage.className = "new-tag"
         selectorItem.appendChild(newImage)
     } 
-    console.log("Out of stock" + part.outOfStock)
 
     document.getElementsByClassName("selector-main")[0].appendChild(selectorItem)
 
@@ -159,6 +146,7 @@ function addPartToPage(part) {
 }
 
 window.addEventListener("load", async (e) => {
+    console.log("Page loaded");
     recalculateSelected();
     const fetchedParts = await partsData()
     fetchedParts.forEach(part => {

public/bin/style/gallery.module.css

@@ -16,6 +16,11 @@
     margin-bottom: 24px; /* Add space between cards vertically */
 }
 
+.gallery_card:hover {
+    background-color: rgba(148, 79, 0, 0.2);
+    transform: translateY(-2px); /* Equivalent to hover:shadow-lg */
+}
+
 
 .feed {
     padding-top: 32px;        
@@ -95,7 +100,7 @@
     font-weight: 700;
     text-align: left;
     color: #e1e1e1;
-    margin-top: -10px;
+    margin-top: 0;
     margin-bottom: 1rem;
 }