Mik3y-F
Mik3y-F
Explore posts from servers
TTCTheo's Typesafe Cult
Created by Mik3y-F on 5/7/2024 in #questions
Missing FormData value when using Server actions
https://paste.ofcode.org/x5JEX8LRy5F6gLxqvNCBqp -> Form Component https://paste.ofcode.org/3bRDCsJTcq9En6Ltf5EXg2j -> Country Combobox I am currently facing an issue where an input value ie. the country ID is not being sent as part of the FormData object to my server action anyone able to advise on what may be wrong My current hunch is that it might have to do with the Country Combobox I just can't say what exactly
2 replies
TTCTheo's Typesafe Cult
Created by Mik3y-F on 5/3/2023 in #questions
How do I make Jotai work with trpc on the t3 stack?
I am having trouble finding ways to work with Jotai and trpc on nextjs.
4 replies
TTCTheo's Typesafe Cult
Created by Mik3y-F on 4/28/2023 in #questions
I'm having trouble using the shadcn-ui Sheet component
I keep gettting the error below Error: DialogTrigger must be used within Dialog anybody know what I might be getting wrong
4 replies
TTCTheo's Typesafe Cult
Created by Mik3y-F on 4/7/2023 in #questions
How do I solve for a persisting session on Next-auth when User is deleted from DB.
I am currently finding that My user auth sessions are persisted even when I have cleared my db. What is the cleanest way around this. If possible kindly share a solution when using the jwt strategy as well
17 replies
TTCTheo's Typesafe Cult
Created by Mik3y-F on 3/20/2023 in #questions
Data visualisation library
What's the best data visualisation library within the react ecosystem at the moment?
2 replies
TTCTheo's Typesafe Cult
Created by Mik3y-F on 2/17/2023 in #questions
React Carousel Library
Anybody able to recommend a good carousel react library. I'm having a difficult time finding a decent one
2 replies
TTCTheo's Typesafe Cult
Created by Mik3y-F on 11/6/2022 in #questions
Per-Page Layouts in T3
Hey guys I was attempting to implement per page layouts on the t3 starter template as shown here: https://nextjs.org/docs/basic-features/layouts#with-typescript I kept running into Typescript issues. Any way I could go about this in a way I could make Typescript happy? There is a squiggly line on MyApp and the getLayout function argument in the return. Feel free to suggest a better approach for this.
// pages/_app.tsx
import type { AppProps } from "next/app";
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

import { trpc } from "../utils/trpc";

import "../styles/globals.css";
import type { NextPage } from "next";
import type { ReactElement, ReactNode } from "react";


export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};

const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
const getLayout = Component.getLayout || ((page: NextPage) => page);

return getLayout(
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
};

export default trpc.withTRPC(MyApp);
// pages/_app.tsx
import type { AppProps } from "next/app";
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

import { trpc } from "../utils/trpc";

import "../styles/globals.css";
import type { NextPage } from "next";
import type { ReactElement, ReactNode } from "react";


export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};

const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
const getLayout = Component.getLayout || ((page: NextPage) => page);

return getLayout(
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
};

export default trpc.withTRPC(MyApp);
// pages/index.tsx
import type { ReactElement } from "react";
import Layout from "../components/Layout/Layout";
import type { NextPageWithLayout } from "./_app";

const Home: NextPageWithLayout = () => {
return (
<>
<div>Hello</div>
</>
);
};

Home.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>;
};

export default Home;
// pages/index.tsx
import type { ReactElement } from "react";
import Layout from "../components/Layout/Layout";
import type { NextPageWithLayout } from "./_app";

const Home: NextPageWithLayout = () => {
return (
<>
<div>Hello</div>
</>
);
};

Home.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>;
};

export default Home;
19 replies