<DxD/> Posts - Answer Overflow

<DxD/>

Explore posts from servers

•Created by <DxD/> on 10/6/2024 in #questions

Zustand question in next js

i have this code

export const useTaskStore = create<State & Actions>()(
  persist(
    set => ({
      tasks: [],
      draggedTask: null,
      addTask: (title: string, description?: string) =>
        set(state => ({
          tasks: [
            ...state.tasks,
            { id: uuid(), title, description, status: 'TODO' }
          ]
        })),
      dragTask: (id: string | null) => set({ draggedTask: id }),
    }),
    { name: 'task-store', skipHydration: true }
  )
)

export const useTaskStore = create<State & Actions>()(
  persist(
    set => ({
      tasks: [],
      draggedTask: null,
      addTask: (title: string, description?: string) =>
        set(state => ({
          tasks: [
            ...state.tasks,
            { id: uuid(), title, description, status: 'TODO' }
          ]
        })),
      dragTask: (id: string | null) => set({ draggedTask: id }),
    }),
    { name: 'task-store', skipHydration: true }
  )
)

and

export default function Column({
  title,
  status
}: {
  title: string
  status: Status
}) {
  const tasks = useTaskStore(state => state.tasks)
  const filteredTasks = useMemo(
    () => tasks.filter(task => task.status === status),
    [tasks, status]
  )
  const updateTask = useTaskStore(state => state.updateTask)
  const dragTask = useTaskStore(state => state.dragTask)
  const draggedTask = useTaskStore(state => state.draggedTask)
  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    if (!draggedTask) return
    updateTask(draggedTask, status)
    dragTask(null)
  }
  return (
    <section className='h-[600px] flex-1'>
      <div
        className='mt-3.5 h-full w-full rounded-xl bg-gray-700/50 p-4'
        onDrop={handleDrop}
        onDragOver={e => e.preventDefault()}
      >
        <div className='flex flex-col gap-4'>
          {filteredTasks.map(task => (
            <Task key={task.id} {...task} />
          ))}

          {filteredTasks.length === 0 && status === 'TODO' && (
            <div className='mt-8 text-center text-sm text-gray-500'>
              <p>Create a new task</p>
            </div>
          )}
        </div>
      </div>
    </section>
  )
}

export default function Column({
  title,
  status
}: {
  title: string
  status: Status
}) {
  const tasks = useTaskStore(state => state.tasks)
  const filteredTasks = useMemo(
    () => tasks.filter(task => task.status === status),
    [tasks, status]
  )
  const updateTask = useTaskStore(state => state.updateTask)
  const dragTask = useTaskStore(state => state.dragTask)
  const draggedTask = useTaskStore(state => state.draggedTask)
  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    if (!draggedTask) return
    updateTask(draggedTask, status)
    dragTask(null)
  }
  return (
    <section className='h-[600px] flex-1'>
      <div
        className='mt-3.5 h-full w-full rounded-xl bg-gray-700/50 p-4'
        onDrop={handleDrop}
        onDragOver={e => e.preventDefault()}
      >
        <div className='flex flex-col gap-4'>
          {filteredTasks.map(task => (
            <Task key={task.id} {...task} />
          ))}

          {filteredTasks.length === 0 && status === 'TODO' && (
            <div className='mt-8 text-center text-sm text-gray-500'>
              <p>Create a new task</p>
            </div>
          )}
        </div>
      </div>
    </section>
  )
}

so, here i can add task and drag and drop, but if i delete

  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

and

 skipHydration: true

 skipHydration: true

still works the same, why ?

6 replies

TTCTheo's Typesafe Cult

•Created by <DxD/> on 9/16/2024 in #questions

based on this video https://www.youtube.com/watch?v=14B85quRQhw at min 26:02

if you return from your context :

const authProviderValue = {
    sessionExpired,
    authenticated,
    user,
    token,
    initiateLogin,
    handleAuthentication: handleIncomingPayload,
    logout,
  };
  return <AuthProvider value={authProviderValue}>{children}</AuthProvider>;

const authProviderValue = {
    sessionExpired,
    authenticated,
    user,
    token,
    initiateLogin,
    handleAuthentication: handleIncomingPayload,
    logout,
  };
  return <AuthProvider value={authProviderValue}>{children}</AuthProvider>;

and from this context i use just what ii need... is a good Approach ? yes, i have like :

export default () => {
  const context = React.useContext(authContext);

  if (context === undefined) {
    throw new Error('authContext is undefined');
  }
  return context;
};

export default () => {
  const context = React.useContext(authContext);

  if (context === undefined) {
    throw new Error('authContext is undefined');
  }
  return context;
};

Still does to many re-renders or solve the problem that is in video ?

2 replies

TtRPC

•Created by <DxD/> on 11/24/2023 in #❓-help

Why my Authorization does not update ?

