Grahf Posts - Answer Overflow

Topics

Grahf

•Created by Grahf on 2/22/2024 in #support

stop screen flicker from createResource refetch?

I'm refetching from a database every three seconds to display the most up to date values from a database without having to refresh the page.

  const [fetchedOnline, { refetch }] = createResource(
    () => [selectedZone(), selectedJob()],
    fetchOnline,
  )

  const timer = setInterval(() => {
    refetch()
  }, 3000)

  onCleanup(() => clearInterval(timer))

  const [fetchedOnline, { refetch }] = createResource(
    () => [selectedZone(), selectedJob()],
    fetchOnline,
  )

  const timer = setInterval(() => {
    refetch()
  }, 3000)

  onCleanup(() => clearInterval(timer))

Every time it updates, every three seconds, my screen flickers and shows some fallbacks from Shows for a brief second. I'd like for it to just show the old values until it gets the new ones... I'm playing with fetchedOnline.ready, fetchedOnline.loading, etc but not having any luck

11 replies

•Created by Grahf on 2/8/2024 in #support

no luck with context providers

~hello... I'm trying to use a context provider in a tauri app(maybe you're familiar with it?) and it's not working. The last time I tried to use a solidJS context provider was in a astroJS app. I seem to be getting the exact same behavior here IIRC. It gets the initial values from the createContext and that's it... I can't seem to get the signals in the provider to update. I made a stack blitz that's very similar to what I'm trying to do and it works fine. Not sure why it doesn't work in my app. https://stackblitz.com/edit/solid-app-gn3dpd?file=src%2Findex.jsx,src%2FApp.jsx,src%2FProvider.jsx,src%2FHelloWorld.jsx

11 replies

•Created by Grahf on 1/10/2024 in #support

Context Provider only getting default values - can't update

I'm trying to use a context provider in an astro app which is in a tauri app. While I'd normally wrap the <App /> component in the providers I don't have that option here so I'm wrapping individual components like this:

  <AdventurerNameProvider client:load>
    <AdventurerDetails client:load />
  </AdventurerNameProvider>

  <AdventurerNameProvider client:load>
    <AdventurerDetails client:load />
  </AdventurerNameProvider>

Then I feel like my context provider is pretty standard?

import { createContext, useContext, createSignal, createEffect } from 'solid-js'

export const AdventurerNameContext = createContext(['default value', () => {    console.log('AHHHHH')
}])

export const AdventurerNameProvider = (props) => {
  const [adventurersName, setAdventurersName] = createSignal('dfdsdsf')

  createEffect(() => {
    console.log('a test: ', adventurersName())
  })

  return (
    <AdventurerNameContext.Provider
      value={[adventurersName, setAdventurersName]}
    >
      {props.children}
    </AdventurerNameContext.Provider>
  )
}

export const createAdventurersName = () => {
  const newAdventurersName = useContext(AdventurerNameContext)[0]
  return newAdventurersName
}

export const createSetAdventurersName = () => {
  const newSetAdventurersName = useContext(AdventurerNameContext)[1]
  return newSetAdventurersName
}

import { createContext, useContext, createSignal, createEffect } from 'solid-js'

export const AdventurerNameContext = createContext(['default value', () => {    console.log('AHHHHH')
}])

export const AdventurerNameProvider = (props) => {
  const [adventurersName, setAdventurersName] = createSignal('dfdsdsf')

  createEffect(() => {
    console.log('a test: ', adventurersName())
  })

  return (
    <AdventurerNameContext.Provider
      value={[adventurersName, setAdventurersName]}
    >
      {props.children}
    </AdventurerNameContext.Provider>
  )
}

export const createAdventurersName = () => {
  const newAdventurersName = useContext(AdventurerNameContext)[0]
  return newAdventurersName
}

export const createSetAdventurersName = () => {
  const newSetAdventurersName = useContext(AdventurerNameContext)[1]
  return newSetAdventurersName
}

When I import createAdventurersName into another JSX component it will display "default value". When I import createSetAdventurersName into a JSX component is console.log AHHHHH

10 replies

•Created by Grahf on 12/8/2023 in #support

Felte Form server error handling

No description

19 replies

•Created by Grahf on 11/23/2023 in #support

__vite_ssr_import_1__.template is not a function

