Nikita Posts - Answer Overflow

Nikita

Posts Comments

KPCKevin Powell - Community

•Created by Nikita on 10/10/2024 in #ui-ux

How can I improve it or how can I make changes to it?

5 replies

KPCKevin Powell - Community

•Created by Nikita on 10/6/2024 in #ui-ux

OMG what is that - please help

10 replies

KPCKevin Powell - Community

•Created by Nikita on 9/29/2024 in #ui-ux

How to improve this modal?

3 replies

KPCKevin Powell - Community

•Created by Nikita on 9/6/2024 in #ui-ux

How to improve UX of this UI?

8 replies

KPCKevin Powell - Community

•Created by Nikita on 8/31/2024 in #ui-ux

Help me improve UX of this thing

33 replies

KPCKevin Powell - Community

•Created by Nikita on 8/22/2024 in #back-end

How to fix CORS error in Next.js?

56 replies

KPCKevin Powell - Community

•Created by Nikita on 2/25/2024 in #front-end

I need somebody who explain me cypress e2e (in discord call)

Can I grab 15-20 minutes of your time for call in discord? Please send me when you available too meet in discord - I have question how to fix some errors with cypress and what should I test in my project e.g 29.02.2024 at 14:00 CET

2 replies

KPCKevin Powell - Community

•Created by Nikita on 1/21/2024 in #front-end

Next js <Image/> warning - If you use CSS to change the size of your image, also include the styles

I created issue on github with minimal example Let's solve this issue there - https://github.com/vercel/next.js/issues/56025

1 replies

KPCKevin Powell - Community

•Created by Nikita on 1/19/2024 in #back-end

react-email issue about keys - Each child in a list should have a unique "key" prop.

I created issue in github about this issue - please answer there https://github.com/resend/react-email/issues/1150

16 replies

KPCKevin Powell - Community

•Created by Nikita on 1/16/2024 in #back-end

before unload event - how to change default message "Changes you made may not be saved"?

6 replies

KPCKevin Powell - Community

•Created by Nikita on 1/15/2024 in #back-end

Error: do not use legacy react-dom/server APIs - react-email question about render

Please let's use 1 place to fix this error So other developers may find this issue on github (it less cases when somebody look for answer exact on this discord server) https://github.com/vercel/next.js/issues/60668

2 replies

KPCKevin Powell - Community

•Created by Nikita on 1/10/2024 in #front-end

How to don't close ModalContainer if "areYouSureModal" isOpen?

// If you know how to do it in better way - do it
  const { isLoading } = useLoading()
  const isAreYouSureModalOpen = useAreYouSureModalsStore.getState().isAreYouSureModalOpen

  //correct way to add event listener to listen keydown
  useEffect(() => {
    document.addEventListener("keyup", handleKeyDown)
    return () => document.removeEventListener("keyup", handleKeyDown)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLoading])

  /* onClose - close modal - show scrollbar */
  function closeModal() {
    onClose()
  }

  console.log(49, "isAreYouSureModalOpen - ", isAreYouSureModalOpen)
  // Close modal on esc
  const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
        //to prevent focus state on browser searchbar
        // TODO - import ctrlK modal here and if user press ctrl+K close current modal and open ctrlK modal
        event.preventDefault()
      }

      if (event.key === "Escape" && !isLoading && !isAreYouSureModalOpen) {
        console.log(61, "are you sure modal closed - close ModalContainer")
        closeModal()
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [isAreYouSureModalOpen, isLoading],
  )

// If you know how to do it in better way - do it
  const { isLoading } = useLoading()
  const isAreYouSureModalOpen = useAreYouSureModalsStore.getState().isAreYouSureModalOpen

  //correct way to add event listener to listen keydown
  useEffect(() => {
    document.addEventListener("keyup", handleKeyDown)
    return () => document.removeEventListener("keyup", handleKeyDown)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLoading])

  /* onClose - close modal - show scrollbar */
  function closeModal() {
    onClose()
  }

  console.log(49, "isAreYouSureModalOpen - ", isAreYouSureModalOpen)
  // Close modal on esc
  const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
        //to prevent focus state on browser searchbar
        // TODO - import ctrlK modal here and if user press ctrl+K close current modal and open ctrlK modal
        event.preventDefault()
      }

      if (event.key === "Escape" && !isLoading && !isAreYouSureModalOpen) {
        console.log(61, "are you sure modal closed - close ModalContainer")
        closeModal()
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [isAreYouSureModalOpen, isLoading],
  )

