jide

"use client";

import useInterval from "use-interval";
import { useRouter } from "next/navigation";

export function AutoReload({ delay = 1000 }) {
  const router = useRouter();

  useInterval(() => {
    router.refresh();

jide

"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import * as z from "zod";
import { useFormAction } from "@/lib/useFormAction";

export function PostForm() {

jide

import { useState, useLayoutEffect, useCallback } from "react";
import { flushSync } from "react-dom";

const useDynamicMinHeight = (ref) => {
  const [minHeight, setMinHeight] = useState(0);

  const updateMinHeight = useCallback(() => {
    if (ref.current) {
      flushSync(() => {
        setMinHeight(0);

jide

import React from 'react';
import { useAppState, useActions } from '~/overmind';

export default function Post() {
  const { post } = useAppState();
  const { myAction } = useActions();

  return (
    <div>
      <h1>{ post.title }</h1>

jide

import { derived } from 'overmind';

export const state = {
  loading: false,
  auth: {},
  router: {},
  post: null,
  isAuthenticated: derived(state => state.auth.token !== undefined)
};

jide

export const showPostPage = async ({ state, actions, effects }, params) => {
  if (!state.auth.token) {
    effects.router.open('/');
  }

  state.router = { page: 'post', params };

  await actions.loadPost({ id: params.id });
};

jide

export const onInitializeOvermind = ({ state, actions, effects }, instance) => {
  state.auth.token = effects.auth.getLocalStorageToken();

  effects.router.initialize({
    '/': actions.showLoginPage,
    '/:postId': actions.showPostPage
  });
}

jide

import page from 'page';

export const router = {
  initialize(routes) {
    Object.keys(routes).forEach(url => {
      page(url, ({ params }) => routes[url](params));
    });
    page.start();
  },
  open: url => page.show(url)

jide

• overmind/: Group overmind stuff
  • effects/: Side effects
    • router.js: Router side effect
    • gql.js: GraphQL side effect
  • actions.js: Actions, you may want to split them into logical groups
  • state.js: The state object
• index.js: Export state, actions, effects and hooks

jide

import { createOvermind } from 'overmind';
import {
  createStateHook,
  createActionsHook,
  createEffectsHook,
  createReactionHook
} from 'overmind-react';
import { state } from './state';
import * as actions from './actions';
import { gql } from './effects/gql';