Amos
Amos
Explore posts from servers
CDCloudflare DevelopersRRailwayNNovuTTCTheo's Typesafe CultDTDrizzle Team
PostsComments
TTCTheo's Typesafe Cult
Created by Amos on 11/24/2022 in #questions
Sentry with Next.js in an Nx monorepo?
Anyone got this up and running? Can't seem to figure it out
12 replies
TTCTheo's Typesafe Cult
Created by Amos on 11/8/2022 in #questions
Prisma and Stripe subscription authorisation
I am working on a side project that has different tiers of subscriptions. I'm using Stripe and have set up everything to sync up subscriptions, prices and products from Stripe with my database. Now depending on the tier of the subscription users have certain restrictions. For example (completely random), imagine restricting people to X blog posts, Y tweets per day or access to feature Z . Would you guys put this information on the metadata of the Stripe product like 
{"blogLimit": 5, "tweetDailyLimit": 10, "featureYEnabled": true}
{"blogLimit": 5, "tweetDailyLimit": 10, "featureYEnabled": true}
or create a new table in your database like 
model ProductConfiguration {
  id              String  @id @default(cuid())
  blogLimit       Int
  tweetDailyLimit Int
  featureYEnabled Boolean

  product   Product @relation(fields: [productId], references: [id])
  productId String  @unique // 
}
model ProductConfiguration {
  id              String  @id @default(cuid())
  blogLimit       Int
  tweetDailyLimit Int
  featureYEnabled Boolean

  product   Product @relation(fields: [productId], references: [id])
  productId String  @unique // 
}
The benefit to the metadata is you can directly edit it from Stripe, while the benefit of the table is that you actually know what it contains. Thoughts? How do you guys handle this stuff?
4 replies
TTCTheo's Typesafe Cult
Created by Amos on 10/27/2022 in #questions
Protecting PDF
I want to create a project where people can upload PDFs, but I only want users to be able to see certain pages of a PDF unless they meet certain requirements. I can't do this on the client since people would obviously be able to check their network tab and get the PDF's URL from there 😛 I've been checking other websites that do something similar and it seems they fetch each page of the PDF as HTML instead of the entire file... Any idea how I could do something similar or if there is another way of accomplishing this?
5 replies
TTCTheo's Typesafe Cult
Created by Amos on 10/21/2022 in #questions
Tiptap vs. Lexical
Need a WYSIWYG editor, but never used one outside of Quill.js which was pretty shit. Seen Tiptap and Lexicall reccommended. Also using react-hook-form. Any other recommendations? Experience using them with RHF?
4 replies
TTCTheo's Typesafe Cult
Created by Amos on 10/13/2022 in #questions
Prisma where every filter on many-to-many
1 replies
TTCTheo's Typesafe Cult
Created by Amos on 10/8/2022 in #questions
Next.js multi zones and shared components
I am using Next.js' multi zone feature with a blog and web app so I can develop and deploy both apps independently. It was easy to set up by following their example and I have set up a blog app at port 3000 and a web app at port 4200, which is working fine. Unfortunately I am encountering some problems that aren't described anywhere in their documentation (as far as I can tell). I am working in a monorepo and have shared components between both apps, such as the header and footer, which obviously includes navigation. When I am on the blog and want to navigate to e.g. the /about page, then it will obviously navigate to localhost:3000/blog/about instead of localhost:3000/about. One solution is to check the base path in the navigation component and then prepend localhost:3000 to the href if the base path equals blog, but that refreshes the entire app and does not result in smooth navigation, so it's not really ideal. Is there anything else can I do about this?
1 replies
TTCTheo's Typesafe Cult
Created by Amos on 10/7/2022 in #questions
Syncing user 3rd party data with db (for example user's Twitter DMs)
So this is just an example, but imagine I have an app where users can log in with their Twitter account and see their Twitter DMs. I want them to be able to add a note to each conversation, so I need to sync this information to my database (when the user is offline as well). Do I just have a cron job that periodically checks for each user if they have any new DMs and then adds this to my database? I feel like I am overthinking this lol
1 replies
TTCTheo's Typesafe Cult
Created by Amos on 10/5/2022 in #questions
Order results by a nested relation's DateTime with Prisma
I have a Conversation model which has one-to-many relationship with Messages. I want to order the conversations by the most recent message, but it seems Prisma doesn't have a way to do this??? I need pagination so I can't do this after querying either, so is my only solution to write the SQL myself? I get the love for Prisma, but there are so many things missing 🙃
5 replies
TTCTheo's Typesafe Cult
Created by Amos on 9/24/2022 in #questions
Copying the Auth0 animation
I'm a complete noob when it comes to animations, but am starting to use Framer motion in a project and want to copy the animation on the Auth0 website https://auth0.com/ Any idea how to accomplish this? So far I have this, but it's not working as I thought it would: 
interface TextLoopProps {
  texts: string[];
}

export const TextLoop: React.FC<TextLoopProps> = ({ texts }) => {
  const [index, setIndex] = React.useState<number>(0);

  React.useEffect(() => {
    setTimeout(() => {
      let next = index + 1;
      if (next === texts.length) {
        next = 0;
      }
      setIndex(next);
    }, 3 * 1000);
  }, [index, setIndex, texts]);

  return (
    <Box position="relative" width="max-content">
      <motion.span
        style={{ position: "absolute" }}
        variants={{
          enter: {
            translateY: "20px",
            opacity: 0,
          },
          center: {
            zIndex: 1,
            translateY: 0,
            opacity: 1,
          },
          exit: {
            zIndex: 0,
            opacity: 0,
            translateY: "-20px",
          },
        }}
        key={index}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          y: { type: "spring", stiffness: 300, damping: 200 },
          opacity: { duration: 0.5 },
        }}
      >
        {texts[index]}
      </motion.span>
    </Box>
  );
};
interface TextLoopProps {
  texts: string[];
}

export const TextLoop: React.FC<TextLoopProps> = ({ texts }) => {
  const [index, setIndex] = React.useState<number>(0);

  React.useEffect(() => {
    setTimeout(() => {
      let next = index + 1;
      if (next === texts.length) {
        next = 0;
      }
      setIndex(next);
    }, 3 * 1000);
  }, [index, setIndex, texts]);

  return (
    <Box position="relative" width="max-content">
      <motion.span
        style={{ position: "absolute" }}
        variants={{
          enter: {
            translateY: "20px",
            opacity: 0,
          },
          center: {
            zIndex: 1,
            translateY: 0,
            opacity: 1,
          },
          exit: {
            zIndex: 0,
            opacity: 0,
            translateY: "-20px",
          },
        }}
        key={index}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          y: { type: "spring", stiffness: 300, damping: 200 },
          opacity: { duration: 0.5 },
        }}
      >
        {texts[index]}
      </motion.span>
    </Box>
  );
};
1 replies