Bozic0909
Bozic0909
Explore posts from servers
TTCTheo's Typesafe CultDTDrizzle Team
PostsComments
TTCTheo's Typesafe Cult
Created by Bozic0909 on 5/16/2024 in #questions
File is uploaded but getting CORS
Hi everyone, I have next.js app and an endpoint to the laravel backend where I have to upload form data with file I'm getting cors error even though status is 201 and file is uploaded on the backend side, my axios is throwing error so i can't display proper message this is how my code is looking: 
const GeneralApplicationForm: React.FC<{}> = ({}) => {
  const [cv, setCv] = React.useState<FileList | null>(null);

  const form = useForm<z.infer<typeof generalApplicationSchema>>({
    resolver: zodResolver(generalApplicationSchema),
    defaultValues: {},
  });

  const handleFormSubmit = async (
    data: z.infer<typeof generalApplicationSchema>
  ) => {
    if (!cv) {
      form.setError("cv", {
        type: "required",
        message: "CV is required",
      });

      return;
    }
   
    try {
    
      const res = await axios.post(
        endpoint,
        { ...data, cv: cv[0], position: "general-application" },
        {
          headers: {
            "Content-Type": "multipart/form-data",
            "Access-Control-Allow-Origin": "*",
          },
        }
      );

      console.log(res);
      toast.success("Success uploaded");

    
    } catch (error: any) {
      console.error(error);

      toast.error("Something went wrong");
    
    }

   

    console.log(data);
  };

  return (

      <Form {...form}>
        <form onSubmit={form.handleSubmit(handleFormSubmit)}>        
          <div className="flex gap-4 mt-3 items-center flex-col md:flex-row w-full">
            <div className="flex-1 w-full">
              <FormInput
                type="file"
                label="CV/Portfolio"
                name="cv"
                onFileUpload={(files) => {
                  setCv(files);
                }}
                className=""
                placeholder=""
              />
            </div>
          </div>
        </form>
      </Form>
    </div>
  );
};
const GeneralApplicationForm: React.FC<{}> = ({}) => {
  const [cv, setCv] = React.useState<FileList | null>(null);

  const form = useForm<z.infer<typeof generalApplicationSchema>>({
    resolver: zodResolver(generalApplicationSchema),
    defaultValues: {},
  });

  const handleFormSubmit = async (
    data: z.infer<typeof generalApplicationSchema>
  ) => {
    if (!cv) {
      form.setError("cv", {
        type: "required",
        message: "CV is required",
      });

      return;
    }
   
    try {
    
      const res = await axios.post(
        endpoint,
        { ...data, cv: cv[0], position: "general-application" },
        {
          headers: {
            "Content-Type": "multipart/form-data",
            "Access-Control-Allow-Origin": "*",
          },
        }
      );

      console.log(res);
      toast.success("Success uploaded");

    
    } catch (error: any) {
      console.error(error);

      toast.error("Something went wrong");
    
    }

   

    console.log(data);
  };

  return (

      <Form {...form}>
        <form onSubmit={form.handleSubmit(handleFormSubmit)}>        
          <div className="flex gap-4 mt-3 items-center flex-col md:flex-row w-full">
            <div className="flex-1 w-full">
              <FormInput
                type="file"
                label="CV/Portfolio"
                name="cv"
                onFileUpload={(files) => {
                  setCv(files);
                }}
                className=""
                placeholder=""
              />
            </div>
          </div>
        </form>
      </Form>
    </div>
  );
};
3 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 2/26/2024 in #questions
How you do i18n in react apps?
Hi people, like the title says, how you guys do i18n in react apps? I have react app (vite), and I thought about implementing it with react-i18n anyway I have few question while looking through open source repositories I saw two different approaches with languages files 1. 
"Welcome to homepage": "Welcome to homepage"
"Welcome to homepage": "Welcome to homepage"
2. 
"home": {
  "title": "Welcome to homepage",
}
"home": {
  "title": "Welcome to homepage",
}
Which one do you prefer, with first approach I'm worried about changing value that key should be changed too? and the last there any tool that can automate process of changing text?
1 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 10/8/2023 in #questions
redux toolkit query initial data fetched on server?
Hi people, I'm wondering is it possible somehow to fetch data on server and than pass that data inside slice initialState in RTK query, like we can do that in react-query with initialData I saw this in docs https://redux-toolkit.js.org/api/createslice#initialstate but its not saying anything about data from server I'm asking this as I'm taking new project which already has RTK an everything build with that, and I'm still deciding should I rewrite logic to react query or I can handle everything I need such is invalidation and optimistic update with RTK query, so if anyone has experience and would like to share, thanks!
1 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 9/18/2023 in #questions
env variable is undefined
Hi people, I'm having issue that my env variables in config.drizzle.ts are being undefined, even though they exist in my .env file, If i try to hardcode them, they work fine. if I try to console log them in server component they have expected value 
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/server/db/schema.ts",
  out: "migrations",
  driver: "pg",
  breakpoints: true,
  dbCredentials: {
    host: process.env.DB_HOST || "",
    port: 5432,
    ssl: true,
    database: process.env.DB_NAME || "",
    user: process.env.DB_USER || "",
    password: process.env.DB_PASSWORD || "",
  },
} satisfies Config;
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/server/db/schema.ts",
  out: "migrations",
  driver: "pg",
  breakpoints: true,
  dbCredentials: {
    host: process.env.DB_HOST || "",
    port: 5432,
    ssl: true,
    database: process.env.DB_NAME || "",
    user: process.env.DB_USER || "",
    password: process.env.DB_PASSWORD || "",
  },
} satisfies Config;
6 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 9/11/2023 in #questions
paddle not working in next 13
Hello everyone, I'm trying to add paddle to my next 13 app project but I'm getting weird errors, soo I was wondering if maybe someone had similar issue soo i have my client code, vendor id is used here just as example 
"use client";
import Script from "next/script";
import { createContext, useContext, useEffect, useState } from "react";

