import React, { useState } from "react" import { NextSeo, BreadcrumbJsonLd } from "next-seo" import useUser from "../../lib/hooks/useUser" import Sidebar from "../../components/forum/Sidebar" import getAllForumTopics from "../../lib/forumTopics" import getAllForumCategories from "../../lib/forumCategories" import TopicsList from "../../components/forum/TopicsList" import CreateTopicSliderOver from "../../components/forum/CreateTopicSlideOver" import LoginModal from "../../components/forum/LoginModal" export async function getStaticProps(ctx) { // Forum related calls const forumTopics = await getAllForumTopics() const forumCategories = await getAllForumCategories() const forumTopicsData = JSON.parse(forumTopics) const forumCategoriesData = JSON.parse(forumCategories) return { props: { forumTopics: forumTopicsData, forumCategories: forumCategoriesData, }, revalidate: 1, } } const ForumIndexPage = (props) => { const { user } = useUser() const [isSlideOverOpen, setIsSlideOverOpen] = useState(false) const [isLoginModalOpen, setIsLoginModalOpen] = useState(false) // Forum threads data const forumTopics = props.forumTopics.data const forumCategories = props.forumCategories.data forumTopics.sort(function (a, b) { // Turn your strings into dates, and then subtract them // to get a value that is either negative, positive, or zero. return new Date(b.topic.data.created_at) - new Date(a.topic.data.created_at) }) const openSlideOver = () => { user?.isLoggedIn ? setIsSlideOverOpen(!isSlideOverOpen) : setIsLoginModalOpen(!isLoginModalOpen) } return ( <> <NextSeo title={`Remotebond Forum a hub for everything related to remote work`} description="The Remotebond Forum is a how-to content hub for all things remote work." canonical={`https://remotebond.com/forum`} openGraph={{ url: `https://remotebond.com/forum`, title: `Remotebond Forum a hub for everything related to remote work`, description: `The Remotebond Forum is a how-to content hub for all things remote work.`, }} /> <BreadcrumbJsonLd itemListElements={[ { position: 1, name: "remotebond.com", item: "https://remotebond.com", }, { position: 2, name: "Forum", }, ]} /> <div className="relative overflow-hidden bg-black mb-12 z-10"> <div className="max-w-screen-xl mx-auto py-16 px-4 sm:px-6 lg:py-12 lg:px-8"> <div> <h1 className="text-center text-3xl leading-10 font-extrabold text-white"> Remote Work Forum </h1> <h2 className="text-rb-gray-4 text-center w-full"> The Remotebond Forum is a how-to content hub for all things remote work. From best practices for job seekers, tools, resources and news to hiring tips and processes, the Remotebond forum is meant to be community-driven documentation on how to get remote work right. </h2> </div> <div className="flex justify-center items-center mt-8 space-y-4 sm:space-y-0 sm:space-x-4 flex-col sm:flex-row"> <span className="inline-flex rounded-md shadow-sm"> <button onClick={openSlideOver} className="inline-flex items-center px-6 py-3 border border-transparent text-base leading-6 font-bold rounded-md text-white bg-rb-green-6 hover:bg-rb-green-5 hover:text-white focus:outline-none focus:border-rb-green-7 focus:shadow-outline-blue active:bg-rb-green-7 transition ease-in-out duration-150" > Create topic </button> </span> </div> </div> </div> <div className="max-w-screen-xl z-10 w-full mx-auto py-4 px-4 sm:px-6 flex space-x-0 md:space-x-8 flex-col md:flex-row"> <Sidebar categories={forumCategories} /> <TopicsList topics={forumTopics} /> </div> <CreateTopicSliderOver isOpen={isSlideOverOpen} handleClose={() => setIsSlideOverOpen(!isSlideOverOpen)} categories={forumCategories} /> <LoginModal isModalOpen={isLoginModalOpen} handleClose={() => setIsLoginModalOpen(!isLoginModalOpen)} /> </> ) } export default ForumIndexPage