toticozeni Comments - Answer Overflow

toticozeni

Posts Comments

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

Woo hoo 🔥

24 replies

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

@Dada

24 replies

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

If you want to keep the libraries you could unify the state via context: ColorModeContext.tsx

import React, { createContext, useContext } from 'react';
import useLocalStorage from './useLocalStorage';

type ColorMode = 'dark' | 'light';
const ColorModeContext = createContext<{
  colorMode: ColorMode;
  setColorMode: (mode: ColorMode) => void;
} | undefined>(undefined);

export const ColorModeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');

  useEffect(() => {
    const className = 'dark';
    const bodyClass = window.document.body.classList;
    colorMode === 'dark'
      ? bodyClass.add(className)
      : bodyClass.remove(className);
  }, [colorMode]);

  return (
    <ColorModeContext.Provider value={{ colorMode, setColorMode }}>
      {children}
    </ColorModeContext.Provider>
  );
};

export const useColorMode = () => {
  const context = useContext(ColorModeContext);
  if (!context) {
    throw new Error('useColorMode must be used within a ColorModeProvider');
  }
  return context;
};

import React, { createContext, useContext } from 'react';
import useLocalStorage from './useLocalStorage';

type ColorMode = 'dark' | 'light';
const ColorModeContext = createContext<{
  colorMode: ColorMode;
  setColorMode: (mode: ColorMode) => void;
} | undefined>(undefined);

export const ColorModeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');

  useEffect(() => {
    const className = 'dark';
    const bodyClass = window.document.body.classList;
    colorMode === 'dark'
      ? bodyClass.add(className)
      : bodyClass.remove(className);
  }, [colorMode]);

  return (
    <ColorModeContext.Provider value={{ colorMode, setColorMode }}>
      {children}
    </ColorModeContext.Provider>
  );
};

export const useColorMode = () => {
  const context = useContext(ColorModeContext);
  if (!context) {
    throw new Error('useColorMode must be used within a ColorModeProvider');
  }
  return context;
};

Root.tsx Just create another wrapper around App.tsx, so you could use useColorMode inside of App.tsx. The alternative is to define useLocalStorage stuff inside of App.tsx and pass it to the provider instead of defining it inside of ColorModeContext.

return (
  <ColorModeProvider>
    <App />
  </ColorModeProvider>
);

return (
  <ColorModeProvider>
    <App />
  </ColorModeProvider>
);

The DarkModeSwitcher.tsx should stay the same and work. I didn't test this code so there might be little mistakes, but the logic should work.

24 replies

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

Also, if it doesn't export any jsx components, useColorMode should be preferably a .ts file instead of .tsx. I'll write more detailed response about the hook now.

24 replies

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

Hey, each hook instance has it's own state unless they are using same one via e.g. context. The useColorMode hook state in DarkModeSwitcher.tsx is not the same one used in App.tsx

24 replies

WWasp

•Created by Gwain on 4/28/2025 in #🙋questions

Github actions error with wasp in /app

Hey, @Gwain. Just to make sure you followed steps on here: https://github.com/wasp-lang/deploy-action/blob/main/README.md The app needs to be launched locally at least once. From what I can see in: https://github.com/wasp-lang/deploy-action/blob/main/action.yml There is no working-directory or node-version input. That means there is no benefit to passing those to the action. Instead use it on job/step level or do something like @genyus suggested.

- name: Deploy to Fly via Wasp
  working-directory: ./app
  uses: wasp-lang/deploy-action@main
  with:
    fly-token: ${{ secrets.FLY_TOKEN }}

- name: Deploy to Fly via Wasp
  working-directory: ./app
  uses: wasp-lang/deploy-action@main
  with:
    fly-token: ${{ secrets.FLY_TOKEN }}

The last error message seems like node version mismatch error to me. I know we check for node version, so that confuses me a bit. Are you sure the CLI uses node 20?

17 replies

WWasp

•Created by mb23 on 4/28/2025 in #🙋questions

Users get logged out automatically

Glad its sorted out.

7 replies

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

If the issue still persists do tell me.

24 replies

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

From what I can see useColorMode is used in Charka, do correct me if im wrong. In that case for your Root.tsx file you would have:

import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider>{children}</ColorModeProvider>
    </ChakraProvider>
  )
}

import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider>{children}</ColorModeProvider>
    </ChakraProvider>
  )
}

but also make sure that root component is linked in the wasp.config

app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.tsx",
  }
}

app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.tsx",
  }
}

24 replies

WWasp

•Created by Dada on 4/28/2025 in #🙋questions

useColorMode hook

Hey @Dada, what UI library are you using? The kapa.ai gave a good hint. Global application providers should go inside of the root component. This is so that their state isn't re-initialized each time you navigate to a different page.

24 replies

WWasp

•Created by Kynetix on 4/24/2025 in #🙋questions

Call custom api externally

Great. Glad we got it.

39 replies

WWasp

•Created by Kofi_anan on 4/28/2025 in #🙋questions

Service accounts for authenticated calls

Glad you've found a solution which works.

8 replies

WWasp

•Created by Kofi_anan on 4/28/2025 in #🙋questions

Service accounts for authenticated calls

Hi @Kofi_anan, could you perhaps extract the queries as separate constants/functions and then use them in both the operations and jobs? The operations would check that user exists while the jobs wont. If you gave a bit more context I could help more.

8 replies

WWasp

•Created by mb23 on 4/28/2025 in #🙋questions

If the verification email goes to spam, how can I verify a user manually? (I'm using OpenSaaS)

@mb23

9 replies

WWasp

•Created by mb23 on 4/28/2025 in #🙋questions

If the verification email goes to spam, how can I verify a user manually? (I'm using OpenSaaS)

9 replies

WWasp

•Created by mb23 on 4/28/2025 in #🙋questions

If the verification email goes to spam, how can I verify a user manually? (I'm using OpenSaaS)

Hey, @mb23. It's possible to connect to your database directly through a postgres clients like pgAdmin, DBeaver and similar. In there you would look for that user's email provider and change the email verification flag to true. Do you need any additional instructions?

9 replies

WWasp

•Created by Webby Vanderhack on 4/4/2025 in #🙋questions

Is it possible to dynamically import a static client asset from the server?

There is also this old thread which discussed it a bit: https://discord.com/channels/686873244791210014/1171780998699171841

18 replies

WWasp

•Created by Webby Vanderhack on 4/4/2025 in #🙋questions

Is it possible to dynamically import a static client asset from the server?

If you want to keep your instructions server side, another workaround might be to hold instructions inside of template strings in typescript/javascript. That way they will be compiled with rest of the project. E.g. instructions.ts

export const GLOBAL_SYSTEM_PROMPT = `You are an professional blog post writer...`

export const GLOBAL_SYSTEM_PROMPT = `You are an professional blog post writer...`

18 replies

WWasp

•Created by Cam Pak on 4/26/2025 in #🙋questions

Didn't do anything new. My app broke, and it's hard to determine why auth isn't working anymore

Glad to see it's solved. Do report if it happens again, maybe there is something we can improve on our end to handle such cases.

9 replies

WWasp

•Created by Glide Orchestra on 4/26/2025 in #🙋questions

Preventing wasp server recompiling when new files created in /public

Hey @Glide Orchestra, that is indeed a bit annoying to develop with. Good thing is that this won't happen in production, this is development only feature. I think .waspignore is used to stop copying files to builds, so I don't think it will help here. I'll call @Filip to help as he is much more up to date with compiler behavior.

16 replies

Gaming

Programming