S
SolidJS16mo ago
cherif_b

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_b
cherif_bOP16mo 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
REEEEE16mo ago
folderp will not be reactive make it a function if you want to use it like that const folderp = () => useParams().folder
cherif_b
cherif_bOP16mo 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
REEEEE16mo 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())
})
Want results from more Discord servers?
Add your server