am i doing this correctly and what am i doing wrong? | Ben Awad | Page 1

timid igloo Sep 19, 2022, 1:07 AM

#

@fickle tangle hey

fickle tangle Sep 19, 2022, 1:08 AM

#

timid igloo <@505373999904194560> hey

hi

#

why is home red?

#

and am i doing it correctly?

timid igloo Sep 19, 2022, 1:08 AM

#

whats the problem

fickle tangle Sep 19, 2022, 1:08 AM

#

timid igloo whats the problem

Home is red

#

n im wondering if im doing swr correctly

timid igloo Sep 19, 2022, 1:09 AM

#

hover over the Home component and take a screenshot

#

@fickle tangle specifically I want to know whats the error

fickle tangle Sep 19, 2022, 1:10 AM

#

timid igloo <@505373999904194560> specifically I want to know whats the error

fickle tangle Sep 19, 2022, 1:10 AM

#

timid igloo hover over the Home component and take a screenshot

it disappears when i go to take a screenshot

timid igloo Sep 19, 2022, 1:12 AM

#

well it basically says you're trying to use undefined instead of an Element.
is this like a Next.js thing?

fickle tangle Sep 19, 2022, 1:12 AM

#

timid igloo well it basically says you're trying to use undefined instead of an Element. is ...

i assume so

#

matt was helping me yesterday lol

twilit timber Sep 19, 2022, 1:14 AM

#

Unfortunately I don't actually know any Next.js

fickle tangle Sep 19, 2022, 1:14 AM

#

twilit timber Unfortunately I don't actually know any Next.js

really

#

no way

#

i really thought u knew

timid igloo Sep 19, 2022, 1:15 AM

#

maybe https://melvingeorge.me/blog/set-types-for-functional-components-props-typescript-nextjs

MELVIN GEORGE Blog

How to set types for functional component props in Nextjs with Type...

Learn how to use NextPage generic type to set types for functional component props in Nextjs with TypeScript

twilit timber Sep 19, 2022, 1:15 AM

#

I know TypeScript but not Next.js haha

#

Looks like the issue is the return type of your function

fickle tangle Sep 19, 2022, 1:15 AM

#

timid igloo maybe https://melvingeorge.me/blog/set-types-for-functional-components-props-typ...

let me check this out

timid igloo Sep 19, 2022, 1:16 AM

#

shit

#

you're not returning JSX i guess

fickle tangle Sep 19, 2022, 1:16 AM

#

timid igloo maybe https://melvingeorge.me/blog/set-types-for-functional-components-props-typ...

i used this yesterday

#

if i remove this it works

#

see

#

twilit timber Sep 19, 2022, 1:17 AM

#

Type (props: Props) => Element | undefined is not assignable to type NextPage<Props, Props> means that you've told it that Home will be a NextPage, but given it something else. I believe that the thing you've given it is unable to be coerced into NextPage because it sometimes returns undefined.

timid igloo Sep 19, 2022, 1:17 AM

#

yeah, use a ternary operator to send a fallback component

fickle tangle Sep 19, 2022, 1:17 AM

#