type PaddleContext = any;

const PaddleContext = createContext<PaddleContext>(null);

const usePaddleContext = () => {
  const context = useContext(PaddleContext);

  if (context === undefined) {
    throw new Error("usePaddleContext was used outside of its Provider");
  }
  return context;
};

const PaddleProvider = ({ children }: { children: React.ReactNode }) => {
  const [paddle, setPaddle] = useState(null);

  return (
    <PaddleContext.Provider value={paddle}>
      <Script
        strategy="afterInteractive"
        src="https://cdn.paddle.com/paddle/v2/paddle.js"
        onLoad={() => {
          Paddle.Environment.set("sandbox");

          Paddle.Setup({ vendor: 123123 });

          setPaddle(Paddle);
        }}
      />
      {children}
    </PaddleContext.Provider>
  );
};
export { PaddleProvider, PaddleContext, usePaddleContext };
"use client";
import Script from "next/script";
import { createContext, useContext, useEffect, useState } from "react";

type PaddleContext = any;

const PaddleContext = createContext<PaddleContext>(null);

const usePaddleContext = () => {
  const context = useContext(PaddleContext);

  if (context === undefined) {
    throw new Error("usePaddleContext was used outside of its Provider");
  }
  return context;
};

const PaddleProvider = ({ children }: { children: React.ReactNode }) => {
  const [paddle, setPaddle] = useState(null);

  return (
    <PaddleContext.Provider value={paddle}>
      <Script
        strategy="afterInteractive"
        src="https://cdn.paddle.com/paddle/v2/paddle.js"
        onLoad={() => {
          Paddle.Environment.set("sandbox");

          Paddle.Setup({ vendor: 123123 });

          setPaddle(Paddle);
        }}
      />
      {children}
    </PaddleContext.Provider>
  );
};
export { PaddleProvider, PaddleContext, usePaddleContext };
in console I'm getting 
Uncaught Error: [PADDLE] You must specify your Paddle Seller ID within the Paddle.Setup() method. See: https://developer.paddle.com/guides/how-tos/checkout/paddle-checkout
    at t.Setup (paddle.js:1:30692)
    at HTMLScriptElement.onLoad (webpack-internal:///(:3000/app-pages-browser)/./src/components/paddle/PaddleProvider.tsx:38:28)
    at HTMLScriptElement.eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/script.js:99:24)
