Casacobra Posts - Answer Overflow

Casacobra

•Created by Casacobra on 10/1/2024 in #support

Safari Video Not AutoPlaying when inside a Suspense

Hey everyone ! Not sure if this is intended to happen but it’s a bug. When you have a video html tag with:

<video autoplay playinsline muted><source src="" /></video>

<video autoplay playinsline muted><source src="" /></video>

It doesn’t render on Safari specifically when it’s inside a <Suspense>. If placed outside it renders automatically in Safari. Does anyone know why this happens? Seems like a weird bug.

12 replies

SSolidJS

•Created by Casacobra on 7/26/2024 in #support

Best approach for using createResource

I have a question. The createResource should be used outside the component and not inside the component, is this a correct statement? I only ask because I noticed the fetcher runs twice if put inside a component vs having it outside the component?

3 replies

SSolidJS

•Created by Casacobra on 7/20/2024 in #support

Outlet issue on routes

Hey everyone, I'm struggling at the moment with setting up my routes... I have the following in app.tsx:

  return (
    <>
      <Router
        root={(props) => (
          <>
            <ColorModeScript storageType={storageManager.type} />
            <ColorModeProvider storageManager={storageManager}>
              <AuthProvider>
                <AuthGuard>{props.children}</AuthGuard>
              </AuthProvider>
            </ColorModeProvider>
          </>
        )}
      >
        <Route path="/" component={AuthLayout}>
          <Route path={["/", "/flags"]} component={Flags} />
          <Route path="/flags/:id" component={FlagIndex} />
          <Route path="/settings" component={Settings} />
        </Route>
        <Route path="/auth" component={DefaultLayout}>
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={Signup} />
        </Route>
      </Router>
    </>
  )
}

  return (
    <>
      <Router
        root={(props) => (
          <>
            <ColorModeScript storageType={storageManager.type} />
            <ColorModeProvider storageManager={storageManager}>
              <AuthProvider>
                <AuthGuard>{props.children}</AuthGuard>
              </AuthProvider>
            </ColorModeProvider>
          </>
        )}
      >
        <Route path="/" component={AuthLayout}>
          <Route path={["/", "/flags"]} component={Flags} />
          <Route path="/flags/:id" component={FlagIndex} />
          <Route path="/settings" component={Settings} />
        </Route>
        <Route path="/auth" component={DefaultLayout}>
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={Signup} />
        </Route>
      </Router>
    </>
  )
}

I'm not sure if I'm setting up the routes here correctly, but I keep getting an error when it comes to no exported outlet. In my /flags/[:id] route i have a useParam() and this is whats throwing the error. Is there a reason why I keep getting this error. Nothing renders.

Uncaught SyntaxError: The requested module '/_build/@fs/C:/Users/anonymous/Projects/anonmymous/node_modules/.pnpm/@[email protected][email protected]/node_modules/@solidjs/router/dist/index.jsx' does not provide an export named 'Outlet' (at router.tsx:2:22)

Uncaught SyntaxError: The requested module '/_build/@fs/C:/Users/anonymous/Projects/anonmymous/node_modules/.pnpm/@[email protected][email protected]/node_modules/@solidjs/router/dist/index.jsx' does not provide an export named 'Outlet' (at router.tsx:2:22)

6 replies

SSolidJS

•Created by Casacobra on 5/21/2023 in #support

Reactivity when passing props down not reactive on nested component

Hi guys and girls, I'm currently struggling with reactivity. Here's a look at the code: ParentComponent.tsx

                  
export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)
  // create effect stuff

  return level()?.placements.map((placement) => {
    const [x, y] = placement.displayXY()

    return (
        <div
            style={{
              position: 'absolute',
              transform: `translate3d(${x}px, ${y}px, 0px`,
            }
            }>
          {placement.renderComponent()}
        </div>
    )
  }
}

                  
export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)
  // create effect stuff

  return level()?.placements.map((placement) => {
    const [x, y] = placement.displayXY()

    return (
        <div
            style={{
              position: 'absolute',
              transform: `translate3d(${x}px, ${y}px, 0px`,
            }
            }>
          {placement.renderComponent()}
        </div>
    )
  }
}

If I add this in the parent to test, everything works correctly and properties are reactive. However, when I move this into another component ChildComponent.tsx I loose reactivity and instead get static values... ParentComponent.tsx:

export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)

  // create effect stuff

  return(
   <ChildComponent level={level()} />
  )
}

export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)

  // create effect stuff

  return(
   <ChildComponent level={level()} />
  )
}

ChildComponent.tsx:

export default function ChildComponent(props) {
  return (
      <For each={props.level.placements}>
        {(placement) => {
          const [x, y] = placement.displayXY()

          return (
            <div
              style={{
                position: 'absolute',
                transform: `translate3d(${x}px, ${y}px, 0)`,
              }}
            >
              {placement.renderComponent()}
            </div>
          )
        }}
      </For>
  )
}

export default function ChildComponent(props) {
  return (
      <For each={props.level.placements}>
        {(placement) => {
          const [x, y] = placement.displayXY()

          return (
            <div
              style={{
                position: 'absolute',
                transform: `translate3d(${x}px, ${y}px, 0)`,
              }}
            >
              {placement.renderComponent()}
            </div>
          )
        }}
      </For>
  )
}