49 console log throw actual state (true) 61 console log throw not actual state (false) How to console log actual state in 61 console log (to don't close modal if are you sure modal isOpen)

2 replies

KPCKevin Powell - Community

•Created by Nikita on 1/5/2024 in #front-end

Why subscribe doesn't work with zustand?

why when state gets update subscribe doesn't work?

const useCartStore = create(subscribeWithSelector(cartStore))

useCartStore.subscribe(
  state => state.food,
  food => {
    console.log(202)
    if (typeof window === "undefined") return
    const storage = getStorage()
    storage.saveFood(food)
  },
)

export default useCartStore

const useCartStore = create(subscribeWithSelector(cartStore))

useCartStore.subscribe(
  state => state.food,
  food => {
    console.log(202)
    if (typeof window === "undefined") return
    const storage = getStorage()
    storage.saveFood(food)
  },
)

export default useCartStore

I expect - when I change state.food - I got console log 202

2 replies

KPCKevin Powell - Community

•Created by Nikita on 12/9/2023 in #front-end

Next + TypeScript + Tailwind + pusher - how to show message if I go to prev page?

If I write code here will be a lot of context and you may don't understand If you have experience with Next + TypeScript + Tailwind + pusher - please DM me

1 replies

KPCKevin Powell - Community

•Created by Nikita on 11/22/2023 in #front-end

react-hook-form with useRef doesn't work - please help

https://github.com/orgs/react-hook-form/discussions/11137

2 replies

KPCKevin Powell - Community

•Created by Nikita on 10/18/2023 in #back-end

useOptimistic - example needed - codesandbox / stackblitz / github

I need to change data immediately without waiting for response from server - https://www.youtube.com/watch?v=wg3xQogkZDA&ab_channel=SonnySangha If you did this with useOptimistic or react-query - please send me like to example Also I tried to do it and got this error

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.experimental_useOptimistic) is not a function or its return value is not iterable

To reproduce: 1. pnpm create-next-app@latest 2. paste this in page.tsx

"use client"

import { experimental_useOptimistic as useOptimistic } from "react"

export default function Home() {
  let testNumber = 99
  const [optimisticTest, optimisticTestFunction] = useOptimistic(
    testNumber,
    (state, amount: number) => state + Number(amount),
  )
  async function updateNumber(amount: number) {
    optimisticTestFunction(amount)
  }
  return (
    <div>
      {optimisticTest}
      <button onClick={() => updateNumber(-1)}>optimistic test</button>
      <button onClick={() => updateNumber(+1)}>optimistic test</button>
    </div>
  )
}

"use client"

import { experimental_useOptimistic as useOptimistic } from "react"

export default function Home() {
  let testNumber = 99
  const [optimisticTest, optimisticTestFunction] = useOptimistic(
    testNumber,
    (state, amount: number) => state + Number(amount),
  )
  async function updateNumber(amount: number) {
    optimisticTestFunction(amount)
  }
  return (
    <div>
      {optimisticTest}
      <button onClick={() => updateNumber(-1)}>optimistic test</button>
      <button onClick={() => updateNumber(+1)}>optimistic test</button>
    </div>
  )
}

3 replies

KPCKevin Powell - Community

•Created by Nikita on 10/11/2023 in #back-end

Issue with supabase middleware.ts (auth with cookies)

I created github issue here - https://github.com/supabase/supabase/issues/18089 I bring attention to this issue because supabase docs was not tested for deploying on vercel - please vote up If you ever wrote auth with cookies with supbase - let me know how you set up your middleware.ts

2 replies

KPCKevin Powell - Community

•Created by Nikita on 10/8/2023 in #back-end

Page couldn't be rendered statically because it used `cookies` (supabase)

I got this error during build process

DynamicServerError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

DynamicServerError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

codesandbox - https://codesandbox.io/p/github/nicitaacom/auth-cookie-supabase-willbedeleted/auth-form-next Here is my files that use cookies app/(auth)/auth/callback/route.ts

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}

middleware.ts

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req:NextRequest) {
    const res = NextResponse.next();
    const supabase = createMiddlewareClient({ req, res });
    await supabase.auth.getSession();
    return res;
}

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req:NextRequest) {
    const res = NextResponse.next();
    const supabase = createMiddlewareClient({ req, res });
    await supabase.auth.getSession();
    return res;
}

app/utils/supabaseServer.ts

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"


const supabaseServer = createServerComponentClient({ cookies })

export default supabaseServer

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"


const supabaseServer = createServerComponentClient({ cookies })

export default supabaseServer

` How fix this error?

5 replies

KPCKevin Powell - Community

•Created by Nikita on 9/25/2023 in #front-end

How use client components with next18n?

1 replies

KPCKevin Powell - Community

•Created by Nikita on 9/21/2023 in #front-end

Help me please deploy my FullStack proejct on vercel

1 replies

Gaming

Programming