Luc Ledo Comments - Answer Overflow

import fs from "fs"
import path from "path"

const mdxDir = path.join(process.cwd(), "app/mdx")

export function ComponentPreview({
  slug,
  Component,
}: {
  slug: string
  Component: () => JSX.Element
}) {
  const filePath = path.join(mdxDir, `${slug}.tsx`)
  const fileContent = fs.readFileSync(filePath, "utf8")
  return (
    <>
      <Component />
      <pre>
        <code>{fileContent}</code>
      </pre>
    </>
  )
}

import fs from "fs"
import path from "path"

const mdxDir = path.join(process.cwd(), "app/mdx")

export function ComponentPreview({
  slug,
  Component,
}: {
  slug: string
  Component: () => JSX.Element
}) {
  const filePath = path.join(mdxDir, `${slug}.tsx`)
  const fileContent = fs.readFileSync(filePath, "utf8")
  return (
    <>
      <Component />
      <pre>
        <code>{fileContent}</code>
      </pre>
    </>
  )
}

13 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 1/30/2024 in #questions

Best way to get a react component's raw code?

I don't see any better way to do this. Shadcn solution is much more cursed imo.

13 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 1/30/2024 in #questions

Best way to get a react component's raw code?

I got it working. Just had to specify utf8 encoding lol.

13 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 1/30/2024 in #questions

Best way to get a react component's raw code?

I do know about contentlayer. What I don't understand is how he can use ComponentPreview without passing in any children even though it's required.

<ComponentPreview
  name="accordion-demo"
  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
/>

<ComponentPreview
  name="accordion-demo"
  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
/>

He uses this to get the raw code...

  const [config] = useConfig()
  const index = styles.findIndex((style) => style.name === config.style)

  const Codes = React.Children.toArray(children) as React.ReactElement[]
  const Code = Codes[index]

  const [config] = useConfig()
  const index = styles.findIndex((style) => style.name === config.style)

  const Codes = React.Children.toArray(children) as React.ReactElement[]
  const Code = Codes[index]

But I tried a simplified example in my project and it didn't work because there is no children. So then I pass in some children but still I didn't get raw code back. There must be some easier way to do this since it's a common problem for any coding example, this is way too complicated.

13 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 1/30/2024 in #questions

Best way to get a react component's raw code?

yes, I read the .tsx file

13 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 1/30/2024 in #questions

Best way to get a react component's raw code?

I tried that too. It doesn't give the raw code. Unless I'm doing something wrong.

13 replies

TTCTheo's Typesafe Cult

•Created by zendev on 4/19/2023 in #questions

File storage with T3

Alright thanks, and have you used uploadthing?

48 replies

TTCTheo's Typesafe Cult

•Created by zendev on 4/19/2023 in #questions

File storage with T3

Is it still bad, how does DOS compare to R2 in terms of ease of use?

48 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 8/10/2023 in #questions

How to extract tuple from array of objects for Zod enums?

Don't think you understood the question. Here is the answer I found though in case anyone else needs it.

const tupleMap = <
  const T extends readonly Record<string, unknown>[],
  Key extends keyof T[number],
>(
  input: T,
  key: Key,
): { [k in keyof T]: T[k][Key] } => {
  return input.map((row) => row[key as never]) as never
}
export const planTuple = tupleMap(PLANS, "name") //type will be: const planTuple: readonly ["free", "basic", "standard", "premium"]

const tupleMap = <
  const T extends readonly Record<string, unknown>[],
  Key extends keyof T[number],
>(
  input: T,
  key: Key,
): { [k in keyof T]: T[k][Key] } => {
  return input.map((row) => row[key as never]) as never
}
export const planTuple = tupleMap(PLANS, "name") //type will be: const planTuple: readonly ["free", "basic", "standard", "premium"]

3 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 10/13/2023 in #questions

Is my backend team right?🤔

Basically, I believe this solution it would not matter how big the collection is since we are using limit to take only x amount.

11 replies

TTCTheo's Typesafe Cult

•Created by Luc Ledo on 10/13/2023 in #questions

Is my backend team right?🤔

Someone proposed this solution, tell me what yall think.

const MongoClient = require('mongodb').MongoClient;

async function searchImages(userID, searchString, page, pageSize) {
  const client = new MongoClient('mongodb://localhost:27017', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  try {
    await client.connect();

    const db = client.db('yourDatabaseName');
    const collection = db.collection('yourImageCollectionName');

    // Perform the search combining user filtering and full-text search
    const searchResults = await collection
      .find({
        userID: userID,
        $text: { $search: searchString },
      })
      .skip((page - 1) * pageSize)
      .limit(pageSize)
      .project({ _id: 0 }) // Optionally, exclude the _id field from results
      .toArray();

    return searchResults;
  } finally {
    client.close();
  }
}

const MongoClient = require('mongodb').MongoClient;

async function searchImages(userID, searchString, page, pageSize) {
  const client = new MongoClient('mongodb://localhost:27017', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  try {
    await client.connect();

    const db = client.db('yourDatabaseName');
    const collection = db.collection('yourImageCollectionName');

    // Perform the search combining user filtering and full-text search
    const searchResults = await collection
      .find({
        userID: userID,
        $text: { $search: searchString },
      })
      .skip((page - 1) * pageSize)
      .limit(pageSize)
      .project({ _id: 0 }) // Optionally, exclude the _id field from results
      .toArray();

    return searchResults;
  } finally {
    client.close();
  }
}