Bozic0909 Posts - Answer Overflow

Bozic0909

Explore posts from servers

•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>
  );
};

2 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"

"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

DTDrizzle Team

•Created by Bozic0909 on 9/17/2023 in #help

connection ECONNREFUSED when trying to push to neon db

Hi people, I'm trying to connect my next.js app with drizzle to neon db, but I'm getting this error when i run push:pg

Error: connect ECONNREFUSED 127.0.0.1:5432
    at __node_internal_captureLargerStackTrace (node:internal/errors:464:5)
    at __node_internal_exceptionWithHostPort (node:internal/errors:642:12)
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1157:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 5432
}

Error: connect ECONNREFUSED 127.0.0.1:5432
    at __node_internal_captureLargerStackTrace (node:internal/errors:464:5)
    at __node_internal_exceptionWithHostPort (node:internal/errors:642:12)
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1157:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 5432
}

my config looks like this:

//drizzle.config.ts
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/server/db/schema.ts",
  out: "./drizzle",
  driver: "pg",
  dbCredentials: {
    connectionString: process.env.DATABASE_URL || "",
  },
} satisfies Config;

//drizzle.config.ts
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/server/db/schema.ts",
  out: "./drizzle",
  driver: "pg",
  dbCredentials: {
    connectionString: process.env.DATABASE_URL || "",
  },
} satisfies Config;

my db.ts file looks like this:

import { drizzle, PostgresJsDatabase } from "drizzle-orm/postgres-js";
import { migrate } from "drizzle-orm/postgres-js/migrator";
import postgres from "postgres";

// for migrations
const migrationClient = postgres(process.env.DATABASE_URL || "", { max: 1 });
migrate(drizzle(migrationClient), {
  migrationsFolder: "./migrations",
});

// for query purposes
const queryClient = postgres(process.env.DATABASE_URL || "");
const db: PostgresJsDatabase = drizzle(queryClient);

export { db };

import { drizzle, PostgresJsDatabase } from "drizzle-orm/postgres-js";
import { migrate } from "drizzle-orm/postgres-js/migrator";
import postgres from "postgres";

// for migrations
const migrationClient = postgres(process.env.DATABASE_URL || "", { max: 1 });
migrate(drizzle(migrationClient), {
  migrationsFolder: "./migrations",
});

// for query purposes
const queryClient = postgres(process.env.DATABASE_URL || "");
const db: PostgresJsDatabase = drizzle(queryClient);

export { db };

3 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

DTDrizzle Team

•Created by Bozic0909 on 8/28/2023 in #help

drizzle studio tables are empty

4 replies

TTCTheo's Typesafe Cult

•Created by Bozic0909 on 8/28/2023 in #questions

empty tables in drizzle studio

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

Gaming

Programming