Account sync and onboarding overhaul (#1200)

* Removed OnboardingMessage screens from onboarding. Signed-off-by: Thomas Hobohm <[email protected]> * Enable branching onboarding. Signed-off-by: Thomas Hobohm <[email protected]> * Split onboarding, enable user to use existing account seed. Signed-off-by: Thomas Hobohm <[email protected]> * Fix account reducer test. Signed-off-by: Thomas Hobohm <[email protected]> * Revamp onboarding state, move onboarding and initialization into their own redux feature. Signed-off-by: Thomas Hobohm <[email protected]> * Renamed some things. Signed-off-by: Thomas Hobohm <[email protected]> * Updated tests. Signed-off-by: Thomas Hobohm <[email protected]> * Wrote a test for the initialization reducer. Signed-off-by: Thomas Hobohm <[email protected]> * Fixed code to launch Textile node on startup. Signed-off-by: Thomas Hobohm <[email protected]> * Prettified onboarding UI. Signed-off-by: Thomas Hobohm <[email protected]> * Prefix actions with initialization. Signed-off-by: Thomas Hobohm <[email protected]> * Missed an action. Signed-off-by: Thomas Hobohm <[email protected]> * Removed redundant arguments to createAction. Signed-off-by: Thomas Hobohm <[email protected]> * Updated comments in initialization reducer. Signed-off-by: Thomas Hobohm <[email protected]> * Selectors should only know about the state of their own feature. Signed-off-by: Thomas Hobohm <[email protected]> * Fix migration code. Signed-off-by: Thomas Hobohm <[email protected]> * Update state if node is already initialized. Signed-off-by: Thomas Hobohm <[email protected]> * Created first iteration of generic modal component. Signed-off-by: Thomas Hobohm <[email protected]> * Fixed a type annotation. Signed-off-by: Thomas Hobohm <[email protected]> * Refactoring navigation, init screen Signed-off-by: Aaron Sutula <[email protected]> * More wip Signed-off-by: Aaron Sutula <[email protected]> * Wip on getting onboarding modal working and initializing node Signed-off-by: Aaron Sutula <[email protected]> * Little work on seed entry screen Signed-off-by: Aaron Sutula <[email protected]> * tsc fixes Signed-off-by: Aaron Sutula <[email protected]> * remove initialized key from account redux Signed-off-by: Aaron Sutula <[email protected]> * Display Initialize component within StatusCheck Signed-off-by: Aaron Sutula <[email protected]> * Added onboarding HOC. Signed-off-by: Thomas Hobohm <[email protected]> * Modify onboarding component to use HOC interface. Signed-off-by: Thomas Hobohm <[email protected]> * Fix initialization redux. Signed-off-by: Thomas Hobohm <[email protected]> * Fix static imports. Signed-off-by: Thomas Hobohm <[email protected]> * Update redux state tree and onboarding isComplete functions. Signed-off-by: Thomas Hobohm <[email protected]> * better referral code keyboard return button type Signed-off-by: Aaron Sutula <[email protected]> * Better tsconfig and some lint and tsc fixes Signed-off-by: Aaron Sutula <[email protected]> * Include typings dir in tsc Signed-off-by: Aaron Sutula <[email protected]> * Rough but working Signed-off-by: Aaron Sutula <[email protected]> * Got both onboarding paths working Signed-off-by: Aaron Sutula <[email protected]> * Little tweaks Signed-off-by: Aaron Sutula <[email protected]> * Small improvements to re-onboarding Signed-off-by: Aaron Sutula <[email protected]> * re-enable code in DeepLinkSagas Signed-off-by: Aaron Sutula <[email protected]> * Delete some unused classes Signed-off-by: Aaron Sutula <[email protected]> * Get initializing from invite link working Signed-off-by: Aaron Sutula <[email protected]> * Get onboarding + thread invite working Signed-off-by: Aaron Sutula <[email protected]> * Got onboarding username to continue if already done Signed-off-by: Aaron Sutula <[email protected]> * file name cleanup Signed-off-by: Aaron Sutula <[email protected]> * Moving onboarding screens Signed-off-by: Aaron Sutula <[email protected]> * Better checks on triggering onComplete Signed-off-by: Aaron Sutula <[email protected]>
textileio · Aug 30, 2019 · 61bde74 · 61bde74
1 parent a366cc9
commit 61bde74
Show file tree

Hide file tree

Showing 66 changed files with 1,664 additions and 1,230 deletions.
diff --git a/App/Components/AccountSeedModal.tsx b/App/Components/AccountSeedModal.tsx
@@ -0,0 +1,141 @@
+import React, { Component } from 'react'
+import {
+  SafeAreaView,
+  View,
+  Text,
+  TouchableOpacity,
+  ViewStyle,
+  TextStyle
+} from 'react-native'
+import Modal from 'react-native-modal'
+
+import Input from '../SB/components/Input'
+
+import { color, fontFamily, fontSize, spacing, size } from '../styles'
+
+const ModalView: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+  padding: 0,
+  margin: 0
+}
+
+const Container: ViewStyle = {
+  flex: 1,
+  backgroundColor: color.screen_primary,
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  alignItems: 'stretch'
+}
+
+const Header: TextStyle = {
+  textAlign: 'center',
+  fontFamily: fontFamily.bold,
+  fontSize: fontSize._24,
+  paddingVertical: spacing._024
+}
+
+const InputContainer: ViewStyle = {
+  flexDirection: 'row',
+  paddingHorizontal: spacing._024,
+  paddingBottom: spacing._024
+}
+
+const InputStyle: ViewStyle = {
+  height: size._048
+}
+
+const Buttons: ViewStyle = {
+  flexDirection: 'row',
+  justifyContent: 'space-around',
+  alignItems: 'center',
+  paddingTop: spacing._024
+}
+
+const CancelButton: TextStyle = {
+  fontFamily: fontFamily.regular,
+  color: color.grey_3
+}
+
+const SubmitButton: TextStyle = {
+  fontFamily: fontFamily.regular,
+  color: color.brandBlue
+}
+
+const DisabledButton: TextStyle = {
+  color: color.grey_4
+}
+
+interface OwnProps {
+  isVisible: boolean
+  complete: (seed: string) => void
+  close: () => void
+}
+
+type Props = OwnProps
+
+interface State {
+  seed: string
+}
+
+export default class CafePeerIdModal extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      seed: ''
+    }
+  }
+
+  render() {
+    const seedIsBlank = this.state.seed === ''
+    return (
+      <Modal
+        isVisible={this.props.isVisible}
+        animationIn={'fadeInUp'}
+        animationOut={'fadeOutDown'}
+        avoidKeyboard={true}
+        backdropOpacity={0.5}
+        style={{ margin: 0, padding: 0 }}
+      >
+        <SafeAreaView style={ModalView}>
+          <View style={Container}>
+            <Text style={Header}>What is your account seed?</Text>
+            <View style={InputContainer}>
+              <Input
+                style={InputStyle}
+                value={this.state.seed}
+                label={seedIsBlank ? 'Seed...' : ''}
+                onChangeText={this.handleNewSeed}
+              />
+            </View>
+            <View style={Buttons}>
+              <TouchableOpacity onPress={this.props.close}>
+                <Text style={CancelButton}>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                disabled={seedIsBlank}
+                onPress={() => {
+                  this.props.complete(this.state.seed)
+                  this.props.close()
+                }}
+              >
+                <Text style={[SubmitButton, seedIsBlank && DisabledButton]}>
+                  Submit
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </SafeAreaView>
+      </Modal>
+    )
+  }
+
+  handleNewSeed = (seed: string) => {
+    this.setState({
+      seed
+    })
+  }
+}
diff --git a/App/Components/Button.tsx b/App/Components/Button.tsx
@@ -1,14 +1,13 @@
 import React, { Component } from 'react'
 import {
+  View,
   Text,
   TouchableOpacity,
   ViewStyle,
   TextStyle,
   ActivityIndicator
 } from 'react-native'
 