I get the error in the topic when I add this import: import { reporter, ValidationMessage } from '@felte/reporter-solid' Obviously I'm using felt forms and it works fine until I add that import. I should also note that I'm using solidJS in astroJS islands. I did run npm i -S @felte/reporter-solid

2 replies

•Created by Grahf on 11/18/2023 in #support

solidJS equivalent of react's cloneElement

I'm trying to convert a react component that uses cloneElement to a solidJS component. I've briefly glanced at some of the messages on discord concerning cloneElement and I haven't seen anything definitive. lxsmnsyc mentioned using solid-headless. Original react code:

import React from 'react';
import T from 'prop-types';

import allowed from '../utils/allowed';

function Thead(props) {
  const { children } = props;

  return (
    <thead data-testid="thead" {...allowed(props)}>
      {React.cloneElement(children, { inHeader: true })}
    </thead>
  );
}

Thead.propTypes = {
  children: T.node,
};

Thead.defaultProps = {
  children: undefined,
};

export default Thead;

import React from 'react';
import T from 'prop-types';

import allowed from '../utils/allowed';

function Thead(props) {
  const { children } = props;

  return (
    <thead data-testid="thead" {...allowed(props)}>
      {React.cloneElement(children, { inHeader: true })}
    </thead>
  );
}

Thead.propTypes = {
  children: T.node,
};

Thead.defaultProps = {
  children: undefined,
};

export default Thead;

This is as far as I got with my solidJS conversion:

import allowed from '../utils/allowed'

export const Thead = (props: any) => {

  return (
    <thead data-testid='thead' {...allowed(props)}>
      {React.cloneElement(props.children, { inHeader: true })}
    </thead>
  )
}

import allowed from '../utils/allowed'

export const Thead = (props: any) => {

  return (
    <thead data-testid='thead' {...allowed(props)}>
      {React.cloneElement(props.children, { inHeader: true })}
    </thead>
  )
}

This is what chatGPT recommended:

 
   <thead data-testid="thead" {...allowed(props)}>
      {props.children && typeof props.children === 'function' ? children({ inHeader: inHeader() }) : null}
    </thead>

 
   <thead data-testid="thead" {...allowed(props)}>
      {props.children && typeof props.children === 'function' ? children({ inHeader: inHeader() }) : null}
    </thead>

11 replies

•Created by Grahf on 9/13/2023 in #support

404 for dynamic routes

1 replies

•Created by Grahf on 8/31/2023 in #support

For loop in route breaks when form in another component is submitted

No description

12 replies

•Created by Grahf on 8/23/2023 in #support

Protected route dynamic route that has to match certain parameter

I have a dynamic route for a user. The file route looks like this: routes/(home)/user/[user]/(user).jsx It's protected so you can only navigate it to when logged in. BUT.... since it's a dynamic route you can go to like: http://localhost:3000/user/kdjfhdjkf and it will load the same page as http://localhost:3000/user/grahf I think I'd like the page to load if and only if the parameter mathes the current logged in users name. In the (user).jsx component should I just check if the logged in username equals the parameter? If it doesn't then redirect to '/'?

2 replies

•Created by Grahf on 8/3/2023 in #support

Navigate then scroll

Sorry about the super accurate title This code is for an onClick event. Well, this is one version of it..... I've tried a lot of things. It's just supposed to find the right thing to scroll to and then scroll to it. It acts strangely if the if block at the beginning is executed(if the if block is skipped the code works fine). The if blocks navigates to a new page which in turn updates the paragraphRefs used here.
The problem is that it will either not scroll or scroll to the wrong element (depending on which version of my code im using). But then if I click the same button it's attached to a second time it scrolls to the right element. I've tried to use a signal and a memo for matchingRef. Using a timeOut of 1000(1 second) after the if block seemed to work but I didn't test it that much.

  const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    const matchingRef = () =>
      paragraphRefs().find((ref) => ref.id() === para.paragraphId)

    createEffect(() => {
      matchingRef()?.ref.scrollIntoView({ behavior: 'smooth' })
    })

    /* setMatchingRef( */
    /*   paragraphRefs().find((ref) => ref.id() === para.paragraphId), */
    /* ) */
  }

  const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    const matchingRef = () =>
      paragraphRefs().find((ref) => ref.id() === para.paragraphId)

    createEffect(() => {
      matchingRef()?.ref.scrollIntoView({ behavior: 'smooth' })
    })

    /* setMatchingRef( */
    /*   paragraphRefs().find((ref) => ref.id() === para.paragraphId), */
    /* ) */
  }