Any help would be greatly appreciated, thanks in advance!

17 replies

SSolidJS

•Created by Casacobra on 1/4/2023 in #support

Authorization still triggering fetch when using conditional routing for AuthProvider

Hi guys and girls, I'm currently running into an issue where I have some basic routing in an auth provider. On mount it checks if there is a user / session. If no session or user is present, I redirect to the /login page. This all works. The minute I am not logged in, but visit / or /bookings it still runs any createResource present on that page. In my use case I'm actually using createCachedResource which is @lxsmnsyc library. In my case the cache is storing the empty results when I login again. Was wondering how you'd go about preventing anything from fetching until the auth is resolved. What I see happening is, when you visit /bookings and you're not logged in, it runs that route figures out if you're logged in or not, then redirects to login. But at that point the fetcher has already started.

6 replies

SSolidJS

•Created by Casacobra on 12/22/2022 in #support

Solid Cache

hey @lxsmnsyc sorry to bother you. I´ve been trying your library, am I doing this correctly:

  const [queryParams, setQueryParams] = useSearchParams()

  const { data: bookings, isFetching } = createCachedResource({
    source: () => queryParams,
    key: ({ page, query }) => [page, query],
    get: async () => {
      const searchQuery =
        queryParams.query === undefined ? '' : queryParams.query
      const currentPage = queryParams.page ? Number(queryParams.page) : 1

      return await supabaseClient
        .from('bookings')
        .select(
          'booking_start, booking_end, reference, created_at, products!inner(product_name, product_id)',
          { count: 'exact' },
        )
        .eq('tenant_id', user?.user_metadata.tenant_id)
        .ilike('reference', '%' + searchQuery + '%')
        .range(
          currentPage * pageSize() - pageSize(),
          currentPage * pageSize() - 1,
        )
        .order('reference', { ascending: true })
    },
  })

  const [queryParams, setQueryParams] = useSearchParams()

  const { data: bookings, isFetching } = createCachedResource({
    source: () => queryParams,
    key: ({ page, query }) => [page, query],
    get: async () => {
      const searchQuery =
        queryParams.query === undefined ? '' : queryParams.query
      const currentPage = queryParams.page ? Number(queryParams.page) : 1

      return await supabaseClient
        .from('bookings')
        .select(
          'booking_start, booking_end, reference, created_at, products!inner(product_name, product_id)',
          { count: 'exact' },
        )
        .eq('tenant_id', user?.user_metadata.tenant_id)
        .ilike('reference', '%' + searchQuery + '%')
        .range(
          currentPage * pageSize() - pageSize(),
          currentPage * pageSize() - 1,
        )
        .order('reference', { ascending: true })
    },
  })

I'm not really sure how key works, I see it's string based, but was wondering how to effectively use this correctly

53 replies

SSolidJS

•Created by Casacobra on 12/9/2022 in #support

Is this considered good practice?

Hey! I have a createResource that only runs when params.id and isEditMode are active. My question. Is this considered a good practice? My component has 2 modes. Create and Editing. I'm trying to combine both into one view. Is it good practice to create 2 api fetches from a createResource and conditionally handle what the output is in a createEffect? I would love some feedback on the code below and maybe explain if this is a good approach. The goal is, if your in editMode it skips fetching products, but requires to fetch schedules, so you at least have a schedule to attach your new product too. Otherwise, if you're editing a product, I want to fetch both and then include all the product data into the fields by default.

function Component(props: ComponentProps) {
  const [fields, setField] = createStore(initialValues)
  const [supabaseData] = createResource<Product>(
    () => [params.id, isEditMode],
    async () => {
      const product = isEditMode ? await getProduct(params.id) : undefined
      const schedules = await getSchedules<Schedule>(
        user?.user_metadata?.tenant_id,
      )

      return { product, ...schedules }
    },
  )

  const loading = () => supabaseData.loading

  createEffect(() => {
    if (loading()) return
    const { product, schedules }: { product: Product; schedules: Schedule[] } =
      supabaseData()

    setFields(product || defaultProductData)
    setProductName(product?.product_name)

    const hasSchedules = product?.schedule_id === null && schedules.length > 0

    setSchedules(schedules)

    if (hasSchedules) {
      setValues({ schedule_id: schedules[0].schedule_id })
    }
  })

  return (
    // Something
  )
}

function Component(props: ComponentProps) {
  const [fields, setField] = createStore(initialValues)
  const [supabaseData] = createResource<Product>(
    () => [params.id, isEditMode],
    async () => {
      const product = isEditMode ? await getProduct(params.id) : undefined
      const schedules = await getSchedules<Schedule>(
        user?.user_metadata?.tenant_id,
      )

      return { product, ...schedules }
    },
  )

  const loading = () => supabaseData.loading

  createEffect(() => {
    if (loading()) return
    const { product, schedules }: { product: Product; schedules: Schedule[] } =
      supabaseData()

    setFields(product || defaultProductData)
    setProductName(product?.product_name)

    const hasSchedules = product?.schedule_id === null && schedules.length > 0

    setSchedules(schedules)

    if (hasSchedules) {
      setValues({ schedule_id: schedules[0].schedule_id })
    }
  })

  return (
    // Something
  )
}

7 replies

Gaming

Programming