Giuliopime Posts - Answer Overflow

Giuliopime

Explore posts from servers

NNuxt TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by Giuliopime on 6/17/2024 in #questions

Dialog shadcn not showing up as a dialog but just as content

6 replies

TTCTheo's Typesafe Cult

•Created by Giuliopime on 6/9/2024 in #questions

nextjs api route request.query is undefined

export async function GET(
  req: NextApiRequest,
  res: NextApiResponse<GoogleOAuthCodeExchangeApiResponse>
) {
  console.info(`request query ${req.query}`)
  const code = req.query.code

export async function GET(
  req: NextApiRequest,
  res: NextApiResponse<GoogleOAuthCodeExchangeApiResponse>
) {
  console.info(`request query ${req.query}`)
  const code = req.query.code

logs:

request query undefined

request query undefined

I followed the docs and req.query should be {} by default but here is undefined, why?

4 replies

TTCTheo's Typesafe Cult

•Created by Giuliopime on 4/22/2024 in #questions

how to properly compare enums and interface unions?

I have the following function in my api client:

  public static async getLoggedInUser(): Promise<IxUser | IxApiException> {
    const res = await fetch(`${this.BASE_URL}/me`, {})

    if (res.ok) {
      return await res.json()
    } else {
      switch (res.status) {
        case 401: {
          return IxApiException.NOT_AUTHENTICATED;
        }
        default: {
          return IxApiException.UNKNOWN;
        }
      }
    }
  }

  public static async getLoggedInUser(): Promise<IxUser | IxApiException> {
    const res = await fetch(`${this.BASE_URL}/me`, {})

    if (res.ok) {
      return await res.json()
    } else {
      switch (res.status) {
        case 401: {
          return IxApiException.NOT_AUTHENTICATED;
        }
        default: {
          return IxApiException.UNKNOWN;
        }
      }
    }
  }

I now need to use it in my react component:

  const query = useQuery({
    queryKey: [],
    queryFn: IxApiClient.getLoggedInUser
  })

  const query = useQuery({
    queryKey: [],
    queryFn: IxApiClient.getLoggedInUser
  })

Here query.value will be a union of IxUser | IxApiException How can I check for the type and conditionally render something in react? I can't use instanceOf either on IxUser (because it's an interface) or IxApiException 'cause it's an enum:

export interface IxUser {
  id: string,
  email: string,
  creation_timestamp: number,
  creation_source: UserCreationSource
}

export enum IxApiException {
  UNKNOWN = "Something went wrong, please try again later",
  NOT_AUTHENTICATED = "You are not logged in",

  REGISTER_INVALID_EMAIL_OR_PASSWORD = "The email or password are not valid",
  REGISTER_UNUSABLE_EMAIL = "This email cannot be used to register",

  LOGIN_INVALID_CREDENTIALS = "Email or password are incorrect",
  LOGIN_EMAIL_NOT_VERIFIED = "You must verify your email to login",

  EMAILS_RATE_LIMITED = "You requested too many emails, try again later",

  PASSWORD_RESET_USER_NOT_FOUND = "No user with the provided email has been found"
}

export interface IxUser {
  id: string,
  email: string,
  creation_timestamp: number,
  creation_source: UserCreationSource
}

export enum IxApiException {
  UNKNOWN = "Something went wrong, please try again later",
  NOT_AUTHENTICATED = "You are not logged in",

  REGISTER_INVALID_EMAIL_OR_PASSWORD = "The email or password are not valid",
  REGISTER_UNUSABLE_EMAIL = "This email cannot be used to register",

  LOGIN_INVALID_CREDENTIALS = "Email or password are incorrect",
  LOGIN_EMAIL_NOT_VERIFIED = "You must verify your email to login",

  EMAILS_RATE_LIMITED = "You requested too many emails, try again later",

  PASSWORD_RESET_USER_NOT_FOUND = "No user with the provided email has been found"
}

Am I approaching this whole typing thing wrongly in typescript? Coming from different languages this is how I would usually structure things but here it seems really hard to use those types

2 replies

TTCTheo's Typesafe Cult

•Created by Giuliopime on 4/16/2024 in #questions

Animating a background moving between grid elements

I made this simple switch but I wanna animate the background moving from left to right instead of having it disappear and reappear. Right now the background is just a css class applied when the item is active, but I was thinking of creating a grid item that overlaps the other two with the same width to achieve this. Couldn't get it working though, any tips on how I can do this? This is my current component

<script lang="ts" setup>
defineProps<{
  first: string
  second: string
}>()
const enabled = ref(false)

function toggle() {
  enabled.value = !enabled.value
}
</script>

<template>
  <Switch
    v-model="enabled"
    class="relative grid grid-cols-2 bg-grey-900 gap-2 border-box-border rounded-full border p-1 cursor-pointer"
    @click="toggle"
  >
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="enabled ? 'bg-purple-500' : ''"
    >{{ first }}</span>
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="!enabled ? 'bg-purple-500' : ''"
    >{{ second }}</span>
  </Switch>
</template>

<script lang="ts" setup>
defineProps<{
  first: string
  second: string
}>()
const enabled = ref(false)

function toggle() {
  enabled.value = !enabled.value
}
</script>

<template>
  <Switch
    v-model="enabled"
    class="relative grid grid-cols-2 bg-grey-900 gap-2 border-box-border rounded-full border p-1 cursor-pointer"
    @click="toggle"
  >
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="enabled ? 'bg-purple-500' : ''"
    >{{ first }}</span>
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="!enabled ? 'bg-purple-500' : ''"
    >{{ second }}</span>
  </Switch>
</template>

8 replies

TTCTheo's Typesafe Cult

•Created by Giuliopime on 10/20/2023 in #questions

Guide on how to make such a css effect

I'm looking for a generic guide on which css features to use to make something like this? Can this all be made via a simple background or does it require multiple html elements? Anyone did something like this before?

7 replies

TTCTheo's Typesafe Cult

•Created by Giuliopime on 10/17/2023 in #questions

Border that transitions trough row of elements

How do I animate a border between a row of items? I provided a sample from the JetBrains website. I know how to do this with js by manually calculating padding via button sizes, but I was wondering if there was a more "sleek" way of doing this with html and css directly (or react / svelte whatevs)

10 replies

Gaming

Programming