Uncaught Error: [PADDLE] You must specify your Paddle Seller ID within the Paddle.Setup() method. See: https://developer.paddle.com/guides/how-tos/checkout/paddle-checkout
    at t.Setup (paddle.js:1:30692)
    at HTMLScriptElement.onLoad (webpack-internal:///(:3000/app-pages-browser)/./src/components/paddle/PaddleProvider.tsx:38:28)
    at HTMLScriptElement.eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/script.js:99:24)
and also 
[Report Only] Refused to frame 'https://sandbox-buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".
[Report Only] Refused to frame 'https://sandbox-buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".
1 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 8/28/2023 in #questions
empty tables in drizzle studio
No description
1 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 3/30/2023 in #questions
TRPCClientError: Unexpected end of JSON input
1 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 3/7/2023 in #questions
session does not exist in SSR using with createProxySSGHelpers
Hello, I'm following TRPC docs and I want to fetch user decks in getServerSideProps using createProxySSGHelpers, but I'm getting 'UNAUTHORIZED' error am I missing something? it should be returned from createContextInner right? 
export async function getServerSideProps(context: GetServerSidePropsContext) {
  const test = await createContextInner();

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: await createContextInner(),
    transformer: superjson,
  });

  await ssg.deckRouter.getAllUserDecks.fetch();

  return {
    props: {},
  };
}
export async function getServerSideProps(context: GetServerSidePropsContext) {
  const test = await createContextInner();

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: await createContextInner(),
    transformer: superjson,
  });

  await ssg.deckRouter.getAllUserDecks.fetch();

  return {
    props: {},
  };
}
12 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 2/23/2023 in #questions
Where to check if user is owner
Hello, I have and app with three entities User, Deck and Card, and now for any operation on card/deck I need to check if user is owner of that deck I'm doing it like this: 
export const isUserDeckOwner = async (
  deckId: string,
  userId: string,
  prisma: PrismaClient
) => {
  const deck = await prisma.deck.findFirst({
    where: {
      id: deckId,
    },
  });

  if (deck?.userId != userId) {
    throw new TRPCError({
      code: "FORBIDDEN",
      message: "You don't have permission to access this deck",
    });
  }
};
export const isUserDeckOwner = async (
  deckId: string,
  userId: string,
  prisma: PrismaClient
) => {
  const deck = await prisma.deck.findFirst({
    where: {
      id: deckId,
    },
  });

  if (deck?.userId != userId) {
    throw new TRPCError({
      code: "FORBIDDEN",
      message: "You don't have permission to access this deck",
    });
  }
};
But I need to call this in each router method, now I wonder could I create a procedure for this? And if answer is yes how could I pass deckID variable to procedure? Thanks in advance
26 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 1/24/2023 in #questions
can values be passed to middleware except ctx
Hello, I would like to pass some values something like input object itself so that I can make additional check in middleware, is something like that possible?
1 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 1/21/2023 in #questions
cant access user id in router ctx
7 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 10/25/2022 in #questions
next session is lost on refresh
Hi people, I have a problem that my session is lost on page refresh. I have getInitalProps in my _app.tsx and I can't manage to get session from there and pass it in SessionProvider I have tried getSession and ustable_getServerSession but both don't work. Is there any workaround, for this?
12 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 10/19/2022 in #questions
how to get next-auth session in _app.tsx on getInitalProps?
Hi people, I'm using getInitalProps in my _app.tsx, and I need somehow to get session and pass it in SessionProvider, but not sure how, anyone had similar situation?
6 replies
TTCTheo's Typesafe Cult
Created by Bozic0909 on 9/19/2022 in #questions
cron job for sending user a email or notification?
Hello, I m making a scheduling app using t3 stack and I want to send the user an email or maybe push notification (PWA) on the specific interval (user can set interval, in days). But not sure how or with what service this could be done?
16 replies