SolidJS•17mo ago

Signal cross bound a route

Hi, I'm new to Solidjs, I wonder if there's a way to make a solid-router to cross bound a signal? I try to make a emails client app, let's say I have folders for: inbox, sent, trash, later those folders are router link and I have emails list, each email is organized in multiple folders, my signals are lifted in the app component like the following:

const [folders, setFolders] = createSignal(availableFolders);
const [currentFolder, setCurrentFolder] = createSignal("inbox");
const [emails, setEmails] = createSignal(allEmails);
const folderEmails = () => emails().filter(email => {
   return email.folders.indexOf(currentFolder()) > -1
 });
 const navigate = useNavigate();
 navigate(currentFolder());

const [folders, setFolders] = createSignal(availableFolders);
const [currentFolder, setCurrentFolder] = createSignal("inbox");
const [emails, setEmails] = createSignal(allEmails);
const folderEmails = () => emails().filter(email => {
   return email.folders.indexOf(currentFolder()) > -1
 });
 const navigate = useNavigate();
 navigate(currentFolder());

I need to change the current folder whenever the folder changes in the route and vice versa.

4 Replies

cherif_bOP•17mo ago

I tried to but it always returns undefined

export const routes: RouteDefinition[] = [
    {
        path: '/:folder',
        component: Emails,
    }
]

const App: Component = () => {
  const folderp = useParams().folder
  const [folders, setFolders] = createSignal(availableFolders);
  const [folder, setFolder] = createSignal("inbox");
  const [emails, setEmails] = createSignal(allEmails);
  const folderEmails = () => emails().filter(email => {
    return email.folders.indexOf(folder()) > -1
  });

  console.log(folderp)

  const Routes = useRoutes(routes);

  const navigate = useNavigate();
  navigate(folder());

  return (
    <div>
      <header>
        <Toolbar></Toolbar>
      </header>
      <aside>
        <ul>
          <For each={folders()}>
            {(folder, i) => (
              <li>
                <A href={`/${folder.id}`}>{folder.name}</A>
              </li>
            )}
          </For>
        </ul>
      </aside>
      <main>
        <Routes />
        {/* <Emails emails={folderEmails()} /> */}
      </main>
    </div>
  );
};

export const routes: RouteDefinition[] = [
    {
        path: '/:folder',
        component: Emails,
    }
]

const App: Component = () => {
  const folderp = useParams().folder
  const [folders, setFolders] = createSignal(availableFolders);
  const [folder, setFolder] = createSignal("inbox");
  const [emails, setEmails] = createSignal(allEmails);
  const folderEmails = () => emails().filter(email => {
    return email.folders.indexOf(folder()) > -1
  });

  console.log(folderp)

  const Routes = useRoutes(routes);

  const navigate = useNavigate();
  navigate(folder());

  return (
    <div>
      <header>
        <Toolbar></Toolbar>
      </header>
      <aside>
        <ul>
          <For each={folders()}>
            {(folder, i) => (
              <li>
                <A href={`/${folder.id}`}>{folder.name}</A>
              </li>
            )}
          </For>
        </ul>
      </aside>
      <main>
        <Routes />
        {/* <Emails emails={folderEmails()} /> */}
      </main>
    </div>
  );
};

REEEEE•17mo ago

folderp will not be reactive make it a function if you want to use it like that const folderp = () => useParams().folder

cherif_bOP•17mo ago

Thank you, I'll try it @._rb I'm seeing different behavior between config based routing and regular routing, thank you @._rb and @draw.uy

REEEEE•17mo ago

your console log will also not be called so you will only see the first value because components in Solid are not rerun. If you want to log a reactive value use an effect.

createEffect(() => {
  console.log(folderp())
})

createEffect(() => {
  console.log(folderp())
})

Gaming

Programming

Signal cross bound a route