mode settings wip

reference-react-native-app/package.json

@@ -29,7 +29,10 @@
     "@react-native-picker/picker": "*",
     "react-native-picker-select": "*",
     "expo-av": "*",
-    "expo-asset": "*"
+    "expo-asset": "*",
+    "@effect/schema": "*",
+    "@react-native-async-storage/async-storage": "*",
+    "react-hook-form": "*"
   },
   "scripts": {
     "eas-build-pre-install": "cd ../ && node tools/scripts/eas-build-pre-install.mjs . reference-react-native-app && cp package-lock.json reference-react-native-app",

reference-react-native/src/lib/settings/view.tsx

@@ -1,27 +1,57 @@
-import { ModeSettings } from '@jikan0/ui';
+import {
+  ModeSelectorSettingsViewActions,
+  ModeSelectorSettingsViewValue,
+  ModeSelectorSettingViewModeActions
+} from '@jikan0/ui';
 import React from 'react';
-import { Text, View } from 'react-native';
-import { useForm } from 'react-hook-form';
+import { Button, SafeAreaView, Text, TextInput, View } from 'react-native';
+import { Controller, useForm } from 'react-hook-form';
+import { flow } from 'effect';
+import RNPickerSelect from 'react-native-picker-select';
+import { useOnAction } from '@jikan0/ui-react-utils';
+import * as ui from '@jikan0/ui';
 
 
 export type Props = {
-  settings: ModeSettings
+  settings: ModeSelectorSettingsViewValue
+  onAction: (action: ui.Event) => void
+  actions: ModeSelectorSettingsViewActions
 }
 
-const simpleSettings: React.FC<{settings: ModeSettings['settings']['simple']}> = ({settings}) =>
+const SimpleSettings: React.FC<Props> = ({settings, onAction, actions}) =>
 {
-  const {register, handleSubmit} = useForm({
-    defaultValues: settings
-  });
-  return (
-    <View>
 
-    </View>
+  const onSubmit = (data: unknown) => console.log(data)
+
+  const makeOnChange =
+    (
+      makeAction: ModeSelectorSettingViewModeActions<'simple'>[keyof ModeSelectorSettingViewModeActions<'simple'>]
+    ) =>
+      (n: number) => {
+        const v = BigInt(n);
+        onAction(makeAction(v));
+      };
+
+  return (
+    <SafeAreaView>
+      <View>
+        <Text>Rounds:</Text>
+        <RNPickerSelect
+          value={Number(settings.rounds)}
+          onValueChange={makeOnChange(actions.simple.setRounds)}
+          items={Array.from(
+            { length: 50 },
+            (_, i) => i + 1
+          ).map((i) => ({ label: String(i), value: i }))}
+        />
+      </View>
+    </SafeAreaView>
   )
 }
 
-export const view: React.FC<Props> = ({settings: {selected, settings}}) =>
+export const Component: React.FC<Props> = (props) =>
   <View>
-    <View>Settings</View>
-    <View><Text>Mode: {selected}</Text></View>
+    <View><Text>Settings</Text></View>
+    <View><Text>Mode: {props.settings.mode}</Text></View>
+    {props.settings.mode === 'simple' && <SimpleSettings {...props}/>}
   </View>

reference-react-native/src/lib/timer.tsx

@@ -15,6 +15,8 @@ import { Button } from 'react-native-paper';
 import RNPickerSelect from 'react-native-picker-select';
 import { SoundsProvider, useSoundsContext } from './audio';
 import { useSoundTick } from './soundTick';
+import { Component as Settings } from './settings/view';
+import { useOnAction } from '@jikan0/ui-react-utils';
 
 const NoSleepy = () => {
   useKeepAwake();
@@ -62,17 +64,6 @@ const showRunningStage = (uiState: ui.State) =>
     )
     .exhaustive();
 
-const useOnAction = ({
-  setUiState,
-  uiState,
-}: {
-  setUiState: (state: ui.State) => void;
-  uiState: ui.State;
-}) =>
-  useCallback(
-    (action: ui.Action) => setUiState(ui.reduce(action)(uiState)),
-    [setUiState, uiState]
-  );
 
 const Controls = ({
   setUiState,
@@ -110,45 +101,28 @@ const Controls = ({
   );
 };
 
-const MAX_ROUNDS = 50;
-
-const Settings = ({
+const Settings_ = ({
   setUiState,
   uiState,
 }: {
   setUiState: (state: ui.State) => void;
   uiState: ui.State;
 }) => {
   const view = useMemo(() => ui.view(uiState), [uiState]);
+
+
+  const mode = view.modeSelector.value.mode;
   const onAction = useOnAction({
     setUiState,
     uiState,
   });
-  const makeOnChange =
-    (
-      makeAction: ModeSelectorSettingViewModeActions<'simple'>[keyof ModeSelectorSettingViewModeActions<'simple'>]
-    ) =>
-    (n: number) => {
-      const v = BigInt(n);
-      onAction(makeAction(v));
-    };
-  const mode = view.modeSelector.value.mode;
   return (
     <View>
       {view.running === 'stopped'
         ? ((value, actions) => (
             <View>
-              <View>
-                <Text>Rounds:</Text>
-                <RNPickerSelect
-                  value={Number(value.rounds)}
-                  onValueChange={makeOnChange(actions.setRounds)}
-                  items={Array.from(
-                    { length: MAX_ROUNDS },
-                    (_, i) => i + 1
-                  ).map((i) => ({ label: String(i), value: i }))}
-                />
-              </View>
+              <Settings settings={view.modeSelector.value} actions={view.modeSelector.actions} onAction={onAction} />
+
               {/*<label>*/}
               {/*  exercise time ms:{' '}*/}
               {/*  <input*/}
@@ -190,7 +164,7 @@ function ReactNativeTimer_() {
     <View style={{ justifyContent: 'center', flex: 1 }}>
       {showRunningStage(uiState)}
       <Controls setUiState={setUiState} uiState={uiState} />
-      <Settings setUiState={setUiState} uiState={uiState} />
+      <Settings_ setUiState={setUiState} uiState={uiState} />
     </View>
   );
 }

tsconfig.base.json

@@ -3,12 +3,10 @@
   "compilerOptions": {
     "rootDir": ".",
     "strict": true,
-    "exactOptionalPropertyTypes": true,
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es2015",
     "module": "esnext",
@@ -25,6 +23,7 @@
       "@jikan0/reference-react-native": ["reference-react-native/src/index.ts"],
       "@jikan0/test-utils": ["test-utils/src/index.ts"],
       "@jikan0/ui": ["ui/src/index.ts"],
+      "@jikan0/ui-react-utils": ["ui-react-utils/src/index.ts"],
       "@jikan0/utils": ["utils/src/index.ts"],
       "jikan0": ["facade/src/index.ts"]
     }

ui-react-utils/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

ui-react-utils/README.md

@@ -0,0 +1,11 @@
+# ui-react-utils
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build ui-react-utils` to build the library.
+
+## Running unit tests
+
+Run `nx test ui-react-utils` to execute the unit tests via [Jest](https://jestjs.io).

ui-react-utils/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'ui-react-utils',
+  preset: '../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../coverage/ui-react-utils',
+};

ui-react-utils/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@jikan0/ui-react-utils",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

ui-react-utils/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "ui-react-utils",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "ui-react-utils/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/ui-react-utils",
+        "main": "ui-react-utils/src/index.ts",
+        "tsConfig": "ui-react-utils/tsconfig.lib.json",
+        "assets": ["ui-react-utils/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "ui-react-utils/jest.config.ts"
+      }
+    }
+  },
+  "tags": []
+}

ui-react-utils/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/ui-react-utils';

ui-react-utils/src/lib/ui-react-utils.ts

@@ -0,0 +1,14 @@
+import * as ui from '@jikan0/ui';
+import { useCallback } from 'react';
+
+export const useOnAction = ({
+                              setUiState,
+                              uiState,
+                            }: {
+  setUiState: (state: ui.State) => void;
+  uiState: ui.State;
+}) =>
+  useCallback(
+    (action: ui.Action) => setUiState(ui.reduce(action)(uiState)),
+    [setUiState, uiState]
+  );

ui-react-utils/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

ui-react-utils/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

ui-react-utils/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}