Split app state and app logic

intro/4-ipfs-code-execution/web/src/App.tsx

@@ -7,7 +7,7 @@ import {
   hasResultState,
   isConnectedState,
   isDeployedState,
-} from "./state";
+} from "./appState";
 import { useRecoilValue } from "recoil";
 import { ConnectedInfo } from "./Components/ConnectedInfo";
 import { ConnectionForm } from "./Components/ConnectionForm";

intro/4-ipfs-code-execution/web/src/Components/ConnectedInfo.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from "recoil";
-import { clientState } from "../state";
+import { clientState } from "../appState";
 import { TextWithLabel } from "./TextInput";
 
 export const ConnectedInfo = () => {

intro/4-ipfs-code-execution/web/src/Components/ConnectionForm.tsx

@@ -1,4 +1,4 @@
-import { relayNodes, useClientConnect } from "../state";
+import { relayNodes, useClientConnect } from "../appLogic";
 
 export const ConnectionForm = () => {
   const connect = useClientConnect();

intro/4-ipfs-code-execution/web/src/Components/IpfsDeploymentInfo.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from "recoil";
-import { serviceIdState, useRemoveService, wasmState } from "../state";
+import { useRemoveService } from "../appLogic";
-import { copyToClipboard } from "../util";
+import { serviceIdState, wasmState } from "../appState";
 import { TextWithLabel } from "./TextInput";
 
 export const IpfsDeploymentInfo = () => {

intro/4-ipfs-code-execution/web/src/Components/IpfsForm.tsx

@@ -1,5 +1,6 @@
-import { useRecoilState, useResetRecoilState } from "recoil";
+import { useRecoilState } from "recoil";
-import { rpcAddrState, useDeployService, wasmState } from "../state";
+import { useDeployService } from "../appLogic";
+import { rpcAddrState, wasmState } from "../appState";
 import { TextInput } from "./TextInput";
 
 export const IpfsForm = () => {

intro/4-ipfs-code-execution/web/src/Components/SizeCalcForm.tsx

@@ -1,5 +1,6 @@
 import { useRecoilState, useRecoilValue } from "recoil";
-import { fileCIDState, rpcAddrState, useGetFileSize } from "../state";
+import { useGetFileSize } from "../appLogic";
+import { fileCIDState, rpcAddrState } from "../appState";
 import { TextInput } from "./TextInput";
 
 export const SizeCalcForm = () => {

intro/4-ipfs-code-execution/web/src/Components/SizeCalcResult.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from "recoil";
-import { fileSizeCIDState, fileSizeState } from "../state";
+import { fileSizeCIDState, fileSizeState } from "../appState";
 import { TextWithLabel } from "./TextInput";
 
 export const SizeCalcResult = () => {

intro/4-ipfs-code-execution/web/src/appLogic.ts

@@ -1,94 +1,25 @@
 import { get_external_api_multiaddr } from "@fluencelabs/aqua-ipfs";
+import { FluenceClient, createClient } from "@fluencelabs/fluence";
+import { stage } from "@fluencelabs/fluence-network-environment";
+import { useSetRecoilState, useRecoilValue, useRecoilState } from "recoil";
 import {
   deploy_service,
   put_file_size,
   remove_service,
 } from "@fluencelabs/ipfs-execution";
-import { createClient, FluenceClient } from "@fluencelabs/fluence";
-import { stage } from "@fluencelabs/fluence-network-environment";
 import {
-  atom,
+  clientState,
-  selector,
+  rpcAddrState,
-  useRecoilState,
+  wasmState,
-  useRecoilValue,
+  serviceIdState,
-  useSetRecoilState,
+  fileCIDState,
-} from "recoil";
+  fileSizeState,
+  fileSizeCIDState,
+} from "./appState";
 import { decapsulateP2P, fromOption } from "./util";
 
 export const relayNodes = [stage[0], stage[1], stage[2]];
 
-export const clientState = atom<FluenceClient | null>({
-  key: "clientState",
-  default: null,
-  dangerouslyAllowMutability: true,
-});
-
-export const serviceIdState = atom<string | null>({
-  key: "serviceIdState",
-  default: null,
-});
-
-export const wasmState = atom<string>({
-  key: "serviceState",
-  default: "Qmf8fH2cDZXGKS9uDGBcHxv5uQ51ChrigdZKe3QxS2C1AF",
-});
-
-export const rpcAddrState = atom<string | null>({
-  key: "rpcAddrState",
-  default: null,
-});
-
-export const fileCIDState = atom<string | null>({
-  key: "fileCIDState",
-  default: null,
-});
-
-export const fileSizeState = atom<string | null>({
-  key: "fileSizeState",
-  default: null,
-});
-
-export const fileSizeCIDState = atom<string | null>({
-  key: "fileSizeCIDState",
-  default: null,
-});
-
-export const isConnectedState = selector({
-  key: "isConnectedState",
-  get: ({ get }) => {
-    const client = get(clientState);
-
-    return client !== null && client.isConnected;
-  },
-  dangerouslyAllowMutability: true,
-});
-
-export const gotRpcAddrState = selector({
-  key: "getRpcAddrState",
-  get: ({ get }) => {
-    const rpcAddr = get(rpcAddrState);
-
-    return rpcAddr !== null;
-  },
-});
-
-export const isDeployedState = selector({
-  key: "isDeployedState",
-  get: ({ get }) => {
-    const serviceId = get(serviceIdState);
-
-    return serviceId !== null;
-  },
-});
-
-export const hasResultState = selector({
-  key: "hasResultState",
-  get: ({ get }) => {
-    const fileSize = get(fileSizeState);
-    return fileSize !== null;
-  },
-});
-
 const getRpcAddr = async (client: FluenceClient) => {
   if (client === null) {
     console.log("getRpcAddr client is null");

intro/4-ipfs-code-execution/web/src/appState.ts

@@ -0,0 +1,74 @@
+import { FluenceClient } from "@fluencelabs/fluence";
+import { atom, selector } from "recoil";
+
+export const clientState = atom<FluenceClient | null>({
+  key: "clientState",
+  default: null,
+  dangerouslyAllowMutability: true,
+});
+
+export const serviceIdState = atom<string | null>({
+  key: "serviceIdState",
+  default: null,
+});
+
+export const wasmState = atom<string>({
+  key: "serviceState",
+  default: "Qmf8fH2cDZXGKS9uDGBcHxv5uQ51ChrigdZKe3QxS2C1AF",
+});
+
+export const rpcAddrState = atom<string | null>({
+  key: "rpcAddrState",
+  default: null,
+});
+
+export const fileCIDState = atom<string | null>({
+  key: "fileCIDState",
+  default: null,
+});
+
+export const fileSizeState = atom<string | null>({
+  key: "fileSizeState",
+  default: null,
+});
+
+export const fileSizeCIDState = atom<string | null>({
+  key: "fileSizeCIDState",
+  default: null,
+});
+
+export const isConnectedState = selector({
+  key: "isConnectedState",
+  get: ({ get }) => {
+    const client = get(clientState);
+
+    return client !== null && client.isConnected;
+  },
+  dangerouslyAllowMutability: true,
+});
+
+export const gotRpcAddrState = selector({
+  key: "getRpcAddrState",
+  get: ({ get }) => {
+    const rpcAddr = get(rpcAddrState);
+
+    return rpcAddr !== null;
+  },
+});
+
+export const isDeployedState = selector({
+  key: "isDeployedState",
+  get: ({ get }) => {
+    const serviceId = get(serviceIdState);
+
+    return serviceId !== null;
+  },
+});
+
+export const hasResultState = selector({
+  key: "hasResultState",
+  get: ({ get }) => {
+    const fileSize = get(fileSizeState);
+    return fileSize !== null;
+  },
+});

intro/4-ipfs-code-execution/web/src/util.ts

@@ -6,10 +6,6 @@ export const decapsulateP2P = (rpcAddr: string) => {
     .toString();
 };
 
-export const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text);
-};
-
 export const fromOption = <T>(opt: T | T[] | null): T | null => {
   if (Array.isArray(opt)) {
     if (opt.length === 0) {