ATA noob Posts - Answer Overflow

ATA noob

•Created by ATA noob on 9/18/2024 in #support

solid func for beforeunload

I have some user data which I want to save before tab is closed. Using onCleanup() doesn't save the data. I had to write this, but wondering if solid provides something similar

  const handleUnload = (_: BeforeUnloadEvent) => {
    saveData();
  };
  onMount(() => {
    window.addEventListener("beforeunload", handleUnload);
    onCleanup(() => {
      saveData();
      window.removeEventListener("beforeunload", handleUnload);
    });
  });

  const handleUnload = (_: BeforeUnloadEvent) => {
    saveData();
  };
  onMount(() => {
    window.addEventListener("beforeunload", handleUnload);
    onCleanup(() => {
      saveData();
      window.removeEventListener("beforeunload", handleUnload);
    });
  });

4 replies

SSolidJS

•Created by ATA noob on 5/12/2024 in #support

Stop infinite recursion when updating state

I need to update a store using it's previous value inside a createEffect. I am using import { useKeyDownEvent } from "@solid-primitives/keyboard"; to handle keyboard inputs. i have a store

const [UserSettingsStore, setUserSettingsStore] = createStore({
  showChat: true, ...})

const [UserSettingsStore, setUserSettingsStore] = createStore({
  showChat: true, ...})

Now according to the docs , I am doing this https://primitives.solidjs.community/package/keyboard#usekeydownevent:

import { useKeyDownEvent } from "@solid-primitives/keyboard";

const event = useKeyDownEvent();

createEffect(() => {
  const e = event();
  console.log(e); // => KeyboardEvent | null

  if (e) {
    setUserSettingsStore("showChat", !UserSettingsStore.showChat)
  }
});

import { useKeyDownEvent } from "@solid-primitives/keyboard";

const event = useKeyDownEvent();

createEffect(() => {
  const e = event();
  console.log(e); // => KeyboardEvent | null

  if (e) {
    setUserSettingsStore("showChat", !UserSettingsStore.showChat)
  }
});

This is causing an infinite loop, since the value update of showChat is retriggering the createEffect. Is there a way to read current value of UserSettingsStore.showChat in a non-reactive way, ie. prevent it from triggering infinite loop

6 replies

SSolidJS

•Created by ATA noob on 4/23/2024 in #support

Ideal way to load settings/configs

Suppose I have a bunch of settings like user preferences (dark mode), or configs which I load using an API, How should I save and load these settings on start. Should I just save these settings in localstorage, and then use onMount() in the main App component to set the signals for all my configs? Or is there some better way?

2 replies

SSolidJS

•Created by ATA noob on 4/19/2024 in #support

Is this Firebase Context correct?

I got this code online but not sure about it. Will the values come to me reactively. I'm worried that if I have a few protected(authenticated) routes, and firebase auth is still loading, then my user will get redirected to login page.

import { JSXElement, createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { app } from "../configs/firebase";
import { Auth, getAuth, onAuthStateChanged, User } from "firebase/auth";

interface UserStore {
  currentUser: User | null;
  loading: boolean;
}

interface FirebaseStore {
  user: UserStore;
  auth: Auth;
}

const FirebaseContext = createContext<FirebaseStore>();

export const FirebaseProvider = (props: { children: JSXElement }) => {
  const [user, setUser] = createStore<UserStore>({
    currentUser: null,
    loading: true,
  });

  const auth = getAuth(app);
  onAuthStateChanged(auth, (currentUser) => {
    setUser("currentUser", currentUser);
    setUser("loading", false);
  });

  const store = {
    user,
    auth,
  };

  return (
    <FirebaseContext.Provider value={store}>
      {props.children}
    </FirebaseContext.Provider>
  );
};

export function useFirebase(): FirebaseStore {
  return useContext(FirebaseContext)!;
  // Non-null assertion as we'll always provide the context via FirebaseProvider
}

import { JSXElement, createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { app } from "../configs/firebase";
import { Auth, getAuth, onAuthStateChanged, User } from "firebase/auth";

interface UserStore {
  currentUser: User | null;
  loading: boolean;
}

interface FirebaseStore {
  user: UserStore;
  auth: Auth;
}

const FirebaseContext = createContext<FirebaseStore>();

export const FirebaseProvider = (props: { children: JSXElement }) => {
  const [user, setUser] = createStore<UserStore>({
    currentUser: null,
    loading: true,
  });

  const auth = getAuth(app);
  onAuthStateChanged(auth, (currentUser) => {
    setUser("currentUser", currentUser);
    setUser("loading", false);
  });

  const store = {
    user,
    auth,
  };

  return (
    <FirebaseContext.Provider value={store}>
      {props.children}
    </FirebaseContext.Provider>
  );
};

export function useFirebase(): FirebaseStore {
  return useContext(FirebaseContext)!;
  // Non-null assertion as we'll always provide the context via FirebaseProvider
}

3 replies

SSolidJS

•Created by ATA noob on 4/17/2024 in #support

Configure Background for routes

I have a solid app where I want to change my background images dynamically based on which route/page it is. How can I configure bg1.png to automatically change based on which route is used. Should i create a global backgroundSignal, then use the Route."load" property to set the backgroundSignal to the current background. Then put the img in a switch to update when backgroundSignal changes?

const PageLayout = (props: any) => {
  return (
    <>
      <NavbarContainer />
       <img src="bg1.png"> // Should be Bg2.png for 2nd page, etc.
      <main>{props.children}</main>
    </>
  );
};

export const App = () => {
  return (
    <FirebaseProvider>
      <Router root={PageLayout}>
        <For each={PageLinkMap}>
          {(it) => <Route path={it.pageUrl} component={it.pageComponent} />}
        </For>
      </Router>
    </FirebaseProvider>
  );
};

const PageLayout = (props: any) => {
  return (
    <>
      <NavbarContainer />
       <img src="bg1.png"> // Should be Bg2.png for 2nd page, etc.
      <main>{props.children}</main>
    </>
  );
};

export const App = () => {
  return (
    <FirebaseProvider>
      <Router root={PageLayout}>
        <For each={PageLinkMap}>
          {(it) => <Route path={it.pageUrl} component={it.pageComponent} />}
        </For>
      </Router>
    </FirebaseProvider>
  );
};

4 replies

Gaming

Programming