i have this in _app.tsx

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title lang="en">Holistic Drop</title>
        <meta name="New tool for your company" content="Holistic Drop" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="favicon.ico" />
      </Head>
      <trpcApi.Provider client={createTRPCProxyClient} queryClient={reactQueryClient}>
        <QueryClientProvider client={reactQueryClient}>
          <AuthProvider>
            <Component {...pageProps} />
          </AuthProvider>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </trpcApi.Provider>
    </>
  );
}

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title lang="en">Holistic Drop</title>
        <meta name="New tool for your company" content="Holistic Drop" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="favicon.ico" />
      </Head>
      <trpcApi.Provider client={createTRPCProxyClient} queryClient={reactQueryClient}>
        <QueryClientProvider client={reactQueryClient}>
          <AuthProvider>
            <Component {...pageProps} />
          </AuthProvider>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </trpcApi.Provider>
    </>
  );
}

and this is my client

import superjson from 'superjson';

import { AppRouter } from '../api-types';
import { httpBatchLink } from '@trpc/client';
import { createTRPCReact } from '@trpc/react-query';

export const trpcApi = createTRPCReact<AppRouter>();
let token: string = '';
export const setToken = (newToken: string) => {
  token = newToken;
};

export const createTRPCProxyClient = trpcApi.createClient({
  links: [
    httpBatchLink({
      url: process.env.NEXT_PUBLIC_TRPC_API,
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: 'include',
        });
      },
      headers() {
        return {
          Authorization: `Bearer ${token}`,
        };
      },
    }),
  ],
  transformer: superjson,
});

import superjson from 'superjson';

import { AppRouter } from '../api-types';
import { httpBatchLink } from '@trpc/client';
import { createTRPCReact } from '@trpc/react-query';

export const trpcApi = createTRPCReact<AppRouter>();
let token: string = '';
export const setToken = (newToken: string) => {
  token = newToken;
};

export const createTRPCProxyClient = trpcApi.createClient({
  links: [
    httpBatchLink({
      url: process.env.NEXT_PUBLIC_TRPC_API,
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: 'include',
        });
      },
      headers() {
        return {
          Authorization: `Bearer ${token}`,
        };
      },
    }),
  ],
  transformer: superjson,
});

that setToken i uuse in login component as here

  const logIn = () => {
    mutateLogInUser({
      ...logInUser,
    });
  };
  const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
    onError: (error) => {
      if (error.message) {
        setMessage(error.message, true);
      }
      deleteForm();
    },
    onSuccess: (data: MyData) => {
      setToken(data.token);
    },
  });

  const logIn = () => {
    mutateLogInUser({
      ...logInUser,
    });
  };
  const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
    onError: (error) => {
      if (error.message) {
        setMessage(error.message, true);
      }
      deleteForm();
    },
    onSuccess: (data: MyData) => {
      setToken(data.token);
    },
  });

How to change my code to update Authorization ?

4 replies

TtRPC

•Created by <DxD/> on 11/17/2023 in #❓-help

How to use token in headers() ?

in _app.tsx i have this

import React from 'react';

import { trpcApi, trpcApiClientProvider } from '../common/api';
import { reactQueryClient } from '../common/reactQueryClient';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { AuthProvider } from 'common/reusable/authContext';
import 'common/styles/global.css';
import type { AppProps } from 'next/app';
import Head from 'next/head';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title lang="en">Holistic Drop</title>
        <meta name="New tool for your company" content="Holistic Drop" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="favicon.ico" />
      </Head>
      <trpcApi.Provider client={trpcApiClientProvider} queryClient={reactQueryClient}>
        <QueryClientProvider client={reactQueryClient}>
          <AuthProvider>
            <Component {...pageProps} />
          </AuthProvider>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </trpcApi.Provider>
    </>
  );
}

import React from 'react';

import { trpcApi, trpcApiClientProvider } from '../common/api';
import { reactQueryClient } from '../common/reactQueryClient';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { AuthProvider } from 'common/reusable/authContext';
import 'common/styles/global.css';
import type { AppProps } from 'next/app';
import Head from 'next/head';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title lang="en">Holistic Drop</title>
        <meta name="New tool for your company" content="Holistic Drop" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="favicon.ico" />
      </Head>
      <trpcApi.Provider client={trpcApiClientProvider} queryClient={reactQueryClient}>
        <QueryClientProvider client={reactQueryClient}>
          <AuthProvider>
            <Component {...pageProps} />
          </AuthProvider>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </trpcApi.Provider>
    </>
  );
}

, here i have log in where i have token saved in setToken

const logIn = () => {
    mutateLogInUser({
      ...logInUser,
    });
  };
  const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
    onError: (error) => {
      const errorMessage: string = error.message;
      if (errorMessage) {
        setShowError(errorMessage);
        setIsError(true);
        setTimeout(() => {
          setShowError('');
          setIsError(false);
        }, 5000);
      }
    },
    onSuccess: (data) => {
      setToken(data.token);
    },
  });

const logIn = () => {
    mutateLogInUser({
      ...logInUser,
    });
  };
  const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
    onError: (error) => {
      const errorMessage: string = error.message;
      if (errorMessage) {
        setShowError(errorMessage);
        setIsError(true);
        setTimeout(() => {
          setShowError('');
          setIsError(false);
        }, 5000);
      }
    },
    onSuccess: (data) => {
      setToken(data.token);
    },
  });

3 replies

