diff --git a/components/bin/GalleryPosts.js b/components/bin/GalleryPosts.js index bbd14b0b..a96bd9b0 100644 --- a/components/bin/GalleryPosts.js +++ b/components/bin/GalleryPosts.js @@ -3,7 +3,7 @@ import styles from '../../public/bin/style/gallery.module.css' import { useEffect, useRef, useState } from 'react'; -const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', images = [], id}) => { +const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', id, date}) => { link = link.trim(); if (!/^https?:\/\//i.test(link)) { @@ -22,6 +22,24 @@ const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = ' } } + function formatDate(dateString) { + console.log("date", date) + const inputDate = new Date(dateString); + const now = new Date(); + const oneDay = 24 * 60 * 60 * 1000; // Number of milliseconds in one day + + // Check if the input date is within the last 24 hours + if (now - inputDate < oneDay) { + const hours = inputDate.getHours().toString().padStart(2, '0'); + const minutes = inputDate.getMinutes().toString().padStart(2, '0'); + return `Today at ${hours}:${minutes}`; + } else { + // Format the date to "Month day, year" + const options = { year: 'numeric', month: 'long', day: 'numeric' }; + return inputDate.toLocaleDateString(undefined, options); + } + } + return (
@@ -34,7 +52,9 @@ return (

{desc}

-

{slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : ("")}

+ {(slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : (""))+ " "} + {formatDate(date)} + ) diff --git a/components/bin/footer.js b/components/bin/footer.js index 79e7b4f6..410e25ba 100644 --- a/components/bin/footer.js +++ b/components/bin/footer.js @@ -67,19 +67,19 @@ const Footer = () => {
- - - @@ -91,8 +91,8 @@ const Footer = () => { - @@ -104,15 +104,15 @@ const Footer = () => { - - @@ -120,12 +120,12 @@ const Footer = () => { - - @@ -133,12 +133,12 @@ const Footer = () => { - - @@ -146,12 +146,12 @@ const Footer = () => { - - { - diff --git a/components/bin/footer.module.css b/components/bin/footer.module.css index 367cc657..1a69d670 100644 --- a/components/bin/footer.module.css +++ b/components/bin/footer.module.css @@ -97,4 +97,5 @@ color: #8492a6; margin-top: 16px; -} \ No newline at end of file +} + diff --git a/pages/api/bin/gallery/posts.js b/pages/api/bin/gallery/posts.js index 63e24a4f..75a00afb 100644 --- a/pages/api/bin/gallery/posts.js +++ b/pages/api/bin/gallery/posts.js @@ -7,18 +7,21 @@ const fetchPosts = async () => { baseID: 'appKjALSnOoA0EmPk', tableName: 'Main', }); - +//process.env.AIRTABLE_API_KEY const records = await airtable.read(); const posts = records.map((record) => { return { ID: record.id, - postID: record.id, title: record.fields.Title, desc: record.fields["What will you be building?"], slack: record.fields["Slack Handle"], - link: record.fields["Wokwi Share link"] + link: record.fields["Wokwi Share link"], + status: record.fields.Status, + hide: record.fields["Hide From Gallery"], + created: record.fields["Created At"], + parts: record.fields["Parts List"] }; }); diff --git a/pages/bin/gallery.js b/pages/bin/gallery.js index 42260acf..c2a393bb 100644 --- a/pages/bin/gallery.js +++ b/pages/bin/gallery.js @@ -7,31 +7,20 @@ import { useEffect, useRef, useState } from 'react'; import { resolve } from 'styled-jsx/css'; import { set } from 'lodash'; -function Gallery({ posts }) { - const [allPosts, setAllPosts] = useState([]); - const [loading, setLoading] = useState(true); +export async function getStaticProps() { + const res = await fetch(`http://localhost:3000/api/bin/gallery/posts/`); + const posts = await res.json(); + + const filteredPosts = posts.filter(post => post.status === 'Accepted'); + return { + props: { posts: filteredPosts }, + }; +} - const fetchPosts = async () => { - try { - const response = await fetch('http://hackclub.com/api/bin/gallery/posts/'); +function Gallery({ posts = [] }) { + console.log(posts) - if (!response.ok) { - throw new Error('Network response was not ok. Status: ' + response.ok); - } - const data = await response.json() - setAllPosts(data.filter(post => post.Status === 'Accepted')); //Filter out rejected or under review as well as hidden posts - } catch (error) { - throw error; - } finally { - // Set loading to false when the async function is done - setLoading(false); - } - } - - useEffect(() => { - fetchPosts() - }, []); return ( @@ -47,8 +36,8 @@ function Gallery({ posts }) {
- {loading ? (
Loading
) : (<>{ - allPosts.map(post => { + + {posts.map(post => { return ( ) - }) - })} + })} +