jrainearwills Posts - Answer Overflow

jrainearwills

Explore posts from servers

•Created by jrainearwills on 10/25/2024 in #support

`createResource` for Create and Update Requests?

I'm using createResource to fetch data displayed in a form. When a user modifies the form I want to update the resource using a PUT HTTP request. If I want to trigger Suspense, then should I wrap the PUT in another createResource call?

3 replies

SSolidJS

•Created by jrainearwills on 10/13/2024 in #support

`createContext`, What's the point?

In SolidJS, It looks like I can create a store in a JS module, then import the state and setters to any component in my app. That said, is there an advantage to using a context or is it there for convenience? This works like as far as I can tell:

// store.ts
export const [appState, setAppState] = createStore({globalValue: "I'm alive!"});

// App.tsx
import {appState} from './store.ts'

export default function App(){
    return (
        <h1>{appState.globalValue}</h1>
    )
}

// store.ts
export const [appState, setAppState] = createStore({globalValue: "I'm alive!"});

// App.tsx
import {appState} from './store.ts'

export default function App(){
    return (
        <h1>{appState.globalValue}</h1>
    )
}

5 replies

SSolidJS

•Created by jrainearwills on 9/17/2024 in #support

Client Only - Local Storage

I created a global store that's backed by window.localstorage. I don't think that I can use clientOnly because the module doesn't export an Element. What do I do?

import { createEffect } from "solid-js";
import { createStore } from "solid-js/store";

interface AppState {
    accessToken?: string;
    itemId?: string;
}

const pair = window.localStorage.getItem("item");
const [itemId, accessToken] = pair?.split("|") || [];

export const [appState, setAppState] = createStore<AppState>({
    itemId,
    accessToken
})

createEffect(() => {
    if (appState.itemId && appState.accessToken) {
        const value = `${appState.itemId}|${appState.accessToken}`;
        window.localStorage.setItem("item", value);
    } else {
        window.localStorage.removeItem("item");
    }
})

import { createEffect } from "solid-js";
import { createStore } from "solid-js/store";

interface AppState {
    accessToken?: string;
    itemId?: string;
}

const pair = window.localStorage.getItem("item");
const [itemId, accessToken] = pair?.split("|") || [];

export const [appState, setAppState] = createStore<AppState>({
    itemId,
    accessToken
})

createEffect(() => {
    if (appState.itemId && appState.accessToken) {
        const value = `${appState.itemId}|${appState.accessToken}`;
        window.localStorage.setItem("item", value);
    } else {
        window.localStorage.removeItem("item");
    }
})

7 replies

SSolidJS

•Created by jrainearwills on 9/16/2024 in #support

Custom Accordion - Not Consistant

I wrote a custom Accordion. If I render a single accordion, then I can click on it and it expands as expected ever time. However, if I render multiple Accordions in a for loop, then I can click on the Accordions in the list and sometimes they do nothing. After clicking on them a few times they finally expand.

import { createSignal, onCleanup } from "solid-js";
import { Paper, Box, IconButton } from "@suid/material";
import KeyboardArrowDownIcon from "@suid/icons-material/KeyboardArrowDown"; 
import { JSX } from "solid-js";

export interface AccordionProps {
  header: JSX.Element;
  content: JSX.Element;
}

export default function Accordion(props: AccordionProps) {
  const [expanded, setExpanded] = createSignal(false);

  let contentRef!: HTMLDivElement;

  const handleToggle = () => {
    setExpanded(!expanded());
  };

  return (
    <Paper elevation={3} sx={{ p: 1 }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          cursor: "pointer",
        }}
        onClick={handleToggle}
      >
        {props.header}
        <IconButton color="primary" size="small">
          <KeyboardArrowDownIcon
            sx={{
              transition: "transform 0.3s ease",
              transform: expanded() ? "rotate(180deg)" : "rotate(0deg)",
            }}
          />
        </IconButton>
      </Box>
      <Box
        ref={contentRef}
        sx={{
          overflow: "hidden",
          transition: "max-height 0.3s ease",
          maxHeight: expanded() ? `${contentRef.scrollHeight}px` : "0px",
        }}
      >
        <Box sx={{ p: 2 }}>{props.content}</Box>
      </Box>
    </Paper>
  );
}

import { createSignal, onCleanup } from "solid-js";
import { Paper, Box, IconButton } from "@suid/material";
import KeyboardArrowDownIcon from "@suid/icons-material/KeyboardArrowDown"; 
import { JSX } from "solid-js";

export interface AccordionProps {
  header: JSX.Element;
  content: JSX.Element;
}

export default function Accordion(props: AccordionProps) {
  const [expanded, setExpanded] = createSignal(false);

  let contentRef!: HTMLDivElement;

  const handleToggle = () => {
    setExpanded(!expanded());
  };

  return (
    <Paper elevation={3} sx={{ p: 1 }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          cursor: "pointer",
        }}
        onClick={handleToggle}
      >
        {props.header}
        <IconButton color="primary" size="small">
          <KeyboardArrowDownIcon
            sx={{
              transition: "transform 0.3s ease",
              transform: expanded() ? "rotate(180deg)" : "rotate(0deg)",
            }}
          />
        </IconButton>
      </Box>
      <Box
        ref={contentRef}
        sx={{
          overflow: "hidden",
          transition: "max-height 0.3s ease",
          maxHeight: expanded() ? `${contentRef.scrollHeight}px` : "0px",
        }}
      >
        <Box sx={{ p: 2 }}>{props.content}</Box>
      </Box>
    </Paper>
  );
}

3 replies

SSolidJS

•Created by jrainearwills on 9/15/2024 in #support

SolidStart - Server Only

I see a way to ensure functions only run on a server, but what about modules that declare classes? I guess that I need to use a factory function instead? https://docs.solidjs.com/solid-start/reference/server/use-server

11 replies

Gaming

Programming