Skip to content

Instantly share code, notes, and snippets.

@meetbryce
Created September 25, 2022 15:56
Show Gist options
  • Save meetbryce/8d250b94057981f7f17cc0dc73abc274 to your computer and use it in GitHub Desktop.
Save meetbryce/8d250b94057981f7f17cc0dc73abc274 to your computer and use it in GitHub Desktop.
Data only loads after internal navigation
import {GetServerSideProps, InferGetServerSidePropsType, NextPage} from 'next';
import styles from '../styles/Home.module.css';
import Footer from '../components/Footer';
import Header from '../components/Header';
import Meta from '../components/Meta';
import {useEffect, useState} from 'react';
import Link from 'next/link';
import {supabaseClient, withPageAuth} from '@supabase/auth-helpers-nextjs';
export const getServerSideProps: GetServerSideProps = withPageAuth({redirectTo: '/auth'});
const Projects: NextPage = ({user}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
const [projects, setProjects] = useState<object | null>(null); // todo: Project types
const [isLoading, setLoading] = useState<boolean>(false);
useEffect(() => {
// fixme: works when navigating within the app, but not when the page is loaded from scratch
async function loadData() {
console.log({user});
const {data} = await supabaseClient.from('projects').select();
setLoading(false);
setProjects(data);
}
setLoading(true);
// Only run query once user is logged in.
// todo: error handling
if (user) loadData().then(() => console.log('Projects loaded', projects));
}, [user]);
return (
<div className={styles.container}>
<Meta titlePrefix={`Projects`} description={'todo'}></Meta>
<Header user={user} />
<main className={styles.main}>
<h1 className={styles.title}>Prioritizr Projects</h1>
<br /><br />
<div className={styles.grid3}>
{!projects && isLoading && <p className={styles.description}>Loading projects...</p>}
{
// @ts-ignore - todo: Project types
projects && projects.map(p => (<Link href={`projects/${p.id}`} key={p.id}>
<a className={styles.card}>
<h2 className={styles.solo}>{p.name}</h2>
</a>
</Link>))
}
{/* todo: module logic for handling partially-filled final row */}
</div>
<div className={styles.grid}>
<Link href='/new'>
<a className={styles.card}>
<h2>New Project &rarr;</h2>
<p>Need to prioritize a new set of things? Create a new project to get started on your own or with your
team.</p>
</a>
</Link>
</div>
</main>
<Footer />
</div>
);
};
export default Projects;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment