From d8ebaee8ec4655ba702fec1f8a2fa06c87f492bf Mon Sep 17 00:00:00 2001
From: AlexandrHoroshih <xad71rus@gmail.com>
Date: Wed, 14 Feb 2024 22:34:47 +0700
Subject: [PATCH] Add server action to examples

---
 apps/playground-app/package.json              |  7 +++--
 apps/playground-app/pnpm-lock.yaml            |  8 +++---
 .../src/features/layout/view.tsx              |  2 ++
 .../src/features/server-action/hash-value.ts  | 12 +++++++++
 .../src/features/server-action/index.ts       |  1 +
 .../src/features/server-action/model.ts       | 20 ++++++++++++++
 .../src/features/server-action/ui.tsx         | 27 +++++++++++++++++++
 7 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 apps/playground-app/src/features/server-action/hash-value.ts
 create mode 100644 apps/playground-app/src/features/server-action/index.ts
 create mode 100644 apps/playground-app/src/features/server-action/model.ts
 create mode 100644 apps/playground-app/src/features/server-action/ui.tsx

diff --git a/apps/playground-app/package.json b/apps/playground-app/package.json
index 541dacb..120a5d9 100644
--- a/apps/playground-app/package.json
+++ b/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"
+  ]
 }
diff --git a/apps/playground-app/pnpm-lock.yaml b/apps/playground-app/pnpm-lock.yaml
index 5a680dd..d604d4c 100644
--- a/apps/playground-app/pnpm-lock.yaml
+++ b/apps/playground-app/pnpm-lock.yaml
@@ -18,7 +18,7 @@ specifiers:
   fs-extra: ^11.1.1
   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
@@ -44,7 +44,7 @@ dependencies:
   eslint-config-next: 13.3.0_voubu7prgxjfsfbgx5d4sqnwiy
   mvp.css: 1.12.0
   next: 14.1.0_biqbaboplfbrettd7655fr4n2y
-  patronum: 2.0.0_effector@23.0.0
+  patronum: 2.2.0_effector@23.0.0
   postcss: 8.4.21
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
@@ -2118,8 +2118,8 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  /patronum/2.0.0_effector@23.0.0:
-    resolution: {integrity: sha512-qNlLpXXE9ULVEH6+Tj7pQeHgiRNBL1ibE8kScD89ZysW9yQym+xUQXPJzC1XZlCK4olkTHFhmFLK/mks8r/3fQ==}
+  /patronum/2.2.0_effector@23.0.0:
+    resolution: {integrity: sha512-Idsb5swd+2UI1NuBlHJuVA4WlaUeEluZJxGAZ9obCViuEf4pP68bij3f1sZCM/vqqWPsbHclYweDNt/sWu0O1g==}
     peerDependencies:
       effector: ^23
     dependencies:
diff --git a/apps/playground-app/src/features/layout/view.tsx b/apps/playground-app/src/features/layout/view.tsx
index 2e93a9e..b47ba1c 100644
--- a/apps/playground-app/src/features/layout/view.tsx
+++ b/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 }}>
diff --git a/apps/playground-app/src/features/server-action/hash-value.ts b/apps/playground-app/src/features/server-action/hash-value.ts
new file mode 100644
index 0000000..8722c82
--- /dev/null
+++ b/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");
+};
diff --git a/apps/playground-app/src/features/server-action/index.ts b/apps/playground-app/src/features/server-action/index.ts
new file mode 100644
index 0000000..1421093
--- /dev/null
+++ b/apps/playground-app/src/features/server-action/index.ts
@@ -0,0 +1 @@
+export { ServerAction } from "./ui";
diff --git a/apps/playground-app/src/features/server-action/model.ts b/apps/playground-app/src/features/server-action/model.ts
new file mode 100644
index 0000000..32120c5
--- /dev/null
+++ b/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,
+});
diff --git a/apps/playground-app/src/features/server-action/ui.tsx b/apps/playground-app/src/features/server-action/ui.tsx
new file mode 100644
index 0000000..0cbc1fb
--- /dev/null
+++ b/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>
+  );
+}