edge-city

git clone https://pyrossh.dev/repos/edge-city.git

edge-city is a next level meta-framework for react that runs only on edge runtimes

ce83445f — pyrossh

fix example

Files changed (11) hide show

example/src/components/Todo/Todo.jsx +0 -71
example/src/pages/app.jsx +7 -2
example/src/pages/spectrum.css +1 -2
example/src/{components/Todo → pages/todos}/Todo.css +11 -0
example/src/pages/todos/Todo.jsx +73 -0
example/src/pages/todos/TodoList.jsx +22 -0
example/src/pages/todos/page.css +1 -1
example/src/pages/todos/page.jsx +19 -29
example/src/services/todos.service.js +13 -2
index.js +24 -23
renderPage.js +1 -1

example/src/components/Todo/Todo.jsx DELETED Viewed

@@ -1,71 +0,0 @@
-import { useState, useCallback } from "react";
-import "./Todo.css";
-const Todo = ({ item, updateMutation, deleteMutation }) => {
-  const [editing, setEditing] = useState(false);
-  const doSave = useCallback(() => {
-    if (!input.current) return;
-    setBusy(true);
-    save(item, input.current.value, item.completed);
-  }, [item]);
-  const cancelEdit = useCallback(() => {
-    if (!input.current) return;
-    setEditing(false);
-    input.current.value = item.text;
-  }, []);
-  const doDelete = useCallback(() => {
-    const yes = confirm("Are you sure you want to delete this item?");
-    if (!yes) return;
-    setBusy(true);
-    save(item, null, item.completed);
-  }, [item]);
-  const doSaveCompleted = useCallback(
-    (completed) => {
-      setBusy(true);
-      save(item, item.text, completed);
-    },
-    [item],
-  );
-  return (
-    <li className="todo">
-      {!editing && (
-        <>
-          <input type="checkbox" />
-          <div class="text">
-            <p>{item.text}</p>
-            <p className="timestamp">{item.createdAt}</p>
-          </div>
-          <button className="edit-button" title="Edit">
-            ✏️
-          </button>
-          <button class="delete-button" title="Delete">
-            🗑️
-          </button>
-        </>
-      )}
-      {editing && (
-        <>
-          <input class="border rounded w-full py-2 px-3 mr-4" defaultValue={item.text} />
-          <button
-            class="p-2 rounded mr-2 disabled:opacity-50"
-            title="Save"
-            onClick={doSave}
-            disabled={busy}
-          >
-            💾
-          </button>
-          <button
-            class="p-2 rounded disabled:opacity-50"
-            title="Cancel"
-            onClick={cancelEdit}
-            disabled={busy}
-          >
-            🚫
-          </button>
-        </>
-      )}
-    </li>
-  );
-};
-export default Todo;

example/src/pages/app.jsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { SSRProvider } from "react-aria";
 import Layout from "@/components/Layout/Layout";
 import "./normalize.css";
@@ -7,7 +8,11 @@ import "./app.css";
 export default function App({ children }) {
   return (
     <SSRProvider>
+      <Layout>
-      <Layout>{children}</Layout>
+        <Suspense fallback={<p>Loading...</p>}>
+          {children}
+        </Suspense>
+      </Layout>
     </SSRProvider>
   );
-}
+}

example/src/pages/spectrum.css CHANGED Viewed

@@ -373,9 +373,8 @@
   --focus-ring-color: slateblue;
   --invalid-color: var(--spectrum-global-color-red-600);
   display: flex;
-  flex-direction: column;
-  width: fit-content;
   flex: 1;
+  flex-direction: column;
   .react-aria-Input {
     margin: 0;

example/src/{components/Todo → pages/todos}/Todo.css RENAMED Viewed

@@ -16,6 +16,17 @@
     margin-left: 0.5rem;
   }
