AlberTenez Posts - Answer Overflow

AlberTenez

•Created by AlberTenez on 1/23/2024 in #support

How can I pass data from middleware to frontend on solid-start.

I have this middleware to validate a user accesstoken. And the response provides me the name of the user and the validity of the token. While I handle the redirects if valid or not from the middleware. I would like to use the user name in the app layout. How could I pass it down to the client? I can't find a nice solution for it.

export default createMiddleware({
  onRequest: [
    async (event) => {
      const { pathname } = new URL(event.request.url);
      const isProtectedLoggedOut = protectedPathsLogOut.some((protectedPath) =>
        pathname.startsWith(protectedPath),
      );
      const isProtectedLoggedIn = protectedPathsLogIn.some((protectedPath) =>
        pathname.startsWith(protectedPath),
      );
      const accessToken = getServerCookie('access-token', event);
      if (accessToken) {
        const response = await fetchApi<GetUser>('/users', 'get', undefined, {
          authorization: `Bearer ${accessToken}`,
        });

        if (!response.success) {
          deleteCookie(event, 'access-token');

          if (isProtectedLoggedOut) {
            return sendRedirect(event, '/account/login');
          }
        }

        if (response.success) {
          if (isProtectedLoggedIn) {
            return sendRedirect(event, '/account/private');
          }

          event.locals.user = response.data;
        }
      } else if (isProtectedLoggedOut) {
        return sendRedirect(event, '/account/login');
      }
    },
  ],
});

export default createMiddleware({
  onRequest: [
    async (event) => {
      const { pathname } = new URL(event.request.url);
      const isProtectedLoggedOut = protectedPathsLogOut.some((protectedPath) =>
        pathname.startsWith(protectedPath),
      );
      const isProtectedLoggedIn = protectedPathsLogIn.some((protectedPath) =>
        pathname.startsWith(protectedPath),
      );
      const accessToken = getServerCookie('access-token', event);
      if (accessToken) {
        const response = await fetchApi<GetUser>('/users', 'get', undefined, {
          authorization: `Bearer ${accessToken}`,
        });

        if (!response.success) {
          deleteCookie(event, 'access-token');

          if (isProtectedLoggedOut) {
            return sendRedirect(event, '/account/login');
          }
        }

        if (response.success) {
          if (isProtectedLoggedIn) {
            return sendRedirect(event, '/account/private');
          }

          event.locals.user = response.data;
        }
      } else if (isProtectedLoggedOut) {
        return sendRedirect(event, '/account/login');
      }
    },
  ],
});

The information I'm interested in lives in response.data: event.locals.user = response.data; Any help will be appreciated. Thanks!!!

3 replies

SSolidJS

•Created by AlberTenez on 1/18/2024 in #support

Unexpected behaviour on a shuffled hardcoded list with Solid Start

I'm currently experiencing a fascinating issue. Given the code:

import { type JSXElement, For, createSignal } from 'solid-js';

export function shuffle<T extends unknown[]>(array: T): T {
  let currentIndex = array.length,
    randomIndex;

  // While there remain elements to shuffle.
  while (currentIndex > 0) {
    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }

  return array;
}

export default function BeautifulPlaces(): JSXElement {
  const [places] = createSignal(
    shuffle([
      {
        name: 'Chengdu',
        image: '/images/chengdu.webp',
      },
      {
        name: 'Beijin',
        image: '/images/beijin.webp',
      },
      {
        name: 'Bamboo Forest',
        image: '/images/bamboo-forest.webp',
      },
      {
        name: 'Datong',
        image: '/images/datong.webp',
      },
    ]),
  );

  return (
    <div class="w-full overflow-x-auto xl:container mx-auto">
      <For each={places()}>
        {(place) => (
          <div
            style={{ 'background-image': `url('${place.image}')` }}
            class="min-w-[200px] h-64 flex items-end justify-center text-center text-text-light font-bold text-lg rounded-xl bg-cover bg-center"
          >
            <span class="block w-full bg-background-dark bg-opacity-70 rounded-b-xl">
              {place.name}
            </span>
          </div>
        )}
      </For>
    </div>
  );

import { type JSXElement, For, createSignal } from 'solid-js';

export function shuffle<T extends unknown[]>(array: T): T {
  let currentIndex = array.length,
    randomIndex;

  // While there remain elements to shuffle.
  while (currentIndex > 0) {
    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }

  return array;
}

export default function BeautifulPlaces(): JSXElement {
  const [places] = createSignal(
    shuffle([
      {
        name: 'Chengdu',
        image: '/images/chengdu.webp',
      },
      {
        name: 'Beijin',
        image: '/images/beijin.webp',
      },
      {
        name: 'Bamboo Forest',
        image: '/images/bamboo-forest.webp',
      },
      {
        name: 'Datong',
        image: '/images/datong.webp',
      },
    ]),
  );

  return (
    <div class="w-full overflow-x-auto xl:container mx-auto">
      <For each={places()}>
        {(place) => (
          <div
            style={{ 'background-image': `url('${place.image}')` }}
            class="min-w-[200px] h-64 flex items-end justify-center text-center text-text-light font-bold text-lg rounded-xl bg-cover bg-center"
          >
            <span class="block w-full bg-background-dark bg-opacity-70 rounded-b-xl">
              {place.name}
            </span>
          </div>
        )}
      </For>
    </div>
  );

When SSR is rendering the place.image + the place.name match. But when hydration on the client happens then the image and the name does not render correctly, seems like is updating the image but not the name, and I can't figure out why this is happening.

15 replies

SSolidJS

•Created by AlberTenez on 1/17/2024 in #support

What is the difference between Transition

import { Transition } from 'solid-js/types/reactive/signal'; and import { Transition } from "solid-transition-group" Is this library merged with the original repo or they are different stuff??

4 replies

Gaming

Programming