KingKorai 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 KingKorai 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 KingKorai 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 KingKorai 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 KingKorai 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 KingKorai 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 KingKorai 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 KingKorai 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 KingKorai 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();
  }
}