+  & form {
+    display: flex;
+    flex: 1;
+    & .text-input {
+      display: flex;
+      flex: 1;
+      margin-right: 0.5rem;
+    }
+  }
   & .timestamp {
     line-height: 2;
     opacity: 0.5;

example/src/pages/todos/Todo.jsx ADDED Viewed

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { TextField, Input } from "react-aria-components";
+import { useRpcCache, useMutation } from "edge-city";
+import { updateTodo, deleteTodo } from "@/services/todos.service";
+import "./Todo.css";
+const Todo = ({ item }) => {
+  const [editing, setEditing] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    reset,
+  } = useForm();
+  const { invalidate } = useRpcCache("todos");
+  const updateMutation = useMutation(async ({ text }) => {
+    await updateTodo({ id: item.id, text, completed: item.completed });
+    await invalidate();
+    setEditing(false);
+  });
+  const deleteMutation = useMutation(async (id) => {
+    await deleteTodo(id);
+    await invalidate();
+  });
+  return (
+    <li className="todo" style={{ opacity: deleteMutation.isMutating ? 0.5 : 1 }}>
+      {!editing && (
+        <>
+          <input type="checkbox" />
+          <div class="text">
+            <p>{item.text}</p>
+            <p className="timestamp">{item.createdAt}</p>
+          </div>
+          <button className="edit-button" title="Edit" onClick={() => setEditing(true)}>
+            ✏️
+          </button>
+          <button class="delete-button" title="Delete" onClick={() => deleteMutation.mutate(item.id)}>
+            🗑️
+          </button>
+        </>
+      )}
+      {editing && (
+        <form onSubmit={handleSubmit(updateMutation.mutate)}>
+          <TextField isRequired isReadOnly={updateMutation.isMutating}>
+            <Input {...register("text")} defaultValue={item.text} />
+            {/* {err?.text && <p>{err.text._errors[0]}</p>} */}
+          </TextField>
+          <button
+            type="submit"
+            className="edit-button"
+            title="Save"
+            disabled={updateMutation.isMutating}
+          >
+            💾
+          </button>
+          <button
+            className="delete-button"
+            title="Cancel"
+            onClick={() => {
+              reset({ text: item.text });
+              setEditing(false);
+            }}
+            disabled={updateMutation.isMutating}
+          >
+            🚫
+          </button>
+        </form>
+      )}
+    </li>
+  );
+};
+export default Todo;

example/src/pages/todos/TodoList.jsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React from "react";
+import { useQuery } from "edge-city";
+import { getTodos } from "@/services/todos.service";
+import Todo from "./Todo";
+import "./page.css";
+export default function TodoList({ isMutating }) {
+  const { data, isRefetching } = useQuery("todos", () => getTodos());
+  return (
+    <>
+      {isMutating || isRefetching ? <p>Loading...</p> : null}
+      <ul>
+        {data.map((item) => (
+          <Todo
+            key={item.id}
+            item={item}
+          />
+        ))}
+      </ul>
+    </>
+  );
+}

example/src/pages/todos/page.css CHANGED Viewed

@@ -19,7 +19,7 @@
     font-size: 0.875rem;
     line-height: 1.25rem;
     opacity: 0.5;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
   }
   & form {

example/src/pages/todos/page.jsx CHANGED Viewed

@@ -1,34 +1,29 @@
-import React from "react";
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { Helmet } from "react-helmet-async";
-import { useQuery, useMutation } from "edge-city";
+import { useMutation, useRpcCache } from "edge-city";
 import { useForm } from "react-hook-form";
 import { Button, TextField, Input } from "react-aria-components";
-import Todo from "@/components/Todo/Todo";
+import TodoList from "./TodoList";
-import { getTodos, createTodo, updateTodo, deleteTodo } from "@/services/todos.service";
+import { createTodo } from "@/services/todos.service";
 import "./page.css";
 export default function Page() {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm();
-  const { data, refetch } = useQuery("todos", () => getTodos());
+  const { invalidate } = useRpcCache("todos");
   const { mutate, isMutating, err } = useMutation(async ({ text }) => {
     await createTodo({
       text,
       completed: false,
     });
-    await refetch();
+    await invalidate();
-  });
-  const updateMutation = useMutation(async ({ text, completed }) => {
-    await updateTodo({ text, completed });
-    await refetch();
+    reset();
   });
-  const deleteMutation = useMutation(async (id) => {
-    await deleteTodo(id);
-    await refetch();
-  });
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm();
   return (
     <div className="todos-page">
       <h1 className="title">Todo List</h1>
@@ -46,16 +41,11 @@ export default function Page() {
             Add
           </Button>
         </form>
-        <ul>
+        <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
-          {data.map((item) => (
+          <Suspense fallback={<p>Loading...</p>}>
-            <Todo
-              key={item.id}
-              item={item}
-              updateMutation={updateMutation}
+            <TodoList isMutating={isMutating} />
-              deleteMutation={deleteMutation}
-            />
-          ))}
-        </ul>
+          </Suspense>
+        </ErrorBoundary>
       </div>
     </div>
   );

example/src/services/todos.service.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { eq, asc } from "drizzle-orm";
+import { eq, desc } from "drizzle-orm";
 import { boolean, date, pgTable, serial, text } from "drizzle-orm/pg-core";
 import { z } from "zod";
@@ -16,16 +16,27 @@ export const createSchema = z.object({
 });
 const updateSchema = z.object({
+  id: z.number().positive().int("must be an integer"),
   text: z.string().nonempty("please enter some text"),
   completed: z.boolean(),
 });
 export const getTodos = async () => {
+  await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, 2000)
+  });
-  return await db.select().from(todos).orderBy(asc(todos.id));
+  return await db.select().from(todos).orderBy(desc(todos.id));
 };
 /** @param {z.infer<typeof createSchema>} params */
 export const createTodo = async (params) => {
+  await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, 2000)
+  });
   const item = createSchema.parse(params);
   item.createdAt = new Date();
   return await db.insert(todos).values(item).returning();