twilit timber Type `(props: Props) => Element | undefined` is not assignable to type `NextPage...

i kinda understand what u r saying

twilit timber Sep 19, 2022, 1:17 AM

#

Does it work if you change the "Refreshing...." into JSX?

fickle tangle Sep 19, 2022, 1:18 AM

#

twilit timber Does it work if you change the `"Refreshing...."` into JSX?

nope

#

is it a huge problem or we can ignore it?

timid igloo Sep 19, 2022, 1:18 AM

#

try:

if (!data) return <p>NOOO!!!!</p>
return (
  <>
  <Head>...
  <Head/>
  </>
);

fickle tangle Sep 19, 2022, 1:19 AM

#

timid igloo try: ```ts if (!data) return NOOO!!!! return ( <> <Head>... <Head/>...

this worked

timid igloo Sep 19, 2022, 1:19 AM

#

prayge

twilit timber Sep 19, 2022, 1:20 AM

#

Yeah so you just have to turn "Refreshing...." into an Element like Refreshing.... instead of a string

fickle tangle Sep 19, 2022, 1:20 AM

#

thank you myy brother

timid igloo Sep 19, 2022, 1:20 AM

#

may god bless Ben Awad

fickle tangle Sep 19, 2022, 1:20 AM

#

waitttttttttt

#

wait wait

timid igloo Sep 19, 2022, 1:20 AM

#

what??

fickle tangle Sep 19, 2022, 1:20 AM

#

#

it broke

#

suppose to be this

timid igloo Sep 19, 2022, 1:21 AM

#

yeah this is bc you're sending when there's no data
once u get data it renders the latter

fickle tangle Sep 19, 2022, 1:21 AM

#

timid igloo yeah this is bc you're sending when there's no data once u get data it r...

so it will take a while?

timid igloo Sep 19, 2022, 1:22 AM

#

probably, if that's an issue try react-query

fickle tangle Sep 19, 2022, 1:22 AM

#

hmm i just want it to update when someone donates lol

timid igloo Sep 19, 2022, 1:22 AM

#

SWR is more like a wrapper around fetch

fickle tangle Sep 19, 2022, 1:23 AM

#

eah

#

yeah*

#

fickle tangle Sep 19, 2022, 1:27 AM

#

fickle tangle

is this a problem tho?

#

like is it bad

timid igloo Sep 19, 2022, 1:27 AM

#

yeah that might work. the issue with that is you're re-fetching every n-seconds and the data might have not changed during that time.
not sure if SWR has cashing built-in

fickle tangle Sep 19, 2022, 1:27 AM

#

or can we ignore it?

fickle tangle Sep 19, 2022, 1:28 AM

#

timid igloo yeah that might work. the issue with that is you're re-fetching every n-seconds ...

oh ok

#

bc it isnt really a eror

#

erroor

#

error

timid igloo Sep 19, 2022, 1:30 AM

#

if it isn't critical I'd just re-fetch on demand (refresh the page)
i think there's a way to make the page static and still have updated data

fickle tangle Sep 19, 2022, 1:30 AM

#

timid igloo if it isn't critical I'd just re-fetch on demand (refresh the page) i think ther...

alright ill have to get someone to donate a dollar to test

timid igloo Sep 19, 2022, 1:31 AM

#

u could set up a fake api

fickle tangle Sep 19, 2022, 1:32 AM

#

timid igloo u could set up a fake api

i forgot abt tht but the dollar helps for the hackathon

#

it turns out tht is a big problem

timid igloo Sep 19, 2022, 1:35 AM

#

send the code with triple ` surrounding it

fickle tangle Sep 19, 2022, 1:35 AM

#

timid igloo send the code with triple ` surrounding it

ok

#

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import qrcode from "../public/assets/qrcode_bank.hackclub.com.png"
import useSWR from 'swr'


const api_url = 'https://bank.hackclub.com/api/v3/organizations/unite-hacks/donations'


interface Donation {
  id: string;
  object: string;
  href: string;
  donor: {
    name: string;
  };
  amount_cents: number;
}

interface Props {
  donations: Donation[];
}


const Home: NextPage<Props> = (props) => {
  const { data } = useSWR(api_url);

  if (!data) return (
<>
    <Head>
        <title>Unite Hacks Bake Sale</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
    <div className="flex min-h-screen flex-col items-center justify-center py-2">
      <div className='font-extrabold text-[24px]'>Unite Hacks Bake Sale🍪</div>
      <Image src={qrcode} alt="qrcode" width={300} height={300}/>
      {props.donations.map((donation: Donation) => (
        <div key={donation.id}>
           <div className='flex text-center background2'>
             <span className='text-[18px] background'>DONATION FROM {donation.donor.name}</span>
             <span className='text-[18px] background'>${donation.amount_cents/100}.00</span>
           </div> 
         </div>
      ))}
    </div>  
</>
  )
}

export const getServerSideProps = async () => {
  const res = await fetch(api_url);
  const data = await  res.json();

  return {
    props: {donations: data}
  }
}

export default Home;

timid igloo Sep 19, 2022, 1:39 AM

#

const Home: NextPage<Props> = (props) => {
  const { data } = useSWR(api_url);

  if (!data) {
    return <div>
        We're sorry there's no data.... (Make a spinner of something)
    </div>
  }

    return (
        <>
            <Head>
                <title>Unite Hacks Bake Sale</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <div className="flex min-h-screen flex-col items-center justify-center py-2">
            <div className='font-extrabold text-[24px]'>Unite Hacks Bake Sale🍪</div>
            <Image src={qrcode} alt="qrcode" width={300} height={300}/>
            {props.donations.map((donation: Donation) => (
                <div key={donation.id}>
                <div className='flex text-center background2'>
                    <span className='text-[18px] background'>DONATION FROM {donation.donor.name}</span>
                    <span className='text-[18px] background'>${donation.amount_cents/100}.00</span>
                </div> 
                </div>
            ))}
            </div>  
        </>
    );
}

fickle tangle Sep 19, 2022, 1:41 AM

#

timid igloo ```ts const Home: NextPage<Props> = (props) => { const { data } = useSWR(api_u...

but it still dosent return the data

timid igloo Sep 19, 2022, 1:42 AM

#

my bad, you're getting the data from the server

fickle tangle Sep 19, 2022, 1:42 AM

#

timid igloo my bad, you're getting the data from the server

huh

timid igloo Sep 19, 2022, 1:43 AM

#

like you don't need this const { data } = useSWR(api_url);

#

bc you are using const res = await fetch(api_url);

fickle tangle Sep 19, 2022, 1:44 AM

#

timid igloo like you don't need this `const { data } = useSWR(api_url);`

but then i would get a error if i remove this

timid igloo Sep 19, 2022, 1:44 AM

#

and in theory you're getting props: {donations: data} inside props

fickle tangle Sep 19, 2022, 1:45 AM

#

timid igloo and in theory you're getting `props: {donations: data}` inside props

correct

#

timid igloo Sep 19, 2022, 1:47 AM

#

is more a problem with typescript rather than a fetch problem

const Home: NextPage<Props> = (props) => {
    const { donations } = props;
    return (
       <>
            <Head>
                <title>Unite Hacks Bake Sale</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <div className="flex min-h-screen flex-col items-center justify-center py-2">
            <div className='font-extrabold text-[24px]'>Unite Hacks Bake Sale🍪</div>
            <Image src={qrcode} alt="qrcode" width={300} height={300}/>
            
            {donations.length > 0 && donations.map((donation) => (
                <div key={donation.id}>
                <div className='flex text-center background2'>
                    <span className='text-[18px] background'>DONATION FROM {donation.donor.name}</span>
                    <span className='text-[18px] background'>${donation.amount_cents/100}.00</span>
                </div> 
                </div>
            ))}
            </div>  
        </>
    );
}

fickle tangle Sep 19, 2022, 1:48 AM

#

wait wat did u change lol

fickle tangle Sep 19, 2022, 1:48 AM

#

timid igloo is more a problem with typescript rather than a fetch problem ```ts const Home: ...

so it should update when someone donates?

timid igloo Sep 19, 2022, 1:51 AM

#

fickle tangle so it should update when someone donates?

let's say someone donates, how in the world is the client (your react code) going to know that?
(you need a way to trigger an "event" on the client)
you could use: websockets to have a real-time update and I'll let u decide if that's too much work

fickle tangle Sep 19, 2022, 1:52 AM

#

timid igloo let's say someone donates, how in the world is the client (your react code) goin...

yeah i agree but if i just refresh it works

timid igloo Sep 19, 2022, 1:52 AM

#

a good-enough solution would be this #1021224125978656829 message
literally fetch the api every 10 minutes, setup a cashing mechanism and you're done

timid igloo Sep 19, 2022, 1:53 AM

#

fickle tangle yeah i agree but if i just refresh it works

yeah, the getServerSideProps means get this props from the server (fetch your endpoint)

fickle tangle Sep 19, 2022, 1:53 AM