Nikita
Nikita
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?
No description
5 replies
KPCKevin Powell - Community
Created by Nikita on 10/6/2024 in #ui-ux
OMG what is that - please help
No description
10 replies
KPCKevin Powell - Community
Created by Nikita on 9/29/2024 in #ui-ux
How to improve this modal?
No description
5 replies
KPCKevin Powell - Community
Created by Nikita on 9/6/2024 in #ui-ux
How to improve UX of this UI?
No description
8 replies
KPCKevin Powell - Community
Created by Nikita on 8/31/2024 in #ui-ux
Help me improve UX of this thing
No description
33 replies
KPCKevin Powell - Community
Created by Nikita on 8/22/2024 in #back-end
How to fix CORS error in Next.js?
No description
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"?
No description
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
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?
No description
1 replies
KPCKevin Powell - Community
Created by Nikita on 9/21/2023 in #front-end
Help me please deploy my FullStack proejct on vercel
No description
1 replies