index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, {
-  Suspense, createContext, useContext, useState, useEffect, useTransition, useCallback
+  Suspense, createContext, useContext, useState, useEffect, useTransition, useCallback, useRef
 } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { HelmetProvider } from 'react-helmet-async';
@@ -40,20 +40,22 @@ export const useInvalidate = () => {
 export const useRpcCache = (k) => {
   const ctx = useContext(RpcContext);
-  const [_, rerender] = useState(false);
-  const get = () => ctx[k]
+  if (isClient() && !ctx.subs[k]) {
-  const set = (v) => {
+    ctx.subs[k] = new Set();
-    ctx[k] = v;
-    rerender((c) => !c);
   }
+  const get = () => ctx.data[k]
-  const invalidate = () => {
+  const set = (v) => {
-    delete ctx[k];
+    ctx.data[k] = v;
-    rerender((c) => !c);
   }
+  const invalidate = () => Promise.all(Array.from(ctx.subs[k]).map((cb) => cb()))
   return {
     get,
     set,
     invalidate,
+    onInvalidated: (cb) => {
+      ctx.subs[k].add(cb)
+      return () => ctx.subs[k].delete(cb);
+    }
   }
 }
@@ -66,7 +68,7 @@ export const useRpcCache = (k) => {
 export const useQuery = (key, fn) => {
   const [isRefetching, setIsRefetching] = useState(false);
   const [err, setErr] = useState(null);
-  const cache = useRpcCache(key);
+  const cache = useRpcCache(key, fn);
   const refetch = useCallback(async () => {
     try {
       setIsRefetching(true);
@@ -79,6 +81,9 @@ export const useQuery = (key, fn) => {
       setIsRefetching(false);
     }
   }, [fn]);
+  useEffect(() => {
+    return cache.onInvalidated(refetch);
+  }, [key])
   const value = cache.get();
   if (value) {
     if (value instanceof Promise) {
@@ -132,19 +137,15 @@ export const RouterProvider = ({ router, history, rpcContext, helmetContext, App
       history,
       params: page.params || {},
     },
+    children: _jsx(Suspense, {
+      fallback: _jsx("div", {}, "Routing...."),
-    children: _jsx(HelmetProvider, {
+      children: _jsx(HelmetProvider, {
-      context: helmetContext,
+        context: helmetContext,
-      children: _jsx(RpcContext.Provider, {
+        children: _jsx(RpcContext.Provider, {
-        value: rpcContext,
+          value: rpcContext,
-        children: _jsx(ErrorBoundary, {
-          onError: (err) => console.log(err),
-          fallback: _jsx("p", {}, "Oops something went wrong"),
-          children: _jsx(Suspense, {
-            fallback: _jsx("p", {}, "Loading..."),
-            children: _jsx(App, {
+          children: _jsx(App, {
-              children: _jsx(page, {}),
+            children: _jsx(page, {}),
-            })
+          })
-          }),
         }),
       }),
     }),

renderPage.js CHANGED Viewed

@@ -115,7 +115,7 @@ const renderPage = async (Page, App, req) => {
   });
   const jsScript = url.pathname === "/" ? "/index" : url.pathname;
   const helmetContext = {};
-  const rpcContext = {};
+  const rpcContext = { data: {}, subs: {} };
   const stream = await render(
     _jsxs("html", {
       lang: "en",

~repos /edge-city

git clone https://pyrossh.dev/repos/edge-city.git

edge-city is a next level meta-framework for react that runs only on edge runtimes