7 replies

•Created by Grahf on 7/25/2023 in #support

warnings when passing onClick as prop

I get a warning in the child component when I pass an event handler from the parent. In the parent it looks like this:

                onSeeAlsoClick={[handleShowSeeAlso, index()]}

                onSeeAlsoClick={[handleShowSeeAlso, index()]}

And in the child:

<button
        onClick={props.onSeeAlsoClick}

<button
        onClick={props.onSeeAlsoClick}

Warning: The reactive variable 'props.onSeeAlsoClick' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props. But when I change it to

<button
        onClick={() => props.onSeeAlsoClick()}

<button
        onClick={() => props.onSeeAlsoClick()}

it stops working

4 replies

•Created by Grahf on 7/17/2023 in #support

Replace part of string with a component

I found this for react: https://github.com/iansinnott/react-string-replace It seems to be able to replace a part of a string with the results of a component? That's what it looks like to me. I haven't used it.
Just wondering if anyone has done anything similar with solidJS. It's probably pretty niche.

28 replies

•Created by Grahf on 7/4/2023 in #support

Nested For Loop?

Quick Version: Every time a For loop runs I'd like for one item to be displayed from the first set of data and one item from the second set of data. I have a For loop that creates a list of items fetched from a database. The stuff from the database is fed to a component in the For loop and each item in the list is the result of the component. OK! I have another list of items fetched from a database. Each time an item from the first data set is created in the For loop I'd like to create an item from the second data set using the same component in the For loop. I feel like I'm just thinking about this wrong.

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

10 replies

•Created by Grahf on 6/22/2023 in #support

Navigate then perform action

This function is an event handler for a bunch of buttons. It's prop(para) is different for each button. It navigates to a different url. Each URL it navigates to loads the same components with different data based on the params, which change each time the button is pressed. When that component loads it sets an array from a provider with 100s of refs. After the new URL has been navigated to and the refs have loaded I would very much like to .scrollIntoView() to that ref. SO I set a timeOut around all of that....to make sure the component has loaded and the refs are all in the provider. Problem: Which ever button I click first, it works. Sometimes the second click works. But more often than not the scrollIntoView stops works after the second or third button click. The navigate always works(it always goes to the new url). No error messages. I am console logging matchingRef and it's always right. Not sure why scrollIntoView stops working eventually. Not sure if there's just a better way to do this 🙂

  const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    setTimeout(() => {
      const matchingRef = paragraphRefs().find(
        (ref) => ref.id() === para.paragraphId
      )
      matchingRef.ref.scrollIntoView()
    }, 750)
  }

  const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    setTimeout(() => {
      const matchingRef = paragraphRefs().find(
        (ref) => ref.id() === para.paragraphId
      )
      matchingRef.ref.scrollIntoView()
    }, 750)
  }

15 replies

•Created by Grahf on 6/19/2023 in #support

Only able to get one value from multiple checkboxes that are checked

In my form, I'm only able to get the value of one checkbox that's checked, even if I check multiple check boxes. I have a form setup that successfully gets values from inputs. Some of the inputs are checkboxex that I make like this:

<fieldset>
        <legend>Choose Stuff to Search</legend>
        <For each={signal()} fallback={<div>Loading Stuff...</div>}>
          {(item) => (
            <div>
              <input
                type='checkbox'
                id={item}
                name='check-select'
                value={item}
              />
              <label for={item}>{item}</label>
            </div>
          )}
        </For>
      </fieldset>

<fieldset>
        <legend>Choose Stuff to Search</legend>
        <For each={signal()} fallback={<div>Loading Stuff...</div>}>
          {(item) => (
            <div>
              <input
                type='checkbox'
                id={item}
                name='check-select'
                value={item}
              />
              <label for={item}>{item}</label>
            </div>
          )}
        </For>
      </fieldset>

And that makes a bunch of check boxes I can check/uncheck.
In my form I can only seem to get the value of one of the checkboxes.

  
const [submitting, { Form }] = createServerAction$(async (form) => {

    const selections = form.get('check-select')

    console.log('what is this?: ', form.get('check-select'))

    return await getSearch(selections)
  })

  
const [submitting, { Form }] = createServerAction$(async (form) => {

    const selections = form.get('check-select')

    console.log('what is this?: ', form.get('check-select'))

    return await getSearch(selections)
  })

I was expecting an object or array to come back but I'm just getting a string from the form.get('check-select') Do I need to give each checkbox a unique name and do a form.get for each checkbox?

9 replies

•Created by Grahf on 6/14/2023 in #support

Deployment Failure on Netlify

Not sure if the problem is with the lockfile or the pnpm version? 2:37:15 PM: Found pnpm version (7.13.4) that doesn't match expected () Usage Error: Invalid package manager specification in CLI arguments; expected a semver version, range, or tag 2:37:15 PM: $ corepack prepare [--activate] [--all] [--json] [-o,--output] ... 2:37:15 PM: No pnpm workspaces detected 2:37:15 PM: Started restoring cached node modules 2:37:15 PM: Finished restoring cached node modules 2:37:15 PM: Installing npm packages using pnpm version 7.13.4 2:37:15 PM: Lockfile is up to date, resolution step is skipped 2:37:15 PM: ERR_PNPM_OUTDATED_LOCKFILE Cannot install with frozen-lockfile because pnpm-lock.yaml is not up to date with package.json 2:37:15 PM: Note that in CI environments this setting is true by default. If you still need to run install in such cases, use pnpm install --no-frozen-lockfile 2:37:15 PM: Error during pnpm install 2:37:15 PM: Build was terminated: dependency_installation script returned non-zero exit code: 1 2:37:15 PM: Failing build: Failed to install dependencies

7 replies

•Created by Grahf on 6/9/2023 in #support

I don't like refs

Not really a solidJS question but there are smart people here. If there's a rule against this I will remove this post. I am storing a bunch of refs in an array like this: <p ref={(el) => setRefs((p) => [...p, el])} .....> Stuff From Database </p> The resulting array of refs have worked fine for what I've used them for so far. Each <p> element is the result of a value pulled from a database. But what I just implemented is the ability to search the database and get back a subset of the <p> elements. The goal is to be able to click on each item in the subset that's returned from the search and .scrollIntoView the corresponding <p> element in the main page. If I was doing this with ids I would just give each <p> element an id of the primary key from the database. When the user searches each of their search results will also have the primary key from the database and I could just getElementById the element with the id of what the user clicked on and .scrollIntoView to it. That's how I imagine it in my head. Not sure how do to that with a ref. I could check the textContent of each ref in the array of refs and see if it matches the textContent of what the user clicked on and then scrollIntoView that ref?

7 replies

•Created by Grahf on 5/27/2023 in #support

Solid Transition with createServerData$

Is there a way to get Solid Transition (https://docs.solidjs.com/guides/how-to-guides/animations-in-solid/solid-transition-group) to work with showing data that's fetched using createServerData$? I get no animation when I try to use solid transition on a component that uses createServerData$. I get animations when I use solid transition of arrays like this one: const test = ['123', 'abc'] so I'm pretty sure the reason there is no animation is because of createServerData$. Actually it shows the animation when the component is closed but not when it's opened.

3 replies

•Created by Grahf on 5/8/2023 in #support

MotionOne with solidStart

I was trying to experiment with using MotionOne with SolidStart. I installed it. Used this code:

import { Motion } from 'motion/solid'

export default function Home() {
  return (
    <Motion>
      <h1 class='h-full w-full text-textColor'>Main Page</h1>
    </Motion>
  )
}

import { Motion } from 'motion/solid'

export default function Home() {
  return (
    <Motion>
      <h1 class='h-full w-full text-textColor'>Main Page</h1>
    </Motion>
  )
}

and got

Failed to load url motion/solid (resolved id: motion/solid) in /home/grahf/code play/solid-start/src/routes/(home)/index.jsx. Does the file exist?

and Error when evaluating SSR module /src/routes/(home)/index.jsx: failed to import "motion/solid"

3 replies

•Created by Grahf on 5/8/2023 in #support

route.outlet is not a function

4 replies