Query params update but app doesn't (sometimes)

Answered

berkserbet posted this in #help-forum

berkserbetOP

2024-01-29T03:18:11.000Z

I have an ecommerce app with some filters. When the filters are checked the url on my site updates. [my site](https://storefront.community/)

But sometimes when the url changes the products don't get filtered. So there basically isn't a state change. I can recreate it, so it's not random - but I don't understand what could be the issue. I'm new to nextjs - but haven't seen url update not update the app.

Answered by berkserbet

Thanks for the help!

View full answer

898 Replies

DirtyCajunRice | AppDir

2024-01-29T03:53:36.000Z

a link to your site isnt relevant. Please post code showing where you get the params, and where you consume them

berkserbetOP

2024-01-29T03:54:05.000Z

Sure, I just didn't want to post a ton of code. Thank you

berkserbetOP

2024-01-29T04:10:16.000Z

It's just one page.

Here is /app/page.tsx

import React, { Suspense } from 'react'
import ProductBrowser from './ProductBrowser';

interface Props {
  searchParams: {
    r: string,
    search: string,
    genders: string,
    sizes: string,
    conditions: string,
    countries: string,
    brands: string,
    pages: number
  }
}

export default function Home({searchParams: { r, search, genders, sizes, conditions, countries, brands, pages }}: Props) {

  return (
    <main>
      <Suspense fallback={<div className="h-screen flex items-center justify-center pb-56"><span className="loading loading-dots loading-lg text-secondary text-center h-screen flex items-center justify-center"></span></div>}>
        <ProductBrowser search={search} selected_subreddits={r} selected_genders={genders} selected_sizes={sizes} selected_conditions={conditions} selected_countries={countries} selected_brands={brands} pages={pages}/>
      </Suspense>
    </main>
  );
}

Here is /app/ProductBrowser.tsx

import React from 'react'
import { promises as fs } from 'fs';
import path from 'path'
import ProductCards from './ProductCards'


interface Props {
  search: string,
  selected_subreddits: string,
  selected_genders: string,
  selected_sizes: string,
  selected_conditions: string,
  selected_countries: string,
  selected_brands: string,
  pages: number
}

const ProductBrowser = async ({ search, selected_subreddits, selected_genders, selected_sizes, selected_conditions, selected_countries, selected_brands, pages }: Props) => {

  const filePath = path.join(process.cwd(), 'json/listings.json');
  const file = await fs.readFile(filePath, 'utf8');
  const products = JSON.parse(file)
  
  return (
    <ProductCards products={products} search={search} selected_subreddits={selected_subreddits} selected_genders={selected_genders} selected_sizes={selected_sizes} selected_conditions={selected_conditions} selected_countries={selected_countries} selected_brands={selected_brands} pages={pages}/>
  )
}

export default ProductBrowser

DirtyCajunRice | AppDir

2024-01-29T04:11:22.000Z

soâ€¦

berkserbetOP

2024-01-29T04:11:37.000Z

I was about to share the last file

DirtyCajunRice | AppDir

2024-01-29T04:11:45.000Z

first off

berkserbetOP

2024-01-29T04:11:46.000Z

Do you already see an issue?

DirtyCajunRice | AppDir

2024-01-29T04:11:59.000Z

there are some silly coding habits im gonna point out

so you can improve

berkserbetOP

2024-01-29T04:12:11.000Z

Please do! I'm new to this

DirtyCajunRice | AppDir

2024-01-29T04:12:38.000Z

the search params are the same as the props for the component

you are directly passing them

so define them in the component only

export the interface

and import it to page and use it

then you dont have to spread searchParams

you can do <ProductBrowser {...searchParams} />

berkserbetOP

2024-01-29T04:14:09.000Z

I think I get what you're saying

DirtyCajunRice | AppDir

2024-01-29T04:14:13.000Z

secondly

berkserbetOP

2024-01-29T04:14:19.000Z

Let me quickly try that

DirtyCajunRice | AppDir

2024-01-29T04:14:19.000Z

ALL search params are string

doesnt matter that it can be a number. it is a string

so if you want to make pages a number, you need to do that after

thirdly, all searchParams can also be an array of strings

so you need to check for that

berkserbetOP

2024-01-29T04:16:21.000Z

So I updated my app/page.tsx to be this:

import React, { Suspense } from 'react'
import ProductBrowser from './ProductBrowser';

interface Props {
  searchParams: {
    r: string,
    search: string,
    genders: string,
    sizes: string,
    conditions: string,
    countries: string,
    brands: string,
    pages: number
  }
}

export default function Home({searchParams}: Props) {

  return (
    <main>
      <Suspense fallback={<div className="h-screen flex items-center justify-center pb-56"><span className="loading loading-dots loading-lg text-secondary text-center h-screen flex items-center justify-center"></span></div>}>
        <ProductBrowser searchParams={searchParams}/>
      </Suspense>
    </main>
  );
}

Just exporting the searchParams

DirtyCajunRice | AppDir

2024-01-29T04:16:48.000Z

wellâ€¦ you can do it that way tooâ€¦ but you dont need to

berkserbetOP

2024-01-29T04:18:16.000Z

Can I access search params directly from components without passing it around?

DirtyCajunRice | AppDir

2024-01-29T04:20:18.000Z

  export type ProductSearchParams: Record<'r' | 'search' | 'genders' | 'sizes' | 'conditions' | 'countries' | 'brands' | 'pages', string | string[]>

put that in your ProductBrowser.tsx

and change your Props to that

so remove Props interface completely

then also import that into your page.tsx

berkserbetOP

2024-01-29T04:22:30.000Z

Sorry I'm a bit confused - what's the first thing I need to do from my existing codebase?

DirtyCajunRice | AppDir

2024-01-29T04:22:53.000Z

interface Props {
  searchParams: ProductSearchParams
}

export default function Home({searchParams}: Props)

copy that type into your product browser file

berkserbetOP

2024-01-29T04:23:46.000Z

Giving a few errors

Is it supposed to be =

rather than :

Also 'Record' only refers to a type, but is being used as a value here.ts(2693)

DirtyCajunRice | AppDir

2024-01-29T04:24:10.000Z

yeah

im on mobile

berkserbetOP

2024-01-29T04:24:25.000Z

Errors gone

DirtyCajunRice | AppDir

2024-01-29T04:24:49.000Z

show me your product browser page again now updated

berkserbetOP

2024-01-29T04:25:30.000Z

I haven't been able to het it to work yet, trying to understand the page.tsx changes

DirtyCajunRice | AppDir

2024-01-29T04:25:38.000Z

nono

ignore page.tsx

ignore getting it working

just show it

its 3 steps

berkserbetOP

2024-01-29T04:25:56.000Z

import React from 'react'
import { promises as fs } from 'fs';
import path from 'path'
import ProductCards from './ProductCards'
export type ProductSearchParams = Record<'r' | 'search' | 'genders' | 'sizes' | 'conditions' | 'countries' | 'brands' | 'pages', string | string[]>


interface Props {
  search: string,
  selected_subreddits: string,
  selected_genders: string,
  selected_sizes: string,
  selected_conditions: string,
  selected_countries: string,
  selected_brands: string,
  pages: number
}

const ProductBrowser = async ({ search, selected_subreddits, selected_genders, selected_sizes, selected_conditions, selected_countries, selected_brands, pages }: Props) => {

  const filePath = path.join(process.cwd(), 'json/listings.json');
  const file = await fs.readFile(filePath, 'utf8');
  const products = JSON.parse(file)
  
  return (
    <ProductCards products={products} search={search} selected_subreddits={selected_subreddits} selected_genders={selected_genders} selected_sizes={selected_sizes} selected_conditions={selected_conditions} selected_countries={selected_countries} selected_brands={selected_brands} pages={pages}/>
  )
}

export default ProductBrowser

I don't use ProductSearchParams

DirtyCajunRice | AppDir

2024-01-29T04:26:10.000Z

nice. delete Props

berkserbetOP

2024-01-29T04:26:29.000Z

Cool, app still works

DirtyCajunRice | AppDir

2024-01-29T04:26:42.000Z

change the : Props in the component to ProductSearchParams

remove all the selected_ prefix nonsense

berkserbetOP

2024-01-29T04:27:45.000Z

Then what do I pass to ProductCards?

DirtyCajunRice | AppDir

2024-01-29T04:27:58.000Z

the props

berkserbetOP

2024-01-29T04:28:00.000Z

const ProductBrowser = async ({}: ProductSearchParams) => {
  const filePath = path.join(process.cwd(), 'json/listings.json');
  const file = await fs.readFile(filePath, 'utf8');
  const products = JSON.parse(file)
  
  return (
    <ProductCards products={products} search={search} selected_subreddits={selected_subreddits} selected_genders={selected_genders} selected_sizes={selected_sizes} selected_conditions={selected_conditions} selected_countries={selected_countries} selected_brands={selected_brands} pages={pages}/>
  )
}

export default ProductBrowser

DirtyCajunRice | AppDir

2024-01-29T04:28:01.000Z

just named properly

nono

leave the props

just remove the prefix

you added a selected_ prefix for no reason

to all the keys

berkserbetOP

2024-01-29T04:29:36.000Z

import React from 'react'
import { promises as fs } from 'fs';
import path from 'path'
import ProductCards from './ProductCards'
export type ProductSearchParams = Record<'r' | 'search' | 'genders' | 'sizes' | 'conditions' | 'countries' | 'brands' | 'pages', string | string[]>

const ProductBrowser = async ({ r, search, genders, sizes, conditions, countries, brands, pages }: ProductSearchParams) => {
  const filePath = path.join(process.cwd(), 'json/listings.json');
  const file = await fs.readFile(filePath, 'utf8');
  const products = JSON.parse(file)
  
  return (
    <ProductCards products={products} search={search} selected_subreddits={r} selected_genders={genders} selected_sizes={sizes} selected_conditions={conditions} selected_countries={countries} selected_brands={brands} pages={pages}/>
  )
}

export default ProductBrowser

DirtyCajunRice | AppDir

2024-01-29T04:29:58.000Z

yes exactly

and when we are done you can do the same thing to ProductCards

but 1 thing at a time

berkserbetOP

2024-01-29T04:30:24.000Z

Seeing a lot of

Type 'string | string[]' is not assignable to type 'string'.
  Type 'string[]' is not assignable to type 'string'.

DirtyCajunRice | AppDir

2024-01-29T04:30:47.000Z

yep. what i was saying you need to check for. we will get to that

go to page.tsx

import ProductSearchParams

from your other file

berkserbetOP

2024-01-29T04:31:26.000Z

Done

import { ProductSearchParams } from './ProductBrowser';

DirtyCajunRice | AppDir

2024-01-29T04:31:40.000Z

make your searchParams: ProductSearchParams

in your page props def

berkserbetOP

2024-01-29T04:32:41.000Z

import React, { Suspense } from 'react'
import ProductBrowser from './ProductBrowser';
import { ProductSearchParams } from './ProductBrowser';

interface Props {
  ProductSearchParams: {
    r: string,
    search: string,
    genders: string,
    sizes: string,
    conditions: string,
    countries: string,
    brands: string,
    pages: number
  }
}

export default function Home({ProductSearchParams: { r, search, genders, sizes, conditions, countries, brands, pages }}: Props) {

  return (
    <main>
      <Suspense fallback={<div className="h-screen flex items-center justify-center pb-56"><span className="loading loading-dots loading-lg text-secondary text-center h-screen flex items-center justify-center"></span></div>}>
        <ProductBrowser search={search} selected_subreddits={r} selected_genders={genders} selected_sizes={sizes} selected_conditions={conditions} selected_countries={countries} selected_brands={brands} pages={pages}/>
      </Suspense>
    </main>
  );
}

DirtyCajunRice | AppDir

2024-01-29T04:32:46.000Z

then where you have your ProductBrowser in page.tsx just make it <ProductBrowser {...searchParams } />

nono

berkserbetOP

2024-01-29T04:33:16.000Z

I see. ðŸ™‚

import React, { Suspense } from 'react'
import ProductBrowser from './ProductBrowser';
import { ProductSearchParams } from './ProductBrowser';

interface Props {
  searchParams: ProductSearchParams
}

export default function Home({searchParams: { r, search, genders, sizes, conditions, countries, brands, pages }}: Props) {

  return (
    <main>
      <Suspense fallback={<div className="h-screen flex items-center justify-center pb-56"><span className="loading loading-dots loading-lg text-secondary text-center h-screen flex items-center justify-center"></span></div>}>
      <ProductBrowser {...searchParams } />
      </Suspense>
    </main>
  );
}

Error is Cannot find name 'searchParams'. Did you mean 'URLSearchParams'?ts(2552)

DirtyCajunRice | AppDir

2024-01-29T04:34:20.000Z

import React, { Suspense } from 'react'
import ProductBrowser from './ProductBrowser';
import { ProductSearchParams } from './ProductBrowser';

interface Props {
  searchParams: ProductSearchParams
}

export default function Home({ searchParams }: Props) {

  return (
    <main>
      <Suspense fallback={<div className="h-screen flex items-center justify-center pb-56"><span className="loading loading-dots loading-lg text-secondary text-center h-screen flex items-center justify-center"></span></div>}>
        <ProductBrowser {â€¦searchParams} />
      </Suspense>
    </main>
  );
}

simple

like this

gotta change those dots tho

iphone fucks up the dots

gotta type them manually haha

berkserbetOP

2024-01-29T04:34:58.000Z

Done!

Works

No errors

DirtyCajunRice | AppDir

2024-01-29T04:35:07.000Z

see how the page has no errors?

magic ðŸ˜‰

now

berkserbetOP

2024-01-29T04:35:16.000Z

Magic

DirtyCajunRice | AppDir

2024-01-29T04:35:45.000Z

now before we move on

where are you going to host this thing

berkserbetOP

2024-01-29T04:36:02.000Z

Vercel I host it on

DirtyCajunRice | AppDir

2024-01-29T04:36:13.000Z

ok. then your fs read is silly and wasteful

and the component doesnt need async nor suspense

berkserbetOP

2024-01-29T04:36:32.000Z

ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T04:36:34.000Z

just import the json

berkserbetOP

2024-01-29T04:36:38.000Z

The json can get big

DirtyCajunRice | AppDir

2024-01-29T04:36:43.000Z

doesnt matter

berkserbetOP

2024-01-29T04:36:47.000Z

And changes often

Cool

DirtyCajunRice | AppDir

2024-01-29T04:36:57.000Z

it doesnt change without redeploying

berkserbetOP

2024-01-29T04:37:01.000Z

Correct

DirtyCajunRice | AppDir

2024-01-29T04:37:10.000Z

so its literally the same thing either way

berkserbetOP

2024-01-29T04:37:22.000Z

Trying

import products from '../json/listings.json'?

DirtyCajunRice | AppDir

2024-01-29T04:38:04.000Z

you use cwd

so 1 dot

berkserbetOP

2024-01-29T04:38:24.000Z

VScode autofilled

DirtyCajunRice | AppDir

2024-01-29T04:38:25.000Z

1 dot == same folder 2 dots == parent folder

vscode is caca

ðŸ˜‚

berkserbetOP

2024-01-29T04:38:41.000Z

Got it

ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T04:39:00.000Z

ok so remove async and just pass that along

also remove suspense from parent as the compnent isnt async so it doesnt do anything

berkserbetOP

2024-01-29T04:39:35.000Z

New page.tsx:

import React, { Suspense } from 'react'
import ProductBrowser from './ProductBrowser';
import { ProductSearchParams } from './ProductBrowser';

interface Props {
  searchParams: ProductSearchParams
}

export default function Home({ searchParams }: Props) {

  return (
    <main>
      <ProductBrowser {...searchParams} />
    </main>
  );
}

DirtyCajunRice | AppDir

2024-01-29T04:39:43.000Z

so clean

berkserbetOP

2024-01-29T04:40:05.000Z

Current ProductBrowser.tsx

import React from 'react'
import ProductCards from './ProductCards'
export type ProductSearchParams = Record<'r' | 'search' | 'genders' | 'sizes' | 'conditions' | 'countries' | 'brands' | 'pages', string | string[]>
import products from './json/listings.json'

const ProductBrowser = ({ r, search, genders, sizes, conditions, countries, brands, pages }: ProductSearchParams) => {
  
  return (
    <ProductCards products={products} search={search} selected_subreddits={r} selected_genders={genders} selected_sizes={sizes} selected_conditions={conditions} selected_countries={countries} selected_brands={brands} pages={pages}/>
  )
}

export default ProductBrowser

DirtyCajunRice | AppDir

2024-01-29T04:40:15.000Z

less clean haha

berkserbetOP

2024-01-29T04:40:16.000Z

I don't even need the productbrowser now I think

DirtyCajunRice | AppDir

2024-01-29T04:40:24.000Z

you do not ðŸ™‚

berkserbetOP

2024-01-29T04:40:25.000Z

I can just pass directly

DirtyCajunRice | AppDir

2024-01-29T04:40:46.000Z

so update your Product card params to use the same logic you used for the browser

berkserbetOP

2024-01-29T04:41:06.000Z

On it

So my ProductCards.tsx starts as:

'use client'

import React from 'react'
import Link from 'next/link'
import SearchContainer from './SearchContainer';
import Image from 'next/image'
import { useRouter } from 'next/navigation';
export type ProductSearchParams = Record<'r' | 'search' | 'genders' | 'sizes' | 'conditions' | 'countries' | 'brands' | 'pages', string | string[]>
import products from './json/listings.json'

DirtyCajunRice | AppDir

2024-01-29T04:43:23.000Z

do you wanna make the ProductSearchParams cleaner?

how comfortable are you with typescript

berkserbetOP

2024-01-29T04:43:53.000Z

I do

Not super

Up to you

DirtyCajunRice | AppDir

2024-01-29T04:47:09.000Z

const productSearchParams =  ['r', 'search', 'genders',  'sizes', 'conditions', 'countries', 'brands', 'pages'] as const;
type ProductSearchParam = typeof allSearchParams[number];
export type ProductSearchParams = Record<ProductSearchParam, string | string[]>;

tada

berkserbetOP

2024-01-29T04:47:36.000Z

Amazing!

DirtyCajunRice | AppDir

2024-01-29T04:47:38.000Z

if any of that is confusing, ask

copying without understanding is the worst sin lol

berkserbetOP

2024-01-29T04:48:42.000Z

What is "as const"

DirtyCajunRice | AppDir

2024-01-29T04:48:46.000Z

coding on phone is such a pain lol

berkserbetOP

2024-01-29T04:48:51.000Z

What is it for I mean

DirtyCajunRice | AppDir

2024-01-29T04:48:56.000Z

means its read only and cant be edited

so its â€œstaticâ€ basically

you cant infer a type from a mutable array

berkserbetOP

2024-01-29T04:49:22.000Z

What is allSearchParams?

DirtyCajunRice | AppDir

2024-01-29T04:49:28.000Z

only a static (immutable) arrat

berkserbetOP

2024-01-29T04:49:42.000Z

I don't have that variable

DirtyCajunRice | AppDir

2024-01-29T04:49:47.000Z

just a list of the keys we will use, separated for organization purposes

its the first thing

whoops

all should be product

berkserbetOP

2024-01-29T04:50:07.000Z

Got it

DirtyCajunRice | AppDir

2024-01-29T04:50:10.000Z

again. phone -,/

so the type is saying â€œthis type is all the keys of this arrayâ€

berkserbetOP

2024-01-29T04:51:01.000Z

So what does the second line do type ProductSearchParam = typeof allSearchParams[number]

DirtyCajunRice | AppDir

2024-01-29T04:51:09.000Z

what i just said

berkserbetOP

2024-01-29T04:51:12.000Z

Is it looping somehow

DirtyCajunRice | AppDir

2024-01-29T04:51:15.000Z

knew you would ask haha

its the typescript way to say â€œall the items in the array as type optionsâ€

berkserbetOP

2024-01-29T04:52:19.000Z

Sorry I don't get it

" as type options"

This part

DirtyCajunRice | AppDir

2024-01-29T04:52:44.000Z

when you hover over it

does it show you the options?

berkserbetOP

2024-01-29T04:53:14.000Z

Like that?

DirtyCajunRice | AppDir

2024-01-29T04:53:56.000Z

yes but hover over the left side

the type itself

berkserbetOP

2024-01-29T04:54:20.000Z

This one?

DirtyCajunRice | AppDir

2024-01-29T04:54:26.000Z

see what it did?

it plucked all the items out of the array and made them â€œthis or this or thisâ€ as a type

berkserbetOP

2024-01-29T04:55:08.000Z

But how does it know the type?

We haven't given any

DirtyCajunRice | AppDir

2024-01-29T04:55:19.000Z

we did

we said it is the items in the array

its a new type

of those strings

berkserbetOP

2024-01-29T04:55:52.000Z

Got it

DirtyCajunRice | AppDir

2024-01-29T04:55:58.000Z

â€œjust typescript thingsâ€

ðŸ˜‚

berkserbetOP

2024-01-29T04:56:05.000Z

ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T04:56:14.000Z

and you know what a Record is?

berkserbetOP

2024-01-29T04:56:18.000Z

And I get the third line

DirtyCajunRice | AppDir

2024-01-29T04:56:22.000Z

ok cool

berkserbetOP

2024-01-29T04:56:26.000Z

I don't actually

What is Record

I assumed but not sure

DirtyCajunRice | AppDir

2024-01-29T04:56:45.000Z

a record is just an object, but where you already know all the key and value types

so you dont have to manually define it because it can be inferred

your original one was a â€œmanualâ€ record

this one is â€œautomaticâ€ because we have a key type

berkserbetOP

2024-01-29T04:57:42.000Z

Which is string or array of strings

Right?

DirtyCajunRice | AppDir

2024-01-29T04:57:50.000Z

thats the value type

the key type is the array of productSearchParams

so stringâ€¦. but â€œspecificâ€

berkserbetOP

2024-01-29T04:58:35.000Z

Very cool

DirtyCajunRice | AppDir

2024-01-29T04:58:49.000Z

so record says â€œfor each item in the key type, the value type isâ€

berkserbetOP

2024-01-29T04:58:50.000Z

The next thing I did was import the json

DirtyCajunRice | AppDir

2024-01-29T04:58:55.000Z

yes.

do you have a type for your json?

berkserbetOP

2024-01-29T04:59:09.000Z

import listings from './json/listings.json'

But giving error

DirtyCajunRice | AppDir

2024-01-29T04:59:17.000Z

what error

screenshot your folder/file window

berkserbetOP

2024-01-29T04:59:41.000Z

'listings' is declared but its value is never read.ts(6133)
Cannot find module './json/listings.json' or its corresponding type declarations.ts(2307)

Cannot find seems to be important

DirtyCajunRice | AppDir

2024-01-29T04:59:59.000Z

berkserbetOP

2024-01-29T05:00:23.000Z

I think it's in the right spot

DirtyCajunRice | AppDir

2024-01-29T05:01:35.000Z

wait

is app and json at the same level?

berkserbetOP

2024-01-29T05:01:50.000Z

Its a level up ðŸ™‚

I see

DirtyCajunRice | AppDir

2024-01-29T05:02:03.000Z

also

do you have type aliases in tsconfig?

it would help you

not type

path aliases

berkserbetOP

2024-01-29T05:02:34.000Z

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    },
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "*/listings.json"],
  "exclude": ["node_modules"]
}

