Nin Posts - Answer Overflow

Nin

Explore posts from servers

•Created by Nin on 9/21/2023 in #support

Navigate user in login/logout functions

I'm trying to make it generic to send my users either to the main page or to the login page when they either login or logout but I'm having trouble doing this in a generic way.

import { createContext, createSignal, useContext } from "solid-js"
import type { Session } from "@supabase/supabase-js"

import supabase from "../supabase"

export const AuthContext = createContext<{
  session: () => Session | null
  login: (session: Session | null) => void
  logout: () => void
}>()

const [session, setSession] = createSignal<Session | null>(null)

export const authContext = {
  session: () => session(),
  login: (supabaseSession: Session | null) => {
    setSession(supabaseSession)
  },
  logout: () => {
    setSession(null)
    supabase.auth.signOut()
  }
}
export const useAuth = () => useContext(AuthContext)!

import { createContext, createSignal, useContext } from "solid-js"
import type { Session } from "@supabase/supabase-js"

import supabase from "../supabase"

export const AuthContext = createContext<{
  session: () => Session | null
  login: (session: Session | null) => void
  logout: () => void
}>()

const [session, setSession] = createSignal<Session | null>(null)

export const authContext = {
  session: () => session(),
  login: (supabaseSession: Session | null) => {
    setSession(supabaseSession)
  },
  logout: () => {
    setSession(null)
    supabase.auth.signOut()
  }
}
export const useAuth = () => useContext(AuthContext)!

This is my Auth Provider for example, I would like to add to the login/logout sessions a redirect. I've tried to use useNavigate but get the error it should be wrapped in a <Router />, I've tried using return <Navigate href="/" /> but this doesn't work either. Anyone able to help me out here?

5 replies

SSolidJS

•Created by Nin on 9/21/2023 in #support

Multiple Path Routes still Re-rendering, why?

              <Routes>
                <Route path={["/auth/signin","/auth/signup"]} component={Authentication} />
                <FileRoutes />
              </Routes>

              <Routes>
                <Route path={["/auth/signin","/auth/signup"]} component={Authentication} />
                <FileRoutes />
              </Routes>

I'm rendering the same component on my Authentication pages yet there's still a flicker which looks like a re-render, I'm wondering why?

2 replies

SSolidJS

•Created by Nin on 9/18/2023 in #support

How to mutate a createResource storage

Hi all, I'd like to get some help with mutating a store that is set as a createResource storage.

function createDeepSignal<T>(value: T): Signal<T> {
  const [store, setStore] = createStore({
    value
  });
  return [
    () => store.value,
    (v: T) => {
      const unwrapped = unwrap(store.value);
      typeof v === "function" && (v = v(unwrapped));
      setStore("value", reconcile(v));
      return store.value;
    }
  ] as Signal<T>;
}

const [resource, {mutate, refetch}] = createResource(fetcher, {
  storage: createDeepSignal
});

function createDeepSignal<T>(value: T): Signal<T> {
  const [store, setStore] = createStore({
    value
  });
  return [
    () => store.value,
    (v: T) => {
      const unwrapped = unwrap(store.value);
      typeof v === "function" && (v = v(unwrapped));
      setStore("value", reconcile(v));
      return store.value;
    }
  ] as Signal<T>;
}

const [resource, {mutate, refetch}] = createResource(fetcher, {
  storage: createDeepSignal
});

Given the above snippet, I can access my store regularly by running resource() this returns the contents of my store, but how can I mutate it? Mutate only accepts one argument and usually setStore would receive multiple.

18 replies

SSolidJS

•Created by Nin on 2/8/2023 in #support

createResource State gets updated without directly doing so

I have a createResource function which retrieves data from a database, in the same function, I'm extracting a set of data and calling setState for an already existing object called selectedTasks.

  const [clients] = createResource(async () => {
    const { data: clients, error } = await supabaseClient(dblogic)

    const taskList = {}
    Object.entries(clients?.tasks).forEach(([subject, obj]) => {
      if (obj.tasks) {
        taskList[subject] = obj.tasks
      } else {
        taskList[subject] = [subject]
      }
    })

    setState('selectedTasks', taskList)
    return { ...clients, taskList }
  })

  const [clients] = createResource(async () => {
    const { data: clients, error } = await supabaseClient(dblogic)

    const taskList = {}
    Object.entries(clients?.tasks).forEach(([subject, obj]) => {
      if (obj.tasks) {
        taskList[subject] = obj.tasks
      } else {
        taskList[subject] = [subject]
      }
    })

    setState('selectedTasks', taskList)
    return { ...clients, taskList }
  })

Later on in my page I'm updating the state of the selectedTasks with a checkbox, however this appears to also be updating my createResource resource. Very confused! This is my handleCheckboxChange

const handleCheckboxChange = (group) => (event) => {
    if (event.target.checked) {
      setState('selectedTasks', {
        ...state.selectedTasks,
        [group]: [...state.selectedTasks[group], event.target.value],
      })
    } else {
      setState('selectedTasks', {
        ...state.selectedTasks,
        [group]: state.selectedTasks[group].filter(
          (task) => task !== event.target.value,
        ),
      })
    }
  }

const handleCheckboxChange = (group) => (event) => {
    if (event.target.checked) {
      setState('selectedTasks', {
        ...state.selectedTasks,
        [group]: [...state.selectedTasks[group], event.target.value],
      })
    } else {
      setState('selectedTasks', {
        ...state.selectedTasks,
        [group]: state.selectedTasks[group].filter(
          (task) => task !== event.target.value,
        ),
      })
    }
  }

2 replies

SSolidJS

•Created by Nin on 2/2/2023 in #support

Sentry in Solid / Vercel

Would anyone be able to assist with setting up Sentry in my Vercel deployment that hosts Solid? Releases are being created, commits are being seen, it's just that sourceMaps are not being uploaded (automatically). Looking forward to some help!

1 replies

SSolidJS

•Created by Nin on 12/4/2022 in #support

Rerender child component with updated props

I've built a pagination component that takes a prop called totalPages, I've created a signal for this as I only know the totalPages once my createResource is done loading. However, the child component does not rerender when totalPages is updated. How do I make the component update itself? Parent Code

const [totalPages, setTotalPages] = createSignal(0)

const [totalPages, setTotalPages] = createSignal(0)

<Pagination
  pagesBuffer={5}
  totalPages={totalPages()}
  onChange={(index) => {
    setCurrentPage(index + 1)
    refetch()
    }
  }
/>

<Pagination
  pagesBuffer={5}
  totalPages={totalPages()}
  onChange={(index) => {
    setCurrentPage(index + 1)
    refetch()
    }
  }
/>

34 replies

SSolidJS

•Created by Nin on 12/3/2022 in #support

Pagination Component

Hi all, I'm a beginning developer so bear with me while I go through these noob mistakes. I'm trying to utilize a React component called rc-pagination however when I follow their example my page stops loading and I get an error. I'm basically looking for an easy way to start using a proper pagination component similar to what Ant Design offers. The one I tried implementing: https://pagination-react-component.vercel.app/demo/more#more The error I'm facing after I've inserted my pagination component:

Uncaught (in promise) TypeError: Cannot call a class as a function

Uncaught (in promise) TypeError: Cannot call a class as a function

I'll happily use a different library which could create a similar experience.

11 replies

Gaming

Programming