From f3097df8130ea4a5b739c4a104b1b6ae215b3f1d Mon Sep 17 00:00:00 2001
From: Julian Tigler <High5Apps@gmail.com>
Date: Wed, 17 Apr 2024 13:42:26 +0300
Subject: [PATCH] Layout EditOrgScreen

- Previously had an issue on iOS with multiline text input and maxLength < 1/2 of text length, which would partially duplicate the value string, but it was fixed by upgrading RN in the previous commit
  - https://github.com/facebook/react-native/issues/36494
---
 app/screens/lead/EditOrgScreen.tsx | 149 ++++++++++++++++++++++++++++-
 1 file changed, 144 insertions(+), 5 deletions(-)

diff --git a/app/screens/lead/EditOrgScreen.tsx b/app/screens/lead/EditOrgScreen.tsx
index 0a55802..2581b39 100644
--- a/app/screens/lead/EditOrgScreen.tsx
+++ b/app/screens/lead/EditOrgScreen.tsx
@@ -1,7 +1,146 @@
-import React from 'react';
-import PlaceholderScreen from '../PlaceholderScreen';
-import type { EditOrgScreenProps } from '../../navigation';
+import React, {
+  useEffect, useMemo, useRef, useState,
+} from 'react';
+import {
+  ScrollView, StyleSheet, TextInput, View,
+} from 'react-native';
+import {
+  HeaderText, KeyboardAvoidingScreenBackground, MultilineTextInput,
+  PrimaryButton, TextInputRow, useRequestProgress,
+} from '../../components';
+import useTheme from '../../Theme';
+import { GENERIC_ERROR_MESSAGE, NewOrgSteps, useOrg } from '../../model';
 
-export default function EditOrgScreen({ route }: EditOrgScreenProps) {
-  return <PlaceholderScreen name={route.name} />;
+const useStyles = () => {
+  const { sizes, spacing } = useTheme();
+
+  const styles = StyleSheet.create({
+    button: {
+      alignSelf: 'flex-end',
+      flex: 0,
+      height: sizes.buttonHeight,
+      paddingHorizontal: spacing.m,
+    },
+    container: {
+      flex: 1,
+      margin: spacing.m,
+      rowGap: spacing.m,
+    },
+    multilineTextInput: {
+      height: 100,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    section: {
+      rowGap: spacing.s,
+    },
+  });
+
+  return { styles };
+};
+
+function useOrgInfo({
+  setLoading, setResult,
+}: Pick<ReturnType<typeof useRequestProgress>, 'setLoading' | 'setResult'>) {
+  const [memberDefinition, setMemberDefinition] = useState('');
+  const [name, setName] = useState('');
+
+  const { org, refreshOrg } = useOrg();
+  const refresh = async () => {
+    setLoading(true);
+    setResult('none');
+
+    try {
+      await refreshOrg();
+    } catch (error) {
+      let errorMessage = GENERIC_ERROR_MESSAGE;
+      if (error instanceof Error) {
+        errorMessage = error.message;
+      }
+      setResult('error', {
+        message: `${errorMessage}\nTap to try again`,
+        onPress: refresh,
+      });
+    }
+
+    setLoading(false);
+  };
+
+  useEffect(() => { refresh().catch(console.error); }, []);
+
+  useEffect(() => {
+    if (!org) { return; }
+
+    setMemberDefinition(org.memberDefinition);
+    setName(org.name);
+  }, [org]);
+
+  return {
+    memberDefinition, name, org, setMemberDefinition, setName,
+  };
+}
+
+export default function EditOrgScreen() {
+  const { RequestProgress, setLoading, setResult } = useRequestProgress();
+  const {
+    memberDefinition, name, org, setMemberDefinition, setName,
+  } = useOrgInfo({ setLoading, setResult });
+
+  const ref = useRef<TextInput>(null);
+
+  const [nameStep, memberDefinitionStep] = NewOrgSteps;
+  const namePlaceholder = useMemo(nameStep.placeholder, []);
+  const definitionPlaceholder = useMemo(memberDefinitionStep.placeholder, []);
+
+  const { styles } = useStyles();
+
+  return (
+    <KeyboardAvoidingScreenBackground>
+      <ScrollView
+        contentContainerStyle={styles.container}
+        keyboardShouldPersistTaps="handled"
+        style={styles.scrollView}
+      >
+        {org && (
+          <>
+            <View style={styles.section}>
+              <HeaderText>Org name</HeaderText>
+              <TextInputRow
+                blurOnSubmit={false}
+                enablesReturnKeyAutomatically
+                maxLength={nameStep.maxLength}
+                onChangeText={setName}
+                onSubmitEditing={() => ref.current?.focus()}
+                placeholder={namePlaceholder}
+                returnKeyType="next"
+                value={name}
+              />
+            </View>
+            <View style={styles.section}>
+              <HeaderText>Org memeber definition</HeaderText>
+              <MultilineTextInput
+                blurOnSubmit
+                enablesReturnKeyAutomatically
+                maxLength={memberDefinitionStep.maxLength}
+                onChangeText={setMemberDefinition}
+                placeholder={definitionPlaceholder}
+                style={styles.multilineTextInput}
+                ref={ref}
+                returnKeyType="done"
+                value={memberDefinition}
+              />
+            </View>
+            <PrimaryButton
+              iconName="publish"
+              label="Publish"
+              onPress={() => console.log('press')}
+              style={styles.button}
+            />
+          </>
+        )}
+        <RequestProgress />
+      </ScrollView>
+    </KeyboardAvoidingScreenBackground>
+  );
 }