Eatham Comments - Answer Overflow

Here is the solidjs playground for it: https://playground.solidjs.com/anonymous/097424a8-e664-4785-95f0-456fff6aad3a Note: There is a bug because I can't export solids JSX.Element type in the playground

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

Updated the code with the modifications

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

Made a couple modifications. Now it navigates...

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

Sorry bit long. If you want it somewhere else I can do that

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

Then to use it I did the following

function PageViewer(props: PageViewerProps) {
  const router = new MiniRouter({
    paths: {
      ...CreateMiniRouterPath("/settings", SettingsPage),
      ...CreateMiniRouterPath("/install", InstallPage)
    }, invalid: InvalidPage, currentPath: "/settings"});


  return (
    <div>
      <router.router/>
    </div>
  )
}

function PageViewer(props: PageViewerProps) {
  const router = new MiniRouter({
    paths: {
      ...CreateMiniRouterPath("/settings", SettingsPage),
      ...CreateMiniRouterPath("/install", InstallPage)
    }, invalid: InvalidPage, currentPath: "/settings"});


  return (
    <div>
      <router.router/>
    </div>
  )
}

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

    this.router = <RouterViewer element={currentElement().element} props={currentElement().props}></RouterViewer>;

    this.navigate = (path: string, props?: {}) => {
      console.log("navigate")
      this.history.push(path);
      this.currentPathProps = props;
      this.history.future = [];
    }

    this.backwards = () => {
      if (this.history.past.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.past.pop()!;
        this.history.future.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }

    this.forwards = () => {
      if (this.history.future.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.future.pop()!;
        this.history.past.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }
  }
}

function CreateMiniRouterPath(path: string, element: ValidComponent, props?: {}) {
  return {[path]: {element, props}};
}

export {MiniRouter, CreateMiniRouterPath};

    this.router = <RouterViewer element={currentElement().element} props={currentElement().props}></RouterViewer>;

    this.navigate = (path: string, props?: {}) => {
      console.log("navigate")
      this.history.push(path);
      this.currentPathProps = props;
      this.history.future = [];
    }

    this.backwards = () => {
      if (this.history.past.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.past.pop()!;
        this.history.future.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }

    this.forwards = () => {
      if (this.history.future.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.future.pop()!;
        this.history.past.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }
  }
}

function CreateMiniRouterPath(path: string, element: ValidComponent, props?: {}) {
  return {[path]: {element, props}};
}

export {MiniRouter, CreateMiniRouterPath};

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

class MiniRouter {
  router: SolidJSX.JSX.Element;
  paths: Record<string, RouterComponent>;
  currentPath: {set: (value: string) => void, get: Accessor<string>};
  currentPathProps?: Record<string, any>;
  history: {
    past: { [p: string]: RouterComponent }[],
    future: { [p: string]: RouterComponent }[],
    push: (path: string) => void,
  };
  navigate: (path: string) => void;
  forwards: () => void;
  backwards: () => void;

  constructor(props: MiniRouterProps) {
    this.paths = props.paths;

    this.paths["404"] = { element: props.invalid ?? (() => <div></div>)};

    const [getCurrentPath, setCurrentPath] = createSignal<string>(props.currentPath ?? "404");

    this.currentPath = {set: setCurrentPath, get: getCurrentPath};

    const currentElement = createMemo(() => {
      let x = (this.paths[this.currentPath.get()] ?? this.paths["404"]);
      x.props = this.currentPathProps;
      return x;
    });

    this.history = {
      past: [],
      future: [],
      push: (path: string) => {
        this.history.past.push({[this.currentPath.get()]: currentElement()});
        this.currentPath.set(path);
      }
    }

class MiniRouter {
  router: SolidJSX.JSX.Element;
  paths: Record<string, RouterComponent>;
  currentPath: {set: (value: string) => void, get: Accessor<string>};
  currentPathProps?: Record<string, any>;
  history: {
    past: { [p: string]: RouterComponent }[],
    future: { [p: string]: RouterComponent }[],
    push: (path: string) => void,
  };
  navigate: (path: string) => void;
  forwards: () => void;
  backwards: () => void;

  constructor(props: MiniRouterProps) {
    this.paths = props.paths;

    this.paths["404"] = { element: props.invalid ?? (() => <div></div>)};

    const [getCurrentPath, setCurrentPath] = createSignal<string>(props.currentPath ?? "404");

    this.currentPath = {set: setCurrentPath, get: getCurrentPath};

    const currentElement = createMemo(() => {
      let x = (this.paths[this.currentPath.get()] ?? this.paths["404"]);
      x.props = this.currentPathProps;
      return x;
    });

    this.history = {
      past: [],
      future: [],
      push: (path: string) => {
        this.history.past.push({[this.currentPath.get()]: currentElement()});
        this.currentPath.set(path);
      }
    }

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

import {Accessor, Component, createMemo, createSignal, ValidComponent} from "solid-js";
import SolidJSX from "solid-js/types/jsx";
import {Dynamic} from "solid-js/web";

function RouterViewer(props: { element: ValidComponent, props?: {}}) {
  return (
    <Dynamic component={props.element} {...props}/>
  )
}

interface RouterComponent {
  element: ValidComponent;
  props?: Record<string, any>;
}

interface MiniRouterProps {
  paths: Record<string, RouterComponent>,
  invalid?: ValidComponent,
  currentPath?: string,
}

import {Accessor, Component, createMemo, createSignal, ValidComponent} from "solid-js";
import SolidJSX from "solid-js/types/jsx";
import {Dynamic} from "solid-js/web";

function RouterViewer(props: { element: ValidComponent, props?: {}}) {
  return (
    <Dynamic component={props.element} {...props}/>
  )
}

interface RouterComponent {
  element: ValidComponent;
  props?: Record<string, any>;
}

interface MiniRouterProps {
  paths: Record<string, RouterComponent>,
  invalid?: ValidComponent,
  currentPath?: string,
}

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

Ok @Brendonovich, I have made it. Havent tested navigation yet. But have something... might not be the best way to do it though.

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

I might try creating a mini router component with data from a global signal

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

Electron does I think... so idk

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

But im not sure if tauri saves the window state if it goes to the tray

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

True. I don't want the state to be saved if the app just launches. But definatly when I restore the window after it came from the tray

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

Yeh that makes sense. And if it were a website that is how I would do it as well. But considering that this is a site with no url bar then it shouldnt be needed

59 replies

SSolidJS

•Created by Eatham on 4/23/2024 in #support

How to call `useNavigate` outside of router

I could store it as a global variable right...?

59 replies

Gaming

Programming