TtRPC

•Created by <DxD/> on 11/15/2023 in #❓-help

Need help how to send headers in trpc

project is setup with express on 2 parts,cleint and server i have this pice of cod in client side

  const { mutate: mutateCreateUser } = trpcApi.register.register.useMutation({
    onError: (error) => {
      const errorMessage = error.data?.httpStatus === 409 ? error.message : 'Passowrd must contains 6 characters';
      if (errorMessage) {
        setShowError(errorMessage);
        setIsError(true);
        setTimeout(() => {
          setShowError('');
          setIsError(false);
        }, 5000);
      }
    },
    // onSuccess:()=>{}
  });

  const createUser = (): void => {
    mutateCreateUser({
      ...logInUser,
    });
  };

  const { mutate: mutateCreateUser } = trpcApi.register.register.useMutation({
    onError: (error) => {
      const errorMessage = error.data?.httpStatus === 409 ? error.message : 'Passowrd must contains 6 characters';
      if (errorMessage) {
        setShowError(errorMessage);
        setIsError(true);
        setTimeout(() => {
          setShowError('');
          setIsError(false);
        }, 5000);
      }
    },
    // onSuccess:()=>{}
  });

  const createUser = (): void => {
    mutateCreateUser({
      ...logInUser,
    });
  };

here i send a small obj(email,password,confirm password) to create an user ,, this is my context

import { inferAsyncReturnType } from '@trpc/server';
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import superjson from 'superjson';

export function createContext(opts: trpcExpress.CreateExpressContextOptions) {
  let token: string | null = null;
  if (opts.req.headers.authorization) {
    token = opts.req.headers.authorization.split(' ')[1];
  }
  return { req: opts.req, res: opts.res, token };
}

export type Context = inferAsyncReturnType<typeof createContext>;

export const t = initTRPC.context<Context>().create({ transformer: superjson });

import { inferAsyncReturnType } from '@trpc/server';
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import superjson from 'superjson';

export function createContext(opts: trpcExpress.CreateExpressContextOptions) {
  let token: string | null = null;
  if (opts.req.headers.authorization) {
    token = opts.req.headers.authorization.split(' ')[1];
  }
  return { req: opts.req, res: opts.res, token };
}

export type Context = inferAsyncReturnType<typeof createContext>;

export const t = initTRPC.context<Context>().create({ transformer: superjson });

and my middleware

import { TRPCError } from '@trpc/server';
import { decodeAndVerifyJwtToken } from 'utils/check/jwtToken';

import { t } from '../context';

export const authMiddleware = t.middleware((opts) => {
  const { ctx } = opts;
  if (!ctx.token) {
    throw new TRPCError({ code: 'UNAUTHORIZED', message: 'aici se opreste' });
  }
  const user = decodeAndVerifyJwtToken(ctx.token);
  return opts.next({
    ctx: {
      req: ctx.req,
      res: ctx.res,
      user,
    },
  });
});

import { TRPCError } from '@trpc/server';
import { decodeAndVerifyJwtToken } from 'utils/check/jwtToken';

import { t } from '../context';

export const authMiddleware = t.middleware((opts) => {
  const { ctx } = opts;
  if (!ctx.token) {
    throw new TRPCError({ code: 'UNAUTHORIZED', message: 'aici se opreste' });
  }
  const user = decodeAndVerifyJwtToken(ctx.token);
  return opts.next({
    ctx: {
      req: ctx.req,
      res: ctx.res,
      user,
    },
  });
});

17 replies

TtRPC

•Created by <DxD/> on 11/13/2023 in #❓-help

Can set cookie with trpc?

I tried to create a full authentication system in trpc using jwt and refresh token I find that is not quite okay to create authentication with trpc Can you suggest me a better way how I can achieve authentication in trpc project ?

43 replies

TtRPC

•Created by <DxD/> on 11/12/2023 in #❓-help

trpc auth

Did someone create a full auth system in trpc (with next js trpc react query prisma,jwt token, refresh token)and wants to share his code??

2 replies

TtRPC

•Created by <DxD/> on 10/18/2023 in #❓-help

How to implement tRPC auth ?

Do you have any article/github links for how can i create auth in tRPC ?

1 replies

TtRPC

•Created by <DxD/> on 10/11/2023 in #❓-help

How can i modify my URL using TRPC

I did a simple pagination in react and trpc(a simple table), only problem is that: i want in my url to show page and limit whenever i modify it(like this .../human-resource/employee&limit=2&skip=5) How can i do this ?

5 replies

TtRPC

•Created by <DxD/> on 10/11/2023 in #❓-help

TRPC EXPORT API TYPES BE to FE

Is there a way I can automatically export my API types from the backend to the frontend? For example, after I modify my backend (e.g., create a new route), do I need to run something like 'trpc-api-export,' and will everything generated in my 'dist' folder be copied and placed in the 'api/api-types' folder on the frontend? Is there an automated way to do this?

8 replies

TtRPC

•Created by <DxD/> on 10/9/2023 in #❓-help

trpc Pagination

Does somebody have any example how can i do pagination in trpc and react query?

6 replies

Gaming

Programming