This is what I got

DirtyCajunRice | AppDir

2024-01-29T05:03:23.000Z

yeah

so you can import smarter

berkserbetOP

2024-01-29T05:03:31.000Z

"baseUrl": "./src",
"paths": {
    "@modules/*": ["rest/modules/*"],
    "@services/*": ["services/*"]
}

Found this online

Like that?

DirtyCajunRice | AppDir

2024-01-29T05:03:39.000Z

nono

yours is good

leave it

berkserbetOP

2024-01-29T05:03:50.000Z

Cool

No more error in the import

My json is a list of objects which I define in Cards

DirtyCajunRice | AppDir

2024-01-29T05:04:28.000Z

import Listings from â€œ@/json/listings.json"

you can import this way

with the aliases

much prettier imo anyway haha

berkserbetOP

2024-01-29T05:05:01.000Z

Yup!

No error

DirtyCajunRice | AppDir

2024-01-29T05:05:19.000Z

whats your listings json look like

just show me like the first 20-30 lines

berkserbetOP

2024-01-29T05:05:47.000Z

[
    {
        "title": "Lululemon City Keeper Gloves",
        "brands": [
            "Lululemon"
        ],
        "actions": [
            "Selling"
        ],
        "status": "Active",
        "genders": [
            "Women"
        ],
        "sizes": [],
        "categories": [],
        "price": 29,
        "currency": "USD",
        "countries": [],
        "images": [
            "https://i.redd.it/71paagbg2afc1.jpg",
            "https://i.redd.it/7rfw7gbg2afc1.jpg"
        ],
        "conditions": [
            "New With Tags"
        ],
        "colors": [],
        "shipping_info": "Shipping included.",
        "search_keywords": null,
        "timestamp": 1706489846,
        "source": "Reddit",
        "reddit_subreddit": "lululemonBST",
        "reddit_author": "mrasifs",
        "reddit_post_id": "1adie9g",
        "reddit_thread_id": null,
        "reddit_comment_id": null,
        "listing_number": 0
    },
    {
        "title": "Og Align 25\u201d (4) Dark Forest",
        "brands": [
            "Lululemon"
        ],
        "acti

interface Product {
  title: string;
  brands: string[];
  actions: string[];
  status: string | null;
  genders: string[];
  sizes: string[];
  categories: string[];
  price: number | null;
  currency: string | null;
  countries: string[];
  images: string[];
  conditions: string[];
  colors: string[];
  shipping_info: string | null;
  search_keywords: string | null;
  timestamp: number; // in seconds
  source: string;
  reddit_subreddit: string;
  reddit_author: string;
  reddit_post_id: string | null;
  reddit_thread_id: string | null;
  reddit_comment_id: string | null;
  listing_number: number;
}

Defined here

DirtyCajunRice | AppDir

2024-01-29T05:06:14.000Z

wheres that at

berkserbetOP

2024-01-29T05:06:23.000Z

In ProductCards.tsx

DirtyCajunRice | AppDir

2024-01-29T05:06:25.000Z

make yourself a types folder

so you keep things organized

berkserbetOP

2024-01-29T05:06:34.000Z

But that is the only type

No other one

DirtyCajunRice | AppDir

2024-01-29T05:06:44.000Z

is it? we have already made another type

ðŸ˜‰

berkserbetOP

2024-01-29T05:07:00.000Z

allSearchParams?

Yeah

DirtyCajunRice | AppDir

2024-01-29T05:07:05.000Z

mhm

and you will make more.

berkserbetOP

2024-01-29T05:07:16.000Z

Where should I put the types folder?

DirtyCajunRice | AppDir

2024-01-29T05:07:23.000Z

same level as json

outside app

berkserbetOP

2024-01-29T05:07:41.000Z

Created it

DirtyCajunRice | AppDir

2024-01-29T05:07:54.000Z

make a products.ts file

move that type and the 3 lines we made into that file

to keep things organized

then fix imports if needed

berkserbetOP

2024-01-29T05:08:43.000Z

const allSearchParams =  ['r', 'search', 'genders',  'sizes', 'conditions', 'countries', 'brands', 'pages'] as const;
type ProductSearchParam = typeof allSearchParams[number];
export type ProductSearchParams = Record<ProductSearchParam, string | string[]>;

interface Product {
    title: string;
    brands: string[];
    actions: string[];
    status: string | null;
    genders: string[];
    sizes: string[];
    categories: string[];
    price: number | null;
    currency: string | null;
    countries: string[];
    images: string[];
    conditions: string[];
    colors: string[];
    shipping_info: string | null;
    search_keywords: string | null;
    timestamp: number; // in seconds
    source: string;
    reddit_subreddit: string;
    reddit_author: string;
    reddit_post_id: string | null;
    reddit_thread_id: string | null;
    reddit_comment_id: string | null;
    listing_number: number;
}

Thats the whole file

DirtyCajunRice | AppDir

2024-01-29T05:08:56.000Z

dont forget to export Product

berkserbetOP

2024-01-29T05:09:18.000Z

const allSearchParams =  ['r', 'search', 'genders',  'sizes', 'conditions', 'countries', 'brands', 'pages'] as const;
type ProductSearchParam = typeof allSearchParams[number];
export type ProductSearchParams = Record<ProductSearchParam, string | string[]>;

export interface Product {
    title: string;
    brands: string[];
    actions: string[];
    status: string | null;
    genders: string[];
    sizes: string[];
    categories: string[];
    price: number | null;
    currency: string | null;
    countries: string[];
    images: string[];
    conditions: string[];
    colors: string[];
    shipping_info: string | null;
    search_keywords: string | null;
    timestamp: number; // in seconds
    source: string;
    reddit_subreddit: string;
    reddit_author: string;
    reddit_post_id: string | null;
    reddit_thread_id: string | null;
    reddit_comment_id: string | null;
    listing_number: number;
}

DirtyCajunRice | AppDir

2024-01-29T05:09:25.000Z

ok. very nice

berkserbetOP

2024-01-29T05:09:31.000Z

Now trying import

DirtyCajunRice | AppDir

2024-01-29T05:09:45.000Z

@/types/products

import { Product } from

something like that

berkserbetOP

2024-01-29T05:10:35.000Z

My page.tsx:

import React from 'react'
import ProductCards from './ProductCards';
import ProductSearchParams from '@/types/products';

interface Props {
  searchParams: ProductSearchParams
}

export default function Home({ searchParams }: Props) {

  return (
    <main>
      <ProductCards {...searchParams} />
    </main>
  );
}

ProductSearchParams has an error

Module '"/Users/berkserbetcioglu/Code/storefront/types/products"' has no default export. Did you mean to use 'import { ProductSearchParams } from "/Users/berkserbetcioglu/Code/storefront/types/products"' instead?ts(2613)

Fixed

What even is the { } for?

DirtyCajunRice | AppDir

2024-01-29T05:11:36.000Z

good. if you couldnt figure that one out i might have given up on you

berkserbetOP

2024-01-29T05:11:41.000Z

ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T05:11:48.000Z

means an export in the file

since you can export many things

berkserbetOP

2024-01-29T05:12:36.000Z

Also done with importing to ProductCard

'use client'

import React from 'react'
import Link from 'next/link'
import SearchContainer from './SearchContainer';
import Image from 'next/image'
import { useRouter } from 'next/navigation';
import products from '@/json/listings.json'
import { Product } from '@/types/products';

Still have this error

DirtyCajunRice | AppDir

2024-01-29T05:13:19.000Z

does it need to be client?

berkserbetOP

2024-01-29T05:13:39.000Z

It has a bunch of product listings that update based on filters

So I think so

DirtyCajunRice | AppDir

2024-01-29T05:13:54.000Z

arent your filters in the urlâ€¦?

berkserbetOP

2024-01-29T05:13:59.000Z

Yeah

DirtyCajunRice | AppDir

2024-01-29T05:14:03.000Z

soâ€¦

berkserbetOP

2024-01-29T05:14:06.000Z

DirtyCajunRice | AppDir

2024-01-29T05:14:06.000Z

not client

ðŸ˜‰

berkserbetOP

2024-01-29T05:14:32.000Z

App broke, but I think I'm on the right track ðŸ™‚

I use useRouter()

DirtyCajunRice | AppDir

2024-01-29T05:15:00.000Z

for what

to update the url?

berkserbetOP

2024-01-29T05:15:14.000Z

Yeah

router.push(path, { scroll: false });

DirtyCajunRice | AppDir

2024-01-29T05:15:23.000Z

instead use redirect()

same thing and no use

berkserbetOP

2024-01-29T05:15:36.000Z

Cool

import redirect from 'nextjs-redirect' this one?

DirtyCajunRice | AppDir

2024-01-29T05:15:59.000Z

nono

nextjs/navigation iiirc

https://nextjs.org/docs/app/api-reference/functions/redirect

this

helpers gotta know the docs

or we would be lost

berkserbetOP

2024-01-29T05:17:38.000Z

Updated

DirtyCajunRice | AppDir

2024-01-29T05:17:58.000Z

whats your productcards look like now

berkserbetOP

2024-01-29T05:18:07.000Z

Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
  <input name="r" type=... id="r" value=... className=... defaultChecked=... onClick={function}>
                                                                                     ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

DirtyCajunRice | AppDir

2024-01-29T05:18:28.000Z

yeah you will change those to a form

with server action

berkserbetOP

2024-01-29T05:18:33.000Z

Cool

DirtyCajunRice | AppDir

2024-01-29T05:18:55.000Z

pause for a sec

lets clean up the search params

berkserbetOP

2024-01-29T05:19:08.000Z

This is the start of my Product Cards

import React from 'react'
import Link from 'next/link'
import SearchContainer from './SearchContainer';
import Image from 'next/image'
import products from '@/json/listings.json'
import { Product } from '@/types/products';
import { redirect } from 'next/navigation'


interface Props {
  products: Product[],
  search: string,
  r: string,
  genders: string,
  sizes: string,
  conditions: string,
  countries: string,
  brands: string,
  pages: number
}

const ProductCards = ({r, search, genders, sizes, conditions, countries, brands, pages}: Props) => {

I know Props can be gone

DirtyCajunRice | AppDir

2024-01-29T05:19:25.000Z

right

in this case tho, we wanna sanitize your props

berkserbetOP

2024-01-29T05:20:10.000Z

const ProductCards = ({r, search, genders, sizes, conditions, countries, brands, pages}: ProductSearchParams) => {

I did this

DirtyCajunRice | AppDir

2024-01-29T05:20:15.000Z

so lets make a helper function above ProductCards

berkserbetOP

2024-01-29T05:21:50.000Z

function sanitize(params: ProductSearchParams) {
  return params
}

With like if's in there

DirtyCajunRice | AppDir

2024-01-29T05:22:09.000Z

we can be fancy though

sec

berkserbetOP

2024-01-29T05:22:16.000Z

I like that

DirtyCajunRice | AppDir

2024-01-29T05:26:09.000Z

function sanitize(params: ProductSearchParams) {
  const stringsOnly = Object.fromEntries(Object.entries(params).map(([k, v]) => [k, Array.isArray(v) ? v[0] : v]));
  return {... stringsOnly, pages: Number(stringsOnly.pages)};
}

does that func make sense?

berkserbetOP

2024-01-29T05:27:13.000Z

For some of them I just use comma seperated strings

Then split by the comma to form an array

Is that ok?

DirtyCajunRice | AppDir

2024-01-29T05:27:31.000Z

comma separated is not how nextjs does arrays

so thats fine

to make an array someone would have to do ?pages=2&pages=3

multiple keys turn it into an array

berkserbetOP

2024-01-29T05:28:21.000Z

I can have longish ones

DirtyCajunRice | AppDir

2024-01-29T05:28:28.000Z

thats totally fine

berkserbetOP

2024-01-29T05:28:31.000Z

I don't quite understand

DirtyCajunRice | AppDir

2024-01-29T05:28:46.000Z

so lets work from inside to outside

you know what Object.entries does?

berkserbetOP

2024-01-29T05:29:12.000Z

I don't

DirtyCajunRice | AppDir

2024-01-29T05:29:24.000Z

takes an object, and turns it into an array

each item in the array is an array of [key, value]

berkserbetOP

2024-01-29T05:30:18.000Z

Got it

DirtyCajunRice | AppDir

2024-01-29T05:30:28.000Z

so it would be like
[["pages", "2"], ["r", "poo"]]

berkserbetOP

2024-01-29T05:30:34.000Z

Perfect

DirtyCajunRice | AppDir

2024-01-29T05:30:40.000Z

we then map those values

berkserbetOP

2024-01-29T05:30:44.000Z

Yup

DirtyCajunRice | AppDir

2024-01-29T05:30:53.000Z

and keep the key but check the value

berkserbetOP

2024-01-29T05:30:58.000Z

If array then v[0]

Why is that?

DirtyCajunRice | AppDir

2024-01-29T05:31:26.000Z

yeah. basically say â€œif you manually put more than 1 key on my site i dont care i want the first oneâ€

berkserbetOP

2024-01-29T05:31:33.000Z

Cool

DirtyCajunRice | AppDir

2024-01-29T05:31:49.000Z

never trust the user

berkserbetOP

2024-01-29T05:31:56.000Z

stringsOnly has an array of arrays now

DirtyCajunRice | AppDir

2024-01-29T05:31:59.000Z

or a fart after age 30

jkjk

berkserbetOP

2024-01-29T05:32:06.000Z

With the first val

Of each key

DirtyCajunRice | AppDir

2024-01-29T05:32:23.000Z

and each value as a string

berkserbetOP

2024-01-29T05:32:47.000Z

Yup, then the last one is noing number conversion - not sure how

DirtyCajunRice | AppDir

2024-01-29T05:33:13.000Z

then because you want pages to be a number, we return a new object that we spread all the keys back in, but override the pages key to a number version

berkserbetOP

2024-01-29T05:33:25.000Z

Oh cool

So little code to accomplish that

DirtyCajunRice | AppDir

2024-01-29T05:33:43.000Z

you could also just do
stringsOnly.pages = Number(stringsOnly.pages)

but i like clean short code

berkserbetOP

2024-01-29T05:34:00.000Z

Yeah for sure

Where do I call sanitize?

DirtyCajunRice | AppDir

2024-01-29T05:34:21.000Z

so heres the fun part

your object spread you have in ProductCards definition

move that INSIDE the component

berkserbetOP

2024-01-29T05:35:13.000Z

ðŸ™‚ crazy

DirtyCajunRice | AppDir

2024-01-29T05:35:32.000Z

as like
const {put it here} = sanitize(props)

berkserbetOP

2024-01-29T05:35:39.000Z

Got it

DirtyCajunRice | AppDir

2024-01-29T05:35:57.000Z

and your func should just be (props: ProductSearchParams

then you get the same functionality, but clean

berkserbetOP

2024-01-29T05:36:33.000Z

Some errors on the vars:

'const' declarations must be initialized.ts(1155)
Variable 'brands' implicitly has an 'any' type

const ProductCards = (props: ProductSearchParams) => {
  const r, search, genders, sizes, conditions, countries, brands, pages = sanitize(props)

DirtyCajunRice | AppDir

2024-01-29T05:36:45.000Z

nono

inside {}

berkserbetOP

2024-01-29T05:36:52.000Z

DirtyCajunRice | AppDir

2024-01-29T05:36:53.000Z

its still an object

berkserbetOP

2024-01-29T05:37:22.000Z

Like this?

const ProductCards = (props: ProductSearchParams) => {
  const { r, search, genders, sizes, conditions, countries, brands, pages } = sanitize(props)

DirtyCajunRice | AppDir

2024-01-29T05:37:27.000Z

nice

no errors right?

berkserbetOP

2024-01-29T05:37:41.000Z

I have errors

Property 'r' does not exist on type '{ pages: number; }'.ts(2339)

DirtyCajunRice | AppDir

2024-01-29T05:37:50.000Z

i have emotional errors

berkserbetOP

2024-01-29T05:37:53.000Z

ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T05:37:58.000Z

hahahaha

berkserbetOP

2024-01-29T05:38:03.000Z

I appreciate you so greatly

DirtyCajunRice | AppDir

2024-01-29T05:38:32.000Z

show me your sanitize func

berkserbetOP

2024-01-29T05:38:41.000Z

function sanitize(params: ProductSearchParams) {
  const stringsOnly = Object.fromEntries(Object.entries(params).map(([k, v]) => [k, Array.isArray(v) ? v[0] : v]));
  return {... stringsOnly, pages: Number(stringsOnly.pages)};
}

DirtyCajunRice | AppDir

2024-01-29T05:39:03.000Z

ok. we will do this the verbose way

go to your types

and export ProductSearchParam

so we have access to it

berkserbetOP

2024-01-29T05:39:39.000Z

I do that

export type ProductSearchParams = Record<ProductSearchParam, string | string[]>;

DirtyCajunRice | AppDir

2024-01-29T05:39:48.000Z

nope

that is a different type

ðŸ™‚

hint: no s at the end

berkserbetOP

2024-01-29T05:40:19.000Z

export type ProductSearchParam = typeof allSearchParams[number];

DirtyCajunRice | AppDir

2024-01-29T05:41:04.000Z

yes

ok so now at the end of your sanitize where you return the object

berkserbetOP

2024-01-29T05:42:20.000Z

I imported it

Current: return {... stringsOnly, pages: Number(stringsOnly.pages)};

DirtyCajunRice | AppDir

2024-01-29T05:43:21.000Z

add this at the end
as Record<Exclude<ProductSearchParam, 'pages'>, string> & { pages: number };

berkserbetOP

2024-01-29T05:43:33.000Z

Addind

DirtyCajunRice | AppDir

2024-01-29T05:43:41.000Z

im ready for the questions

ðŸ˜‚

berkserbetOP

2024-01-29T05:44:01.000Z

I get it

DirtyCajunRice | AppDir

2024-01-29T05:44:06.000Z

oh? very good

berkserbetOP

2024-01-29T05:44:09.000Z

Exclude pages mark string

Pages number

DirtyCajunRice | AppDir

2024-01-29T05:44:21.000Z

my man

ok. is the other error now gone?

berkserbetOP

2024-01-29T05:44:33.000Z

Why couldn't we use ProductSearchParams

Error gone

DirtyCajunRice | AppDir

2024-01-29T05:45:36.000Z

Because then we need to use a much fancier typescript type to exclude because that is already a record type

and i cant be assed to type that out on my phone

ðŸ˜…

berkserbetOP

2024-01-29T05:45:54.000Z

Yup!

In my borwser localhost I see a related error

./app/ProductCards.tsx
Error: 
  Ã— cannot reassign to a variable declared with `const`
     â•â”€[/Users/berkserbetcioglu/Code/storefront/app/ProductCards.tsx:12:1]
  12 â”‚ }
  13 â”‚ 
  14 â”‚ const ProductCards = (props: ProductSearchParams) => {
  15 â”‚   const { r, search, genders, sizes, conditions, countries, brands, pages } = sanitize(props)
     Â·

So in the declaration of those variables with sanitize

DirtyCajunRice | AppDir

2024-01-29T05:47:59.000Z

are you using those variable names anywhere else?

inside that component

berkserbetOP

2024-01-29T05:48:19.000Z

I likely am

DirtyCajunRice | AppDir

2024-01-29T05:48:29.000Z

if you want to be safe

berkserbetOP

2024-01-29T05:48:38.000Z

I will update

DirtyCajunRice | AppDir

2024-01-29T05:48:42.000Z

you can not destructure it

and save as like. initialParams

then get them via initialParams.whatever

berkserbetOP

2024-01-29T05:49:11.000Z

Yeah sounds good

const { initialParams } = sanitize(props)

Like that?

  const initialParams = sanitize(props)

Like that

DirtyCajunRice | AppDir

2024-01-29T05:50:27.000Z

yeah exactly

berkserbetOP

2024-01-29T05:50:43.000Z

Cool, worked

Updating vars in file

DirtyCajunRice | AppDir

2024-01-29T05:51:37.000Z

once you change your router.push to redirects, your problem should be gone

berkserbetOP

2024-01-29T05:52:50.000Z

Getting an error with my products variable

I imported like this: import products from '@/json/listings.json'

The error is long:

Argument of type '({ title: string; brands: string[]; actions: string[]; status: string; genders: string[]; sizes: string[]; categories: string[]; price: number; currency: string; countries: string[]; images: string[]; conditions: string[]; ... 10 more ...; listing_number: number; } | ... 29 more ... | { ...; })[]' is not assignable to parameter of type 'Product[]'.
  Type '{ title: string; brands: string[]; actions: string[]; status: string; genders: string[]; sizes: string[]; categories: string[]; price: number; currency: string; countries: string[]; images: string[]; conditions: string[]; ... 10 more ...; listing_number: number; } | ... 29 more ... | { ...; }' is not assignable to type 'Product'.
    Type '{ title: string; brands: string[]; actions: string[]; status: string; genders: string[]; sizes: string[]; categories: string[]; price: number; currency: string; countries: string[]; images: string[]; conditions: string[]; ... 10 more ...; reddit_thread_id?: undefined; }' is not assignable to type 'Product'.
      Types of property 'reddit_thread_id' are incompatible.
        Type 'undefined' is not assignable to type 'string | null'.ts(2345)

DirtyCajunRice | AppDir

2024-01-29T05:53:48.000Z

ah yeah

if the key isnt there, you dont put null

you put ?:

berkserbetOP

2024-01-29T05:54:42.000Z

I either put an empty array if array type or null

DirtyCajunRice | AppDir

2024-01-29T05:55:17.000Z

Types of property 'reddit_thread_id' are incompatible.
        Type 'undefined' is not assignable to type 'string | null'.ts(2345)

berkserbetOP

2024-01-29T05:55:42.000Z

Hmm

DirtyCajunRice | AppDir

2024-01-29T05:55:42.000Z

according to this, you have an undefined somewhere in that json, but dont have it in your type

berkserbetOP

2024-01-29T05:55:51.000Z

Let me check

DirtyCajunRice | AppDir

2024-01-29T05:55:53.000Z

show me your Project interface

berkserbetOP

2024-01-29T05:56:04.000Z

--What is that?--

export interface Product {
    title: string;
    brands: string[];
    actions: string[];
    status: string | null;
    genders: string[];
    sizes: string[];
    categories: string[];
    price: number | null;
    currency: string | null;
    countries: string[];
    images: string[];
    conditions: string[];
    colors: string[];
    shipping_info: string | null;
    search_keywords: string | null;
    timestamp: number; // in seconds
    source: string;
    reddit_subreddit: string;
    reddit_author: string;
    reddit_post_id: string | null;
    reddit_thread_id: string | null;
    reddit_comment_id: string | null;
    listing_number: number;
}

DirtyCajunRice | AppDir

2024-01-29T05:57:04.000Z

this is what i meant

change your reddit_thread_id

to add a ? before:

berkserbetOP

2024-01-29T05:57:35.000Z

?reddit_thread_id: string | null;

Like that?

DirtyCajunRice | AppDir

2024-01-29T05:57:47.000Z

reddit_thread_id?: string | null;

berkserbetOP

2024-01-29T05:58:14.000Z

Done

DirtyCajunRice | AppDir

2024-01-29T05:58:47.000Z

error gone?

berkserbetOP

2024-01-29T05:59:01.000Z

Nope seemingly there will be more with that json

Argument of type '({ title: string; brands: string[]; actions: string[]; status: string; genders: string[]; sizes: string[]; categories: string[]; price: number; currency: string; countries: string[]; images: string[]; conditions: string[]; ... 10 more ...; listing_number: number; } | ... 29 more ... | { ...; })[]' is not assignable to parameter of type 'Product[]'.
  Type '{ title: string; brands: string[]; actions: string[]; status: string; genders: string[]; sizes: string[]; categories: string[]; price: number; currency: string; countries: string[]; images: string[]; conditions: string[]; ... 10 more ...; listing_number: number; } | ... 29 more ... | { ...; }' is not assignable to type 'Product'.
    Type '{ title: string; brands: string[]; actions: string[]; status: string; genders: string[]; sizes: string[]; categories: string[]; price: number; currency: string; countries: string[]; images: string[]; conditions: string[]; ... 10 more ...; reddit_thread_id?: undefined; }' is not assignable to type 'Product'.
      Types of property 'shipping_info' are incompatible.
        Type 'never[]' is not assignable to type 'string'.

I'm not sure what never[] is

But shipping_info is null often

DirtyCajunRice | AppDir

2024-01-29T06:00:16.000Z

basically, you need to match up your json with your type

so go through those 1 by 1 and fix

or fix the type

berkserbetOP

2024-01-29T06:00:45.000Z

But why is it broken now?

DirtyCajunRice | AppDir

2024-01-29T06:00:47.000Z

for that one its adding [] to the shipping_info

berkserbetOP

2024-01-29T06:00:49.000Z

It's the same json

DirtyCajunRice | AppDir

2024-01-29T06:01:02.000Z

yeah your json is wonky haha

doesnt adhere like you thought it did

berkserbetOP

2024-01-29T06:01:40.000Z

Got it, fixing

Done!

ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T06:05:57.000Z

so you are set?

berkserbetOP

2024-01-29T06:06:57.000Z

Not quite, just settled errors in VScode

Now the form thing I believe

Error: Event handlers cannot be passed to Client Component props.
  <input name="r" type=... id="r" value=... className=... defaultChecked=... onClick={function}>
                                                                                     ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

DirtyCajunRice | AppDir

2024-01-29T06:07:33.000Z

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

read throught this

berkserbetOP

2024-01-29T06:08:06.000Z

On it

berkserbetOP

2024-01-29T06:13:42.000Z

Do functions that do redirects need to be client side?

DirtyCajunRice | AppDir

2024-01-29T06:14:35.000Z

nope

redirect() is designed to work in server actions

berkserbetOP

2024-01-29T06:15:27.000Z

Cool, I'm just trying to figure out how to turn my 6 <input>'s into <form>'s

I think

DirtyCajunRice | AppDir

2024-01-29T06:15:47.000Z

dont

turn all into 1 form

berkserbetOP

2024-01-29T06:15:59.000Z

Hmm

DirtyCajunRice | AppDir

2024-01-29T06:16:06.000Z

then you can build the url the same way regardless

berkserbetOP

2024-01-29T06:17:02.000Z

This is what I have for each:

                 <input
                    name="r"
                    type="checkbox"
                    id="r"
                    value={subreddit_name}
                    className="checkbox checkbox-sm"
                    defaultChecked={checkHandler("r", {subreddit_name})}
                    onClick={(e) => handleClick(e.target)}
                  />

DirtyCajunRice | AppDir

2024-01-29T06:17:35.000Z

find the closest parent that contains all the inputs

and add a <form> to wrap it

berkserbetOP

2024-01-29T06:18:06.000Z

But I have 6 seperate dropdowns

DirtyCajunRice | AppDir

2024-01-29T06:18:10.000Z

yes

berkserbetOP

2024-01-29T06:18:23.000Z

Each dropdown has on input for many options

DirtyCajunRice | AppDir

2024-01-29T06:18:37.000Z

i understand ðŸ¤£ Its fine

trust.

berkserbetOP

2024-01-29T06:18:51.000Z

I trust ðŸ™‚

Doing it now

It will basically be

return (
  <form>

Is that ok?

DirtyCajunRice | AppDir

2024-01-29T06:19:40.000Z

thats fine

what is your handleClick doing btw

just rebuilding the url?

berkserbetOP

2024-01-29T06:20:25.000Z

Yeah

  function handleClick(checkbox: any) {
    if (typeof window !== "undefined") {
      queryParams = new URLSearchParams(window.location.search);
    }

    const checkboxes = document.getElementsByName(checkbox.name);
    let selected: string[] = [];

    checkboxes.forEach((item: any) => {
      if (item.checked) selected.push(item.value);
    });
  
    if (selected.length === 0) {
      queryParams.delete(checkbox.name);
    } else {
      queryParams.set(checkbox.name, selected.join(','));
    }

    queryParams.delete("pages");

    const path = window.location.pathname + "?" + queryParams.toString();
    redirect(path);
  }

Probably badly

DirtyCajunRice | AppDir

2024-01-29T06:20:51.000Z

sokay. we can clean it up.

leave the function, but remove the onClick for all of them

berkserbetOP

2024-01-29T06:21:12.000Z

Sure

Done

DirtyCajunRice | AppDir

2024-01-29T06:23:18.000Z

one question... does the user need to submit at all?

or are you immediately changing the value

berkserbetOP

2024-01-29T06:23:38.000Z

Immediate change

I also have a "Load More..." button that increments page

All others are checkboxes

DirtyCajunRice | AppDir

2024-01-29T06:24:32.000Z

ok. we are gonna make input (JUST INPUT) a client component

make a new file

like... checkbox.tsx

berkserbetOP

2024-01-29T06:25:44.000Z

On it

I have the file

Actuallly

I have a seperate searchbar

It's in a seperate component

With 'use client'

So not only immidiate

But in ProductCards all immidiate

DirtyCajunRice | AppDir

2024-01-29T06:27:30.000Z

yeah thats fine

berkserbetOP

2024-01-29T06:28:25.000Z

Awesome

What do I put in the file?

DirtyCajunRice | AppDir

2024-01-29T06:33:42.000Z

'use client';
export const CheckBox = (props: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => {
  const onClick = (e: any) =>  e.currentTarget.form?.requestSubmit();
  return <input {...props} onClick={onClick} />
}

was typing it out

berkserbetOP

2024-01-29T06:33:54.000Z

Amazing thanks!

Can't find InputHTMLAttributes and DetailedHTMLProps

so trying to figure out import

DirtyCajunRice | AppDir

2024-01-29T06:35:37.000Z

import { DetailedHTMLProps, InputHTMLAttributes } from "react";

berkserbetOP

2024-01-29T06:35:50.000Z

Awesome worked

DirtyCajunRice | AppDir

2024-01-29T06:36:25.000Z

should be a drop-in replacement for your <input>

berkserbetOP

2024-01-29T06:37:07.000Z

Testing!

DirtyCajunRice | AppDir

2024-01-29T06:37:28.000Z

well you still need to make your server action

berkserbetOP

2024-01-29T06:37:53.000Z

So I replace the input with CheckBox?

DirtyCajunRice | AppDir

2024-01-29T06:37:58.000Z

yes

keep all the props the same

just change the tag

berkserbetOP

2024-01-29T06:38:27.000Z

Yup

The onclick is what I need to do now

DirtyCajunRice | AppDir

2024-01-29T06:39:43.000Z

  function submitForm(formData: FormData) {
    'use server';
    console.log("Form Data:", formData);
  }

start with this

<form action={submitForm}>

berkserbetOP

2024-01-29T06:40:44.000Z

Where should I have form?

DirtyCajunRice | AppDir

2024-01-29T06:40:54.000Z

berkserbetOP

2024-01-29T06:41:04.000Z

I see

DirtyCajunRice | AppDir

2024-01-29T06:41:11.000Z

you are just adding the action prop

berkserbetOP

2024-01-29T06:41:34.000Z

Yeah

Trying to figure this out:

To use Server Actions, please enable the feature flag in your Next.js config. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#convention

DirtyCajunRice | AppDir

2024-01-29T06:41:53.000Z

O.o

are you using an old version of next...?

berkserbetOP

2024-01-29T06:42:13.000Z

I didn't think so

Let me check

Next.js v13.5.6

DirtyCajunRice | AppDir

2024-01-29T06:42:55.000Z

yeah old

14.1.0

berkserbetOP

2024-01-29T06:43:06.000Z

I'll update

It's because my node was older

DirtyCajunRice | AppDir

2024-01-29T06:44:34.000Z

berkserbetOP

2024-01-29T06:44:46.000Z

I have an issue when trying to update

Working on it

I seemingly have multiple versions

But next is pointing at an old one

DirtyCajunRice | AppDir

2024-01-29T06:46:59.000Z

let me know when you sort that XD

berkserbetOP

2024-01-29T06:51:39.000Z

I think it worked now

Sorry about that

DirtyCajunRice | AppDir

2024-01-29T06:51:49.000Z

multitasking

berkserbetOP

2024-01-29T06:52:12.000Z

Seeing:

Ã— Server actions must be async functions

Should I make it

DirtyCajunRice | AppDir

2024-01-29T06:52:20.000Z

yeah thats true

yes

berkserbetOP

2024-01-29T06:53:58.000Z

Is this wrong?

  async function submitForm(formData: FormData) {
    'use server';
    console.log("Form Data:", formData);
  }

Big red error on browser

Same error

DirtyCajunRice | AppDir

2024-01-29T06:55:09.000Z

yeah thats fine

berkserbetOP

2024-01-29T06:55:23.000Z

DirtyCajunRice | AppDir

2024-01-29T06:55:32.000Z

thats an old error

doesnt show your change

stop and start the dev env

berkserbetOP

2024-01-29T06:56:20.000Z

Ok yeah

Got a runtime error:

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

DirtyCajunRice | AppDir

2024-01-29T06:57:11.000Z

did you leave onClick somewhere

berkserbetOP

2024-01-29T06:57:30.000Z

I had left the button

Commenting out

Still same error

DirtyCajunRice | AppDir

2024-01-29T06:58:23.000Z

gotta find where its happening

berkserbetOP

2024-01-29T06:58:24.000Z

 â¨¯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... loader={function} src=... onError=... className=... width=... height=... alt=...>
              ^^^^^^^^^^
    at stringify (<anonymous>)
 â¨¯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... loader={function} src=... onError=... className=... width=... height=... alt=...>
              ^^^^^^^^^^
    at stringify (<anonymous>)

What I do I need to look for?

DirtyCajunRice | AppDir

2024-01-29T07:00:00.000Z

well...

i cant see your file

try commenting out whats in the CheckBox component first

to make sure its not that

berkserbetOP

2024-01-29T07:01:06.000Z

Doesn't seem to be that

Can I send the file?

DirtyCajunRice | AppDir

2024-01-29T07:02:53.000Z

sure

berkserbetOP

2024-01-29T07:03:11.000Z

DirtyCajunRice | AppDir

2024-01-29T07:04:17.000Z

you have stuff that matches

ctrl+f for loader

thats where it is

berkserbetOP

2024-01-29T07:05:10.000Z

Matches what?

DirtyCajunRice | AppDir

2024-01-29T07:05:17.000Z

matches the error

the error is because you are using an image loader

berkserbetOP

2024-01-29T07:05:27.000Z

Yeah I am

Should I make it client

DirtyCajunRice | AppDir

2024-01-29T07:05:47.000Z

if you want to keep doing that, you need to wrap your image component in a client component file

berkserbetOP

2024-01-29T07:06:17.000Z

Yeah I have to I think

Lots of images in my app

On it

I assume I need to move the loader out too

DirtyCajunRice | AppDir

2024-01-29T07:08:24.000Z

you would move it with the component

ImageKitImage

or whatever

berkserbetOP

2024-01-29T07:10:16.000Z

I'm not quite sure how to wrap it

I created image.tsx

So far have this in it:

'use client'

const imageKitLoader = ({
    src,
    width,
    quality,
  }: {
    src: string;
    width: number;
    quality?: number;
  }) => {
    if (src[0] === '/') src = src.slice(1);
    const params = [`w-${width}`];
    if (quality) {
      params.push(`q-${quality}`);
    }
    const paramsString = params.join(',');
    var urlEndpoint = 'https://ik.imagekit.io/y7y0qqdyl';
    if (urlEndpoint[urlEndpoint.length - 1] === '/')
      urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1);

    if (src.includes("redd.it")) {
      return `${urlEndpoint}/r/${src.split("/").pop()}?tr=${paramsString}`;
    } else if (src.includes("postimg")) {
      return `${urlEndpoint}/postimg/${src.split(".cc/").pop()}?tr=${paramsString}`;
    } else if (src.includes("imgur")) {
      return `${urlEndpoint}/imgur/${src.split("/").pop()}?tr=${paramsString}`;
    } else if (src.includes("https://ik.imagekit.io/y7y0qqdyl/")) {
      return `${src}?tr=${paramsString}`;
    } else {
      return `https://ik.imagekit.io/y7y0qqdyl/Image_not_available_wide.webp?tr=${paramsString}`
    }
  };

export const CustomImage = (

DirtyCajunRice | AppDir

2024-01-29T07:13:35.000Z

export const CustomImage = (props: ComponentProps<typeof Image>) => {
  return <Image {...props} loader={imageKitLoader} />
}

berkserbetOP

2024-01-29T07:15:08.000Z

Great

Now I am getting a different issue with the onError={onImageError}

I think I know how to fix

It doesn't like the onError:

<CustomImage
                          src={image}
                          onError={onImageError} 
                          className="w-full rounded-box object-contain"
                          width={480}
                          height={480} 
                          alt="Item Picture"
                        />

I move the function to the image.tsx

But it didn't work

Fixed!

Now app works

Weird error on left: Error: Hydration failed because the initial UI does not match what was rendered on the server.

DirtyCajunRice | AppDir

2024-01-29T07:19:30.000Z

ignore for now

something to address later

berkserbetOP

2024-01-29T07:19:40.000Z

Cool

So now I gotta update query params

DirtyCajunRice | AppDir

2024-01-29T07:19:58.000Z

yes

but first click a button

and check the logs

so you know what the formData looks like

berkserbetOP

2024-01-29T07:20:32.000Z

Form Data: FormData { [Symbol(state)]: [ { name: 'brands', value: 'Adidas' } ] }
Form Data: FormData {
  [Symbol(state)]: [
    { name: 'conditions', value: 'New With Tags' },
    { name: 'brands', value: 'Adidas' }
  ]
}
Form Data: FormData {
  [Symbol(state)]: [
    { name: 'conditions', value: 'New With Tags' },
    { name: 'conditions', value: 'Used' },
    { name: 'brands', value: 'Adidas' }
  ]
}

So it keeps updating

With new objects of clicks

I get it, works great

DirtyCajunRice | AppDir

2024-01-29T07:21:06.000Z

ðŸ˜„

ok. ill leave you to sort the last bit, as you should have it under control. if you get super stuck though you can ping

berkserbetOP

2024-01-29T07:22:02.000Z

For sure, thank you! it's just redirect right?

DirtyCajunRice | AppDir

2024-01-29T07:22:29.000Z

yep!

berkserbetOP

2024-01-29T07:23:51.000Z

Awesome, will try now. Thank you so much for all the help. Is there anything I can do? I would love to pay for your lunch tomorrow

DirtyCajunRice | AppDir

2024-01-29T07:24:15.000Z

Nope no need

berkserbetOP

2024-01-29T07:24:35.000Z

If you do share, where are you based?

DirtyCajunRice | AppDir

2024-01-29T07:25:29.000Z

Austin TX

berkserbetOP

2024-01-29T07:26:07.000Z

Oh cool

I'm SF

berkserbetOP

2024-01-29T07:31:42.000Z

What is Symbol(state)?

I am trying to understand how to read it: { [Symbol(state)]: [ { name: 'sizes', value: '0' } ] }

Something about [FormData Iterator], not sure I undestand that

DirtyCajunRice | AppDir

2024-01-29T07:36:12.000Z

yeah its not a simple object

it has methods

you can do .get()

and .getAll() or something like that

berkserbetOP

2024-01-29T07:39:08.000Z

Do I need to move my checkHandler?

But then the initialparams wont be accessible

  function checkHandler(checkBoxType: string, checkBoxValue: any) {
    if (typeof window !== "undefined") {
      if (checkBoxType == 'r' && typeof initialParams.r !== "undefined") {
        if (initialParams.r.split(",").includes(checkBoxValue['subreddit_name'])) { return true }
        return false
      }
      if (checkBoxType == 'genders' && typeof initialParams.genders !== "undefined") {
        if (initialParams.genders.split(",").includes(checkBoxValue['gender'])) { return true }
        return false
      }
      if (checkBoxType == 'sizes' && typeof initialParams.sizes !== "undefined") {
        if (initialParams.sizes.split(",").includes(checkBoxValue['size'])) { return true }
        return false
      }
      if (checkBoxType == 'conditions' && typeof initialParams.conditions !== "undefined") {
        if (initialParams.conditions.split(",").includes(checkBoxValue['condition'])) { return true }
        return false
      }
      if (checkBoxType == 'countries' && typeof initialParams.countries !== "undefined") {
        if (initialParams.countries.split(",").includes(checkBoxValue['country'])) { return true }
        return false
      }

      if (checkBoxType == 'brands' && typeof initialParams.brands !== "undefined") {
        if (initialParams.brands.split(",").includes(checkBoxValue['brand'])) { return true }
        return false
      }
      return false
    }
    return false;
  }

DirtyCajunRice | AppDir

2024-01-29T07:40:01.000Z

you dont need that anymore

all that data is in the object

berkserbetOP

2024-01-29T07:40:12.000Z

But they don't stay selected

DirtyCajunRice | AppDir

2024-01-29T07:40:22.000Z

you need to set the value

from your params

berkserbetOP

2024-01-29T07:40:54.000Z

Oh so instead of checkHandler

But why wouldnt checkHandler work

DirtyCajunRice | AppDir

2024-01-29T07:41:26.000Z

because its client side only

which is also why you have hydration errors

berkserbetOP

2024-01-29T07:42:01.000Z

Should I mark it as client

DirtyCajunRice | AppDir

2024-01-29T07:42:04.000Z

doesnt need to be client

theres no reason to check window at all in that function

berkserbetOP

2024-01-29T07:42:33.000Z

So how do I mark which checkboxes are checked?

DirtyCajunRice | AppDir

2024-01-29T07:44:27.000Z

fixing your func. sec.

berkserbetOP

2024-01-29T07:44:37.000Z

ðŸ™

DirtyCajunRice | AppDir

2024-01-29T07:50:46.000Z

function checkHandler(param: ProductSearchParam, values: any) {
  if (!initialParams[param] || param === 'pages') {
    return false;
  }
  const options = initialParams[param].split(',')
  switch (param) {
    case "r":
      return options.includes(values['subreddit_name']);
    case "genders":
      return options.includes(values['gender']);
    case "sizes":
      return options.includes(values['size']);
    case "conditions":
      return options.includes(values['condition']);
    case "countries":
      return options.includes(values['country']);
    case "brands":
      return options.includes(values['brand']);
    default:
      return false;
  }
}

berkserbetOP

2024-01-29T07:51:02.000Z

Amazing

DirtyCajunRice | AppDir

2024-01-29T07:51:21.000Z

i have no idea what values is

but... i assume you do

berkserbetOP

2024-01-29T07:51:47.000Z

yeah

It's like sizes: M

value is M

Clothing

Couple errors

Property 'split' does not exist on type 'string | number'.
  Property 'split' does not exist on type 'number'

Pages doesn't go to this one ever

Also Cannot find name 'checkBoxType'. Did you mean 'CheckBox'?ts(2552)

checkBoxType is param now I think

DirtyCajunRice | AppDir

2024-01-29T07:55:44.000Z

oh. do a type check safey on the first if

fixed above

berkserbetOP

2024-01-29T07:57:37.000Z

Amazing, now where is checkHandler called, same place?

DirtyCajunRice | AppDir

2024-01-29T07:58:19.000Z

well, before you had it on default checked

that would be an uncontrolled component

you now want controlled component

so change it to checked instead of defaultChecked

berkserbetOP

2024-01-29T07:59:18.000Z

Seems to be working for that

When I manually enter a param its checked

DirtyCajunRice | AppDir

2024-01-29T07:59:41.000Z

https://tenor.com/view/hair-flip-duhh-gif-26170789

berkserbetOP

2024-01-29T07:59:47.000Z

Now just the submitForm ðŸ˜„

DirtyCajunRice | AppDir

2024-01-29T08:00:06.000Z

parse the formData, build your url

redirect to it

ezpz

berkserbetOP

2024-01-29T08:00:29.000Z

Yeah how do I parse Symbol(state)

DirtyCajunRice | AppDir

2024-01-29T08:01:07.000Z

you dont need to

berkserbetOP

2024-01-29T08:01:09.000Z

I just need to iterate and append text

How do I get the object to iterate throuch

DirtyCajunRice | AppDir

2024-01-29T08:01:27.000Z

go back to your types/product.ts

export your array

see all this stuff that ended up being super useful later

ðŸ˜„

berkserbetOP

2024-01-29T08:02:04.000Z

const allSearchParams =  ['r', 'search', 'genders',  'sizes', 'conditions', 'countries', 'brands', 'pages'] as const;
export type ProductSearchParam = typeof allSearchParams[number];
export type ProductSearchParams = Record<ProductSearchParam, string | string[]>;
export interface Product {
    title: string;
    brands: string[];
    actions: string[];
    status: string | null;
    genders: string[];
    sizes: string[];
    categories: string[];
    price: number | null;
    currency: string | null;
    countries: string[];
    images: string[];
    conditions: string[];
    colors: string[];
    shipping_info: string | null;
    search_keywords: string | null;
    timestamp: number; // in seconds
    source: string;
    reddit_subreddit: string;
    reddit_author: string;
    reddit_post_id: string | null;
    reddit_thread_id?: string | null;
    reddit_comment_id: string | null;
    listing_number: number;
}

DirtyCajunRice | AppDir

2024-01-29T08:02:12.000Z

allSearchParams

export it

berkserbetOP

2024-01-29T08:02:21.000Z

Do I export products = Product[]

Product array

DirtyCajunRice | AppDir

2024-01-29T08:02:38.000Z

nah thats just lazy lol

berkserbetOP

2024-01-29T08:02:56.000Z

Then how? ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T08:03:06.000Z

export the array

berkserbetOP

2024-01-29T08:03:23.000Z

Alright

And imported

Isn't there like a one line version to loop and create the query text

I would loop, over list and keep manually appending with queryParams.set(key, value.join(','));

Loop over the formData

Form Data: FormData {
  [Symbol(state)]: [
    { name: 'sizes', value: '4' },
    { name: 'sizes', value: '5' },
    { name: 'sizes', value: '6â€' }
  ]
}

I am trying to grab this part:

[
    { name: 'sizes', value: '4' },
    { name: 'sizes', value: '5' },
    { name: 'sizes', value: '6â€' }
  ]

DirtyCajunRice | AppDir

2024-01-29T08:08:52.000Z

then in your server action you can do something along the lines of

  const submitForm = async (formData: FormData) => {
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        newSearchParams.append(p, opts.join(","));
      }
    })
    redirect(`/current/url/path?${newSearchParams.toString()}`)
  }

berkserbetOP

2024-01-29T08:10:23.000Z

Nice!

Added 'use client'

DirtyCajunRice | AppDir

2024-01-29T08:10:37.000Z

...

you mean 'use server'

berkserbetOP

2024-01-29T08:10:50.000Z

Yeah sorry

DirtyCajunRice | AppDir

2024-01-29T08:10:53.000Z

ok phew

berkserbetOP

2024-01-29T08:11:05.000Z

  const submitForm = async (formData: FormData) => {
    'use server';
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        newSearchParams.append(p, opts.join(","));
      }
    })
    redirect(`/current/url/path?${newSearchParams.toString()}`)
  }

But still getting

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <form action={function} children=...>

How do you color like this?

DirtyCajunRice | AppDir

2024-01-29T08:11:57.000Z

add ts after the 3 backticks

```ts

berkserbetOP

2024-01-29T08:12:07.000Z

oh cool

DirtyCajunRice | AppDir

2024-01-29T08:12:58.000Z

that doesnt really make any sense

you can move it to a server actions file

then move the 'use server' to the top of the file

and import it

see if it still does it

berkserbetOP

2024-01-29T08:13:29.000Z

Sure

This doesn't throw an error:

async function submitForm(formData: FormData) {
    'use server';
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        newSearchParams.append(p, opts.join(","));
      }
    })
    redirect(`/current/url/path?${newSearchParams.toString()}`)
  }

DirtyCajunRice | AppDir

2024-01-29T08:15:42.000Z

they hate my es6

berkserbetOP

2024-01-29T08:16:41.000Z

But now no matter what I click my params are Initial Params: { r: 'url', pages: NaN }

r=url

DirtyCajunRice | AppDir

2024-01-29T08:17:40.000Z

did you change the redirect to your actual path

berkserbetOP

2024-01-29T08:17:53.000Z

ðŸ™‚

DirtyCajunRice | AppDir

2024-01-29T08:17:58.000Z

haha

berkserbetOP

2024-01-29T08:19:18.000Z

Does redirect allow you to not scroll

DirtyCajunRice | AppDir

2024-01-29T08:19:41.000Z

i... i actually have no idea

berkserbetOP

2024-01-29T08:19:58.000Z

The app is acting weird

Like the seach bar moves around after every button click

Then goes to it's normal place

DirtyCajunRice | AppDir

2024-01-29T08:20:30.000Z

that would be your client components not having proper css

which is a whole different issue

ðŸ˜„

berkserbetOP

2024-01-29T08:20:50.000Z

But it gets to the right place

DirtyCajunRice | AppDir

2024-01-29T08:20:59.000Z

prerender vs hydration

prerender is only server known stuff

hydration is client side and final state

berkserbetOP

2024-01-29T08:21:38.000Z

Are the hydration errors easy to fix?

DirtyCajunRice | AppDir

2024-01-29T08:21:56.000Z

once you understand what causes hydration errors in the first place, yes absolutely.

berkserbetOP

2024-01-29T08:22:20.000Z

So how can I get my app to work as well as it used to now?

DirtyCajunRice | AppDir

2024-01-29T08:22:33.000Z

you have now acended

berkserbetOP

2024-01-29T08:22:38.000Z

ðŸ™‚

Seems I need to learn a few more things

DirtyCajunRice | AppDir

2024-01-29T08:23:08.000Z

this will - for better or worse - make you understand the importance of having the correct data on the server so that it matches and is not modified by the client

search around your code and check for anything that modifies how things look via a useEffect

thats your first "oh shit i see"

berkserbetOP

2024-01-29T08:24:14.000Z

useEffect adds animation?

DirtyCajunRice | AppDir

2024-01-29T08:24:30.000Z

useEffect adds client javascript logic

of any kind

berkserbetOP

2024-01-29T08:26:37.000Z

But why do I want that?

Like my searchbar only has: flex items-center justify-center

Why does it move around so much

DirtyCajunRice | AppDir

2024-01-29T08:29:16.000Z

couple things can cause it.
1. you have client css-in-js somewhere.
2. you have values not being populated until client render
3. you have css that does not have stringent bounds causing it to grow or shrink until the item that changes where it flows to appears.

berkserbetOP

2024-01-29T08:30:13.000Z

css-in-js is a function that returns an item with css?

DirtyCajunRice | AppDir

2024-01-29T08:30:50.000Z

not necessarily. Its css that is defined dynamically via javascript

vs static classes / properties

berkserbetOP

2024-01-29T08:31:32.000Z

My search looks like this:

'use client'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useState } from 'react'

const SearchContainer = () => {

    // NextJs Navigation
    const router = useRouter()
    const searchParams = useSearchParams()
    const pathname = usePathname()
    let queryParams: URLSearchParams;

    // React States
    const [search, setSearch] = useState(searchParams.get('search') || '')

    // Handle Submitting
    const handleSubmit = (e: any) => {
        e.preventDefault()
        if (typeof window !== "undefined") {
          queryParams = new URLSearchParams(window.location.search);
        }

        queryParams.delete("pages");
        if (search === '') {
            queryParams.delete('search');
        } else {
            queryParams.set('search', search);
        }
        const path = window.location.pathname + "?" + queryParams.toString();
        router.push(path);
    }

    const removeSearch = (e: any) => {
        router.push(pathname)
        return
    }

    return (
        <form className='flex items-center justify-center'>
            <input className='border border-gray-400 rounded-md p-1' placeholder='Search' onChange={(e) => setSearch(e.target.value)} defaultValue={search}/>
            <button className='border border-gray-400 rounded-md p-1 m-2 hover:bg-blue-100' type='submit' onClick={handleSubmit}>ðŸ”</button>
            <button type='submit' onClick={removeSearch}>âœ–ï¸</button>
        </form>
    )
}

export default SearchContainer

Does it just take time to run this one the client side each time

DirtyCajunRice | AppDir

2024-01-29T08:32:40.000Z

record what its doing. its anyones guess without being able to visualize the CLS

berkserbetOP

2024-01-29T08:33:51.000Z

CLS is Cumulative Layout Shift?

DirtyCajunRice | AppDir

2024-01-29T08:33:58.000Z

Exactly ðŸ™‚

berkserbetOP

2024-01-29T08:38:35.000Z

For the button that updates the pages number, do I need to create a new button component like the checkbox?

DirtyCajunRice | AppDir

2024-01-29T08:38:55.000Z

that one you just remove onClick

and instead use type="submit" action={}

(give it its own action so it can do the unique thing)

berkserbetOP

2024-01-29T08:40:27.000Z

I use to use:

  function handlePageClick() {
    if (typeof window !== "undefined") {
      queryParams = new URLSearchParams(window.location.search);
    }

    initialParams.pages = parseInt(queryParams.get("pages") || "1");
    let nextPage: number = initialParams.pages + 1;
    queryParams.set("pages", nextPage.toString());

    const path = window.location.pathname + "?" + queryParams.toString();
    redirect(path);
  }

Is action a function?

DirtyCajunRice | AppDir

2024-01-29T08:44:51.000Z

action is a server action function

like the form one we made

berkserbetOP

2024-01-29T08:54:09.000Z

To test this I created:

  async function updatePage() {
    'use server';
    console.log("Update Page.")
  }

The button I made: <button className="btn btn-accent btn-outline btn-lg" type="submit" action={updatePage()}>Load More...</button>

But now my button doesn't appear. And action shows this error:

Type '{ children: string; className: string; type: "submit"; action: Promise<void>; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Property 'action' does not exist on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'

DirtyCajunRice | AppDir

2024-01-29T08:56:32.000Z

you dont add the () for actions

you are passing the definition of the function, not the function execution

berkserbetOP

2024-01-29T08:57:59.000Z

So like this: action={updatePage}

It gives the same error

DirtyCajunRice | AppDir

2024-01-29T08:58:52.000Z

oh i forgot. when on a button its formAction not action

berkserbetOP

2024-01-29T09:01:02.000Z

Cool!

berkserbetOP

2024-01-29T09:07:56.000Z

When I manually add a pages query param it just gets deleted

I tried this:

  async function updatePage(formData: FormData) {
    'use server';
    console.log("Update Page.")
    console.log("Form Data:", formData)
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        console.log("Form Data:", p, opts.join(","));
        newSearchParams.append(p, opts.join(","));
      }
    })

    newSearchParams.set("pages", (parseInt(newSearchParams.get("pages") || "1") + 1).toString())

    redirect(`?${newSearchParams.toString()}`)
  }

But pages is never present in allSearchParams

DirtyCajunRice | AppDir

2024-01-29T09:12:05.000Z

mmmm

what do you mean when you manually add it gets delete

berkserbetOP

2024-01-29T09:15:32.000Z

I add ?pages=2

Then I choose a filter, then it's lost

DirtyCajunRice | AppDir

2024-01-29T09:16:08.000Z

there it is

you left critical info out ðŸ˜‰

in the other action we are ignoring pages

you need to now handle pages separately

post that other action

berkserbetOP

2024-01-29T09:17:10.000Z

This one?

  async function submitForm(formData: FormData) {
    'use server';
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        console.log("Form Data:", p, opts.join(","));
        newSearchParams.append(p, opts.join(","));
      }
    })
    redirect(`?${newSearchParams.toString()}`)
  }

DirtyCajunRice | AppDir

2024-01-29T09:18:11.000Z

yeah. soâ€¦. the pages part is completely missed here

since there is no â€œinputâ€ for it

This one?

  async function submitForm(formData: FormData) {
    'use server';
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        console.log("Form Data:", p, opts.join(","));
        newSearchParams.append(p, opts.join(","));
      }
    })
    if (initialParams.pages) {
      newSearchParams.append("pages", initialParams.pages.toString())
    }
    redirect(`?${newSearchParams.toString()}`)
  }

see what i mean?

berkserbetOP

2024-01-29T09:20:31.000Z

Yeah unique case

It is still overwritten when I click a checkbox

Actually I want it to be overwritten

DirtyCajunRice | AppDir

2024-01-29T09:30:52.000Z

soâ€¦ goodâ€¦ or badâ€¦ haha

berkserbetOP

2024-01-29T09:31:16.000Z

Perfect

Do you know why my build might be failing?

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
 âœ“ Generating static pages (6/6) 

> Export encountered errors on following paths:
    /page: /

DirtyCajunRice | AppDir

2024-01-29T09:33:47.000Z

not with just that info

berkserbetOP

2024-01-29T09:34:25.000Z

This is all it gives me:

 âœ“ Collecting page data    
   Generating static pages (4/6)  [=   ] 

 â¨¯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
 âœ“ Generating static pages (6/6) 

> Export encountered errors on following paths:
    /page: /

DirtyCajunRice | AppDir

2024-01-29T09:35:02.000Z

may seem like nothing to youâ€¦ but that is very helpful info

berkserbetOP

2024-01-29T09:35:08.000Z

ðŸ™‚

useSearchParams

I see

DirtyCajunRice | AppDir

2024-01-29T09:35:15.000Z

ðŸ˜‰

berkserbetOP

2024-01-29T09:35:24.000Z

Part of this component

'use client'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useState } from 'react'

const SearchContainer = () => {

    // NextJs Navigation
    const router = useRouter()
    const searchParams = useSearchParams()
    const pathname = usePathname()
    let queryParams: URLSearchParams;

    // React States
    const [search, setSearch] = useState(searchParams.get('search') || '')

    // Handle Submitting
    const handleSubmit = (e: any) => {
        e.preventDefault()
        if (typeof window !== "undefined") {
          queryParams = new URLSearchParams(window.location.search);
        }

        queryParams.delete("pages");
        if (search === '') {
            queryParams.delete('search');
        } else {
            queryParams.set('search', search);
        }
        const path = window.location.pathname + "?" + queryParams.toString();
        router.push(path);
    }

    const removeSearch = (e: any) => {
        router.push(pathname)
        return
    }

    return (
        <form className='flex items-center justify-center'>
            <input className='border border-gray-400 rounded-md p-1' placeholder='Search' onChange={(e) => setSearch(e.target.value)} defaultValue={search}/>
            <button className='border border-gray-400 rounded-md p-1 m-2 hover:bg-blue-100' type='submit' onClick={handleSubmit}>ðŸ”</button>
            <button type='submit' onClick={removeSearch}>âœ–ï¸</button>
        </form>
    )
}

export default SearchContainer

DirtyCajunRice | AppDir

2024-01-29T09:36:43.000Z

show where you are using that

berkserbetOP

2024-01-29T09:37:16.000Z

I call it in ProductCards.tsx

DirtyCajunRice | AppDir

2024-01-29T09:38:06.000Z

wrap it in a <Suspense></Suspense>

berkserbetOP

2024-01-29T09:38:07.000Z

In the return

DirtyCajunRice | AppDir

2024-01-29T09:38:59.000Z

but you now know you can probably convert that to a server component in the future

berkserbetOP

2024-01-29T09:39:32.000Z

Fixed! Thank you

Yeah, but I am not sure how to deal with something like a searchbar yet

DirtyCajunRice | AppDir

2024-01-29T09:40:31.000Z

sokay. something to use to learn in your own. gotta have goals

berkserbetOP

2024-01-29T09:40:53.000Z

Yup ðŸ™‚

Found one last important issue

My search query is deleted when checkbox is clicked

I will try to solve it like the page example

This doesn't work unfortunately:

  async function submitForm(formData: FormData) {
    'use server';
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        console.log("Form Data:", p, opts.join(","));
        newSearchParams.append(p, opts.join(","));
      }
    })
    if (initialParams.search) {
      newSearchParams.append("search", initialParams.search.toString())
    }
    redirect(`?${newSearchParams.toString()}`)
  }

Worked without tostring()

DirtyCajunRice | AppDir

2024-01-29T09:45:37.000Z

that one isnt a number so that would make sense haha

berkserbetOP

2024-01-29T09:47:21.000Z

Yup

Does it have to rerender the page every time I click a checkbox? I want to make it so the user can just keep clicking

DirtyCajunRice | AppDir

2024-01-29T09:51:08.000Z

as a server action yes, but it should not be noticeable in production

berkserbetOP

2024-01-29T09:51:24.000Z

But the dropdown closes

DirtyCajunRice | AppDir

2024-01-29T09:51:45.000Z

whos fault is that ðŸ˜

manage the state of the dropdown

you can do it in another url param, or extract that to a client component

berkserbetOP

2024-01-29T09:53:08.000Z

I guess so, but this stuff just worked on the client side

DirtyCajunRice | AppDir

2024-01-29T09:54:07.000Z

is the ui â€œjust workingâ€ any good if the result is that it doesnt do shit? (hence the beginning of this thread)

berkserbetOP

2024-01-29T09:54:26.000Z

Thats true

Thanks for all the help today, will likely come back for more soon ðŸ˜„

DirtyCajunRice | AppDir

2024-01-29T09:54:59.000Z

it may seem like more work at first, but you are getting granular control over your ui

np man. im gonna pass out soon its late

berkserbetOP

2024-01-29T19:19:41.000Z

So I have one last major issue to tackle. Everything works fine in dev, but in build none of my query parameters do anything. It's like they don't exist and they delete existing query params each time

Also, I was thinking - since I serve users a bunch of images each time, won't I have high bandwidth costs when all of those are server side?

I see a "ReferenceError: window is not defined" in the logs

ReferenceError: window is not defined
    at n (/Users/berkserbetcioglu/Code/storefront/.next/server/app/[...r]/page.js:1:2996)
    at nM (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47419)
    at nN (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64674)
    at nI (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46806)
    at nM (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47570)
    at nM (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61663)
    at nN (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64674)
    at nB (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67657)
    at nF (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66824)
    at nN (/Users/berkserbetcioglu/Code/storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64990)

berkserbetOP

2024-01-29T19:39:12.000Z

Marking this as done to move to a new thread

berkserbetOP

2024-01-29T19:39:19.000Z

Thanks for the help!

Answer