Add server action to examples

apps/playground-app/package.json

@@ -26,7 +26,7 @@
     "eslint-config-next": "13.3.0",
     "mvp.css": "^1.12.0",
     "next": "14.1.0",
-    "patronum": "^2.0.0",
+    "patronum": "^2.2.0",
     "postcss": "8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -37,5 +37,8 @@
   "devDependencies": {
     "fs-extra": "^11.1.1",
     "zx": "^7.2.1"
-  }
+  },
+  "browserslist": [
+    "last 2 years"
+  ]
 }

apps/playground-app/src/features/layout/view.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { AsyncCounter } from "#root/features/async-counter";
 import { MemoUpdatesBugCheck } from "#root/features/memo-check";
+import { ServerAction } from "#root/features/server-action";
 
 const links = [
   {
@@ -30,6 +31,7 @@ export function PageLayout(props: React.PropsWithChildren<{}>) {
           </h1>
           <small>Playground app to research Next.js + Effector</small>
           <MemoUpdatesBugCheck />
+          <ServerAction />
         </div>
         <AsyncCounter />
         <nav style={{ marginBottom: 0 }}>

apps/playground-app/src/features/server-action/hash-value.ts

@@ -0,0 +1,12 @@
+"use server";
+import { createHash } from "node:crypto";
+
+export const hashValue = async (value: string) => {
+
+  /**
+   * Simulates server-side activities like db queries, etc.
+   */
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  return createHash("sha256").update(value).digest("hex");
+};

apps/playground-app/src/features/server-action/index.ts

@@ -0,0 +1 @@
+export { ServerAction } from "./ui";

apps/playground-app/src/features/server-action/model.ts

@@ -0,0 +1,20 @@
+import { createEffect, createEvent, createStore, sample } from "effector";
+import { debounce } from "patronum";
+
+import { hashValue } from "./hash-value";
+
+const hashValueFx = createEffect(async (value: string) => hashValue(value));
+
+export const $hashedValue = createStore<string>("").on(
+  hashValueFx.doneData,
+  (_, value) => value
+);
+
+export const $pending = hashValueFx.pending;
+
+export const valueChanged = createEvent<string>();
+
+sample({
+  clock: debounce(valueChanged, 500),
+  target: hashValueFx,
+});

apps/playground-app/src/features/server-action/ui.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { useUnit } from "effector-react";
+
+import { $hashedValue, $pending, valueChanged } from "./model";
+
+export function ServerAction() {
+  const [hashedValue, pending, changed] = useUnit([
+    $hashedValue,
+    $pending,
+    valueChanged,
+  ]);
+
+  return (
+    <div
+      style={{
+        maxWidth: "300px",
+        margin: "auto",
+      }}
+    >
+      <h3>Server action example</h3>
+      <input type="text" onChange={(e) => changed(e.target.value)} />
+      <div>
+        Server-hashed value: {pending ? "Hashing..." : hashedValue.slice(0, 5)}
+      </div>
+    </div>
+  );
+}