-import RoundedCornersView from './RoundedCornersView'
-
 const BUTTON_TEXT: TextStyle = {
   fontFamily: 'Biotif-Regular',
   fontSize: 18,
@@ -19,7 +18,7 @@ const BUTTON_TEXT: TextStyle = {
 }
 
 const DISABLED: ViewStyle = {
-  backgroundColor: '#D8D8D8'
+  opacity: 0.2
 }
 
 interface Props {
@@ -31,15 +30,15 @@ interface Props {
   textStyle?: TextStyle
 }
 
-const button = (props: Props) => {
+function button(props: Props) {
   const { onPress, disabled, text, style, textStyle, processing } = props
 
   return (
     <TouchableOpacity disabled={disabled} onPress={onPress}>
-      <RoundedCornersView style={[style, disabled && DISABLED]}>
+      <View style={[style, disabled && DISABLED]}>
         {processing && <ActivityIndicator />}
         {!processing && <Text style={[BUTTON_TEXT, textStyle]}>{text}</Text>}
-      </RoundedCornersView>
+      </View>
     </TouchableOpacity>
   )
 }

diff --git a/App/Components/HorizontalGrid.tsx b/App/Components/HorizontalGrid.tsx
@@ -1,7 +1,6 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import {
   View,
-  Text,
   FlatList,
   TouchableOpacity,
   ListRenderItemInfo,

diff --git a/App/Components/LargeButton.tsx b/App/Components/LargeButton.tsx
@@ -11,7 +11,7 @@ interface Props {
   onPress?: () => void
 }
 
-const button = (props: Props) => {
+function button(props: Props) {
   const { text, onPress, style, processing } = props
   return (
     <Button

diff --git a/App/Components/Loading.tsx b/App/Components/Loading.tsx
@@ -4,7 +4,8 @@ import {
   Text,
   ActivityIndicator,
   ActivityIndicatorProps,
-  TextStyle
+  TextStyle,
+  ViewStyle
 } from 'react-native'
 
 import { color, textStyle, spacing } from '../styles'
@@ -17,28 +18,24 @@ const TEXT: TextStyle = {
 }
 
 interface Props extends ActivityIndicatorProps {
-  backgroundColor?: string
+  containerxStyle?: ViewStyle
   text?: string
 }
 
-const loading = (props: Props) => {
-  const backgroundColor = props.backgroundColor
-    ? props.backgroundColor
-    : color.screen_primary
+export default function loading(props: Props) {
   const indicatorProps: ActivityIndicatorProps = { size: 'large', ...props }
   return (
     <View
       style={{
         flex: 1,
         alignContent: 'center',
         justifyContent: 'center',
-        backgroundColor
+        backgroundColor: color.screen_primary,
+        ...props.containerxStyle
       }}
     >
       <ActivityIndicator {...indicatorProps} />
       {props.text && <Text style={TEXT}>{props.text}</Text>}
     </View>
   )
 }
-
-export default loading
diff --git a/App/Components/MediumButton.tsx b/App/Components/MediumButton.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { ViewStyle, TextStyle } from 'react-native'
+import Button from './Button'
+import { textStyle as ts, spacing } from '../styles'
+
+interface Props {
+  text: string
+  style?: ViewStyle
+  textStyle?: TextStyle
+  disabled?: boolean
+  onPress?: () => void
+}
+
+function button(props: Props) {
+  const { text, onPress, style, textStyle } = props
+  return (
+    <Button
+      text={text.toUpperCase()}
+      textStyle={{ ...ts.action_s, ...textStyle }}
+      style={{
+        ...style,
+        paddingHorizontal: spacing._012,
+        paddingVertical: spacing._008
+      }}
+      disabled={props.disabled}
+      onPress={onPress}
+    />
+  )
+}
+
+export default button
diff --git a/App/Components/Modal.tsx b/App/Components/Modal.tsx
@@ -0,0 +1,90 @@
+import React, { Component } from 'react'
+import { SafeAreaView, TextInput } from 'react-native'
+
+import Button from '../Components/LargeButton'
+
+// A mapped type helper that takes a type and makes each of its properties optional
+type Partial<T> = { [P in keyof T]?: T[P] }
+
+// initialValues: the initial value of the fields
+// onSubmit: function to be called when the form is submitted with valid values
+// placeholders: the placeholder text for the fields
+// valid: a function that returns true if the field values are valid, false otherwise
+// buttonText: text to display on the submit button (overrides "Submit")
+interface Props<FormFields> {
+  initialValues: FormFields
+  onSubmit: (values: FormFields) => void
+  placeholders?: Partial<FormFields>
+  valid?: (values: FormFields) => boolean
+  buttonText?: string
+}
+
+interface State<FormFields> {
+  values: FormFields
+}
+
+type Fields = {
+  [key: string]: string
+}
+
+// A generic modal component. It accepts a generic type, FormFields, which represents
+// each field of the form as a string member variable.
+export default class Modal<FormFields extends Fields> extends Component<
+  Props<FormFields>,
+  State<FormFields>
+> {
+  constructor(props: Props<FormFields>) {
+    super(props)
+    this.state = {
+      values: props.initialValues
+    }
+  }
+
+  _buildOnChangeText = (key: keyof FormFields) => {
+    return (newValue: string) => {
+      this.setState(prevState => {
+        return {
+          values: {
+            ...prevState.values,
+            [key]: newValue
+          }
+        }
+      })
+    }
+  }
+
+  validateThenSubmit = () => {
+    if (this.props.valid && this.props.valid(this.state.values)) {
+      return
+    }
+    this.props.onSubmit(this.state.values)
+  }
+
+  render() {
+    return (
+      <SafeAreaView>
+        {Object.keys(this.state.values).map(key => (
+          <TextInput
+            key={key}
+            value={this.state.values[key]}
+            placeholder={
+              this.props.placeholders &&
+              (key in this.props.placeholders
+                ? this.props.placeholders[key]
+                : '')
+            }
+            onChangeText={this._buildOnChangeText(key)}
+          />
+        ))}
+        <Button
+          text={
+            this.props.buttonText !== undefined
+              ? this.props.buttonText
+              : 'Submit'
+          }
+          onPress={this.validateThenSubmit}
+        />
+      </SafeAreaView>
+    )
+  }
+}