Sem Comments - Answer Overflow

export function routeData() {
  const projects = createLocalProjectStore();
  return projects;
}

function createProject() {
  const [projects, setProjects] = useRouteData<typeof routeData>();
  setProjects((projects) => [
    ...projects,
    {
      id: Math.random().toString(36).slice(2, 9),
      name: "New Project",
      dateCreated: Date.now(),
      dateModified: Date.now(),
    },
  ]);
}

function NoProjects() {
  return (
   ...
  );
}

export default function ProjectList() {
  const [projects, setProjects] = useRouteData<typeof routeData>();
  const dateFormat = d3.utcFormat("%d/%m/%Y %H:%M");
  const data = useRouteData();
  return (
   ...
  );
}

export function routeData() {
  const projects = createLocalProjectStore();
  return projects;
}

function createProject() {
  const [projects, setProjects] = useRouteData<typeof routeData>();
  setProjects((projects) => [
    ...projects,
    {
      id: Math.random().toString(36).slice(2, 9),
      name: "New Project",
      dateCreated: Date.now(),
      dateModified: Date.now(),
    },
  ]);
}

function NoProjects() {
  return (
   ...
  );
}

export default function ProjectList() {
  const [projects, setProjects] = useRouteData<typeof routeData>();
  const dateFormat = d3.utcFormat("%d/%m/%Y %H:%M");
  const data = useRouteData();
  return (
   ...
  );
}

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

Finally - figured out that I should use useRouteData correct. Docs helped

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

And the route where I'm using it:

const [projects, setProjects] = createLocalProjectStore();

function createProject() {
  setProjects((projects) => [
    ...projects,
    {
      id: Math.random().toString(36).slice(2, 9),
      name: "New Project",
      dateCreated: Date.now(),
      dateModified: Date.now(),
    },
  ]);
}

function NoProjects() {
  return (
    <Flex direction="column" class="center w-full">
      <h2>Looks like there is no projects yet</h2>
      <Button onclick={createProject}>Let's create one!</Button>
    </Flex>
  );
}

export default function ProjectList() {
  const dateFormat = d3.utcFormat("%d/%m/%Y %H:%M");
  return (
    <>
      <Show when={projects.length < 1}>
        <NoProjects />
      </Show>
      <Show when={projects.length > 0}>
        <Flex class="w-full" direction="column">
          <Button onclick={createProject} type="primary" class="m-xxs mr-auto">
            Create new project
          </Button>
          <Flex direction="column" class="p-xxs w-full" gap="xs">
            <For each={projects}>
              {(project) => (
                <Button
                  href={`/p/${project.id}`}
                  type="transparent"
                  class="w-full"
                >
                  <Flex class="w-full" gap="xl">
                    <p>{project.name}</p>
                    <p class="ml-auto">
                      {dateFormat(new Date(project.dateModified))}
                    </p>
                  </Flex>
                </Button>
              )}
            </For>
          </Flex>
        </Flex>
      </Show>
    </>
  );
}

const [projects, setProjects] = createLocalProjectStore();

function createProject() {
  setProjects((projects) => [
    ...projects,
    {
      id: Math.random().toString(36).slice(2, 9),
      name: "New Project",
      dateCreated: Date.now(),
      dateModified: Date.now(),
    },
  ]);
}

function NoProjects() {
  return (
    <Flex direction="column" class="center w-full">
      <h2>Looks like there is no projects yet</h2>
      <Button onclick={createProject}>Let's create one!</Button>
    </Flex>
  );
}

export default function ProjectList() {
  const dateFormat = d3.utcFormat("%d/%m/%Y %H:%M");
  return (
    <>
      <Show when={projects.length < 1}>
        <NoProjects />
      </Show>
      <Show when={projects.length > 0}>
        <Flex class="w-full" direction="column">
          <Button onclick={createProject} type="primary" class="m-xxs mr-auto">
            Create new project
          </Button>
          <Flex direction="column" class="p-xxs w-full" gap="xs">
            <For each={projects}>
              {(project) => (
                <Button
                  href={`/p/${project.id}`}
                  type="transparent"
                  class="w-full"
                >
                  <Flex class="w-full" gap="xl">
                    <p>{project.name}</p>
                    <p class="ml-auto">
                      {dateFormat(new Date(project.dateModified))}
                    </p>
                  </Flex>
                </Button>
              )}
            </For>
          </Flex>
        </Flex>
      </Show>
    </>
  );
}

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

So this is not a solution

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

I changed it like this:

export function createLocalProjectStore() {
  if (isServer) {
    return [[], ()=>{}] as const
  }
  
  const [projects, setProjects] = createStore<LocalStoreProject[]>([]);
  const [isInit, setIsInit] = createSignal(true);

  if (!isServer) {
    onMount(() => {
      const localState = localStorage.getItem("projects") || "[]";

      setProjects(JSON.parse(localState));
      setIsInit(false);
    });
    createEffect(() => {
      if (isServer || isInit()) return;
      localStorage.setItem("projects", JSON.stringify(projects));
    });
  }

  return [projects, setProjects, isInit] as const;
}

export function createLocalProjectStore() {
  if (isServer) {
    return [[], ()=>{}] as const
  }
  
  const [projects, setProjects] = createStore<LocalStoreProject[]>([]);
  const [isInit, setIsInit] = createSignal(true);

  if (!isServer) {
    onMount(() => {
      const localState = localStorage.getItem("projects") || "[]";

      setProjects(JSON.parse(localState));
      setIsInit(false);
    });
    createEffect(() => {
      if (isServer || isInit()) return;
      localStorage.setItem("projects", JSON.stringify(projects));
    });
  }

  return [projects, setProjects, isInit] as const;
}

and start receive hydration errors

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

Not even onMount help with it

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

Without timeout clientslide renders more items than serverside and hydration error appears

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

That's the only way I handle it works

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

That's all code you need to reproduce this functionality. Here is my current build:

export function createLocalProjectStore() {
  const [projects, setProjects] = createStore<LocalStoreProject[]>([]);
  const [isInit, setIsInit] = createSignal(true);

  if (!isServer) {
    onMount(() => {
      setTimeout(() => {
        const localState = localStorage.getItem("projects") || "[]";

        setProjects(JSON.parse(localState));
        setIsInit(false);
      });
    });
    createEffect(() => {
      if (isServer || isInit()) return;
      localStorage.setItem("projects", JSON.stringify(projects));
    });
  }

  return [projects, setProjects, isInit] as const;
}

export function createLocalProjectStore() {
  const [projects, setProjects] = createStore<LocalStoreProject[]>([]);
  const [isInit, setIsInit] = createSignal(true);

  if (!isServer) {
    onMount(() => {
      setTimeout(() => {
        const localState = localStorage.getItem("projects") || "[]";

        setProjects(JSON.parse(localState));
        setIsInit(false);
      });
    });
    createEffect(() => {
      if (isServer || isInit()) return;
      localStorage.setItem("projects", JSON.stringify(projects));
    });
  }

  return [projects, setProjects, isInit] as const;
}

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

Such way worked for me

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

For now best and working way is to wrap content in onMount in setTimeout

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

tried. Not solves an issue

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

The only way I make it works is to setTimeout for getting items from localstorage, to make items synchronized between each one. But it looks like a very tricky approach to this situation and I'm sure there is more appropriate way to do this kind of stuff

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

Maybe there is some way to mark only one route not to use SSR?

19 replies

SSolidJS

•Created by Sem on 11/9/2023 in #support

How to handle hydration on client side?

That's how my hook looks like:

export function createLocalProjectStore() {
  const [projects, setProjects] = createStore<LocalStoreProject[]>([]);
  onMount(() => {
    if (isServer) return;
    const localState = isServer
      ? "[]"
      : localStorage.getItem("projects") || "[]";

    console.log("sets", isServer, localState);
    setProjects(JSON.parse(localState));
  });

  createEffect(() => {
    if (isServer) return;
    localStorage.setItem("projects", JSON.stringify(projects));
  });

  return [projects, setProjects] as const;
}

export function createLocalProjectStore() {
  const [projects, setProjects] = createStore<LocalStoreProject[]>([]);
  onMount(() => {
    if (isServer) return;
    const localState = isServer
      ? "[]"
      : localStorage.getItem("projects") || "[]";

    console.log("sets", isServer, localState);
    setProjects(JSON.parse(localState));
  });

  createEffect(() => {
    if (isServer) return;
    localStorage.setItem("projects", JSON.stringify(projects));
  });

  return [projects, setProjects] as const;
}

19 replies

Gaming

Programming