hnordt

import React from "react"
import { useLocation, useLoaderData, useFetcher } from "remix"

export default function useLoaderDataWithWindowFocusRefetching<LoaderData>() {
  const loaderData = useLoaderData<LoaderData>()
  const fetcher = useFetcher<LoaderData>()

  const location = useLocation()
  const pathnameRef = React.useRef(location.pathname)
  React.useEffect(() => {

hnordt

import React from "react"
import { useLocation, useNavigate } from "remix"

export default function useWindowFocusRefetching() {
  const location = useLocation()
  const navigate = useNavigate()

  const pathnameRef = React.useRef(location.pathname)

  React.useEffect(() => {

hnordt

// add to your tailwind.config.js

const plugin = require("tailwindcss/plugin")

const radixPlugin = plugin(({ addVariant }) => {
  const dataStates = [
    "open",
    "closed",
    "active",
    "inactive",

hnordt

Machine({
  id: "booking",
  context: {
    newsletterIndex: null,
    placementId: null,
    availabilityId: null,
    reservationId: null
  },
  type: "parallel",
  states: {

hnordt

Machine({
  id: "booking",
  context: {
    newsletterIndex: null,
    placementId: null,
    availabilityId: null,
  },
  type: "parallel",
  states: {
    booking: {

hnordt

Machine({
  id: 'booking',
  context: {
    placementId: null,
    availabilityId: null
  },
  initial: 'step1',
  states: {
    step1: {
      entry: "releaseReservation",

hnordt

Machine({
  id: 'app',
  context: {},
  initial: 'workouts',
  states: {
    workouts: {
      on: {
        NEW_WORKOUT: {
          target: "newWorkout"
        }

hnordt

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

hnordt

Machine({
  id: 'session',
  initial: 'restoring',
  states: {
    restoring: {
      initial: "loading",
      states: {
        loading: {
          invoke: {
            src: "restore",

hnordt

Machine({
  id: 'collections',
  initial: 'fetching',
  states: {
    fetching: {
      invoke: {
        src: "fetchCollections",
        onDone: "success",
        onError: "failure"
      }