Complexlity
Complexlity
Explore posts from servers
KPCKevin Powell - CommunityTTCTheo's Typesafe Cult
PostsComments
TTCTheo's Typesafe Cult
Created by Complexlity on 5/27/2024 in #questions
How to upload file from local path using the utapi uploadFiles or uploadFilesFromURL
I'm trying to upload files from disk without setting up and endpoint or getting from the client but when I use the utapi functions, they do not work directly with the file path or the buffer gotten with fs.readFile(path). How do I transform the file so I would be able to upload using either utapi.uploadFiles(files) or utapi.uploadFilesFromURL('/file_path')
2 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 1/17/2024 in #questions
How to do an auction system
I'm building a kind of store that an item can have a countdown and when it get to zero, it would be sold to the current highest bidder. I'm not sure how to make the item be sold to the highest bidder after it gets to zero. I'm using supabase and clerk for auth and supabase for the db. When the item timer gets to zero, I want to call the supabase db to transfer ownership of the item, deduct money from buyer etc. But If I set it up normally with the supabase function, this would mean any authenticated users can call the supabase endpoint manually and I don't want that. I want the function to only be possible to be called when an item's countdown to zero and cannot be called manually from outside the site. Also , if there's multiple users active when the item gets to zero, this would mean the function would be called for every user who is online (which I do not want). I would Ideally want it to be called only once
2 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 9/3/2023 in #questions
Clerk + Supabase: How to handle user account
Hello. I have setup authentication with clerk adding github and google authentication. I looking to add a process where the user could do more than just authenticate their github. I want to take the user id that clerk provides to add more information about the user. Ideally, I get back userid, email and profile image. I want to the user to have a table on supabase where they could add a custom username (and many other details I want to recieve). How do I go about this?
7 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 8/15/2023 in #questions
Vercel CI/CD stopped working
Hello, I have been deploying an application connected to Github. Suddenly my pushes stop being deployed on vercel. How do I fix it?. I could disconnect and reconnect the github account but I would lose the current sub domain name I have chosen. I want to keep it. How do I trigger a deploy of the latest commit?
8 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 7/26/2023 in #questions
Nextjs having infinite errors
Hello I keep having this error and it keeps retrying and makes the page non responsive. It's almost like a useEffect kind of situation
12 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 6/25/2023 in #questions
Build a custom provider component nextjs appdir
Hello. I want to make a react component which when passes as a parent to another, the child will automatically have a certain prop I want to pass. e.g The ProvideAuth component 
<ProvideAuth>
<HomePage />
</ProvideAuth>
<ProvideAuth>
<HomePage />
</ProvideAuth>
<ProvideAuth>
<Profile />
</ProvideAuth>
<ProvideAuth>
<Profile />
</ProvideAuth>
The ProvideAuth (server) component would be responsible for fetching the user and authenticating the user at the same time, it passes the user data(if found) to both the HomePage and the Profile component. So I would be able to do this in the Homepage component 
'use client'

function HomePage({user}){
return <div> Hello {user.name}</div>

}
'use client'

function HomePage({user}){
return <div> Hello {user.name}</div>

}
5 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 6/24/2023 in #questions
How to get rid of CORS errors
10 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 6/21/2023 in #questions
How to make protected routes in nextjs appdir
Hello! So I’m doing authentication and I want to make it so I fetch the user data on first load, but then reuse this data to check on all protected pages. How do I go about this? . I thought about fetching this data each time they go to protected routes but isn’t that ineffective (spends more time)
46 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 6/19/2023 in #questions
How to send cookies and headers in app dir
Hello. I have an index page in the pages directory. I want to do the same thing but using the app dir 
const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => {
  const { data } = useSwr(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,
    fetcher,
    { fallbackData }
  );

  if (data) {
    return <div>Welcome! {JSON.stringify(data.name)}</div>;
  }

  return <div className="">{JSON.stringify(fallbackData)}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  console.log({ header: context.req.headers });

  const data = await fetcher(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`, {
      ...context.req.headers,
    }
  );
  return { props: { fallbackData: data } };
};
const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => {
  const { data } = useSwr(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,
    fetcher,
    { fallbackData }
  );

  if (data) {
    return <div>Welcome! {JSON.stringify(data.name)}</div>;
  }

  return <div className="">{JSON.stringify(fallbackData)}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  console.log({ header: context.req.headers });

  const data = await fetcher(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`, {
      ...context.req.headers,
    }
  );
  return { props: { fallbackData: data } };
};
Basically, I'm sending a request to an express server. Which verifies the user using their access/refresh token gotten from the request cookies/header. I want to do the same in in appdir. I tried this: 
async function getUser(){
  const data = await fetcher(`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`);
  //@ts-ignore
  return data | "no-data"
}

export default async function Home() {
  const data = await getUser()
  return (
    <p>Welcome {data.name}</p>
  )
}
async function getUser(){
  const data = await fetcher(`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`);
  //@ts-ignore
  return data | "no-data"
}

export default async function Home() {
  const data = await getUser()
  return (
    <p>Welcome {data.name}</p>
  )
}
But it doesn't send the cookies/headers to the server. For context. fetcher is just an axios call to get data 
import axios from "axios";

const fetcher = async <T>(url: string, headers = {}): Promise<T | null> => {
  try {
    const { data } = await axios.get<T>(url, {
      headers,
      withCredentials: true,
    });

    return data;
  } catch (e) {
    return null;
  }
};

export default fetcher;
import axios from "axios";

const fetcher = async <T>(url: string, headers = {}): Promise<T | null> => {
  try {
    const { data } = await axios.get<T>(url, {
      headers,
      withCredentials: true,
    });

    return data;
  } catch (e) {
    return null;
  }
};

export default fetcher;
6 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 6/13/2023 in #questions
Rendering a different route Nextjs
I have a folder called Home in my pages directory, I want to render this Home folder without changing the url to /home when the user visits the / page. I've see the async redirects, but that changes the url
2 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 6/8/2023 in #questions
WARNING: Text content did not match...
2 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 4/22/2023 in #questions
Receiving Contact/Feedback from Website to Email
So I have this basic HTML/CSS/JS application (no frameworks). Then there's a form on the page where I want users to enter some messages/contact info and hit send. Ideally I want these messages to arrive in my email (gmail) 1. I know about nodemailer but I don't want to use any backend here because of hosting difficulty with backend applications compared to frontend 2. I don't want to have to use an external mail service where the mails would go to. I want them directly in my email. Please let me know how to go about it
10 replies
TTCTheo's Typesafe Cult
Created by Complexlity on 4/1/2023 in #questions
Persist Theme Value in Nextjs from ContextAPI
Hello. I'm trying to persist theme data in a Nextjs application (v 13.1.1 pages) using ContextApi. Now, usually the theme state gets compiled from a ThemeContext and passed into the application. When the user toggles the theme, I save this value in local storage for when they come to the site again. This fails because Nextjs is first generated on the server and there's no local storage. What I tried 1. I tried checking for type of window and passing the default value (light theme) if it isn't found 2. I tried useEffect(and useLayoutEffect) to get the theme value from local storage when the user first loads the page. The problem with both methods is, if the user enables darkMode as their default, when the page first loads, it is initially lightMode then switches to darkMode after some milliseconds. For more context, I could provide the two files that all this is happening
14 replies