fix up some ui components. refactor . build out more of onboard

Author: TrillCyborg

client/package.json

@@ -36,6 +36,7 @@
     "react-router-dom": "^5.0.0",
     "react-router-native": "^5.0.0",
     "react-scripts": "3.0.0",
+    "react-spring": "^8.0.21",
     "styled-components": "^4.2.1"
   },
   "devDependencies": {

client/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Text, TouchableOpacity } from 'react-native'
+import { Text, TouchableOpacity, TouchableOpacityProps } from 'react-native'
 import styled from 'styled-components'
 
 export enum Variants {
@@ -19,7 +19,7 @@ const Wrapper = styled(TouchableOpacity)<{ variant?: Variants; disabled?: boolea
   text-align: center;
   box-shadow: 0 20px 30px 0 rgba(87, 91, 126, 0.3);
   padding: 17px 45px;
-  ${props => (props.disabled ? 'opacity: 0.6;' : '')}
+  opacity: ${props => (props.disabled ? '0.6' : '1')};
 `
 
 const Label = styled(Text)`
@@ -30,22 +30,14 @@ const Label = styled(Text)`
   letter-spacing: -0.5px;
 `
 
-interface ButtonProps {
+interface ButtonProps extends TouchableOpacityProps {
   children: string
-  onPress: () => void
-  disabled?: boolean
   variant?: Variants
   style?: any
 }
 
-const Button = ({ children, onPress, disabled, variant, style }: ButtonProps) => (
-  <Wrapper
-    variant={variant}
-    onPress={onPress}
-    activeOpacity={0.6}
-    disabled={disabled}
-    style={style}
-  >
+const Button = ({ children, variant, style, ...props }: ButtonProps) => (
+  <Wrapper {...props} variant={variant} activeOpacity={0.6} style={style}>
     <Label>{children}</Label>
   </Wrapper>
 )

client/src/components/Input/Input.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react'
-import {
-  View,
-  Text,
-  TextInput,
-  TextInputIOSProps,
-  NativeSyntheticEvent,
-  TextInputKeyPressEventData,
-} from 'react-native'
+import { View, Text, TextInput, TextInputProps } from 'react-native'
 import styled, { css } from 'styled-components'
 
 const Base = styled(TextInput)<{
@@ -25,6 +18,7 @@ const Base = styled(TextInput)<{
   font-weight: 900;
   color: var(--dark-blue);
   letter-spacing: -0.91px;
+  outline: none;
   transition: box-shadow 0.3s ease;
 
   ${props =>
@@ -45,63 +39,46 @@ const Label = styled(Text)`
   letter-spacing: -0.61px;
 `
 
-interface InputProps {
+interface InputProps extends TextInputProps {
   style?: any
   inputStyle?: any
   name?: string
   label?: string
-  placeholder?: string
-  value?: string
-  onChangeText: (text: string) => void
-  onBlur?: (e: any) => void
-  onFocus?: (e: any) => void
-  onKeyPress?: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void
   secure?: boolean
-  focused?: boolean
   focusable?: boolean
-  textContentType?: TextInputIOSProps['textContentType']
 }
 
 const Input = React.forwardRef(
-  (
-    {
-      style,
-      inputStyle,
-      name,
-      label,
-      placeholder,
-      value,
-      onChangeText,
-      onBlur,
-      onFocus,
-      onKeyPress,
-      secure,
-      focused,
-      focusable,
-      textContentType,
-    }: InputProps,
-    ref
-  ) => (
-    <View style={style}>
-      {label && <Label>{label}</Label>}
-      <Base
-        innerRef={ref}
-        style={inputStyle}
-        name={name}
-        value={value}
-        onChangeText={onChangeText}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        onKeyPress={onKeyPress}
-        placeholder={placeholder}
-        placeholderTextColor="var(--dark-moderate-blue-30)"
-        textContentType={textContentType}
-        secureTextEntry={secure}
-        focused={focused}
-        focusable={focusable}
-      />
-    </View>
-  )
+  ({ style, inputStyle, name, label, secure, focusable, ...props }: InputProps, ref) => {
+    const [focused, setFocused] = React.useState(false)
+    return (
+      <View style={style}>
+        {label && <Label>{label}</Label>}
+        <Base
+          {...props}
+          innerRef={ref}
+          style={inputStyle}
+          name={name}
+          placeholderTextColor="var(--dark-moderate-blue-30)"
+          secureTextEntry={secure}
+          focused={focused}
+          focusable={focusable}
+          onFocus={e => {
+            setFocused(true)
+            if (props.onFocus) {
+              props.onFocus(e)
+            }
+          }}
+          onBlur={e => {
+            setFocused(false)
+            if (props.onBlur) {
+              props.onBlur(e)
+            }
+          }}
+        />
+      </View>
+    )
+  }
 )
 
 export default Input

client/src/components/Router/index.tsx

@@ -13,7 +13,9 @@ export default () => {
     return () => {}
   }, [userState.user && userState.user.id])
 
-  console.log('userState', userState)
+  if (!userState.user && userState.loggingIn) {
+    return null
+  }
 
   return (
     <Router>

client/src/generated/graphql.tsx

@@ -187,7 +187,7 @@ export type UserInput = {
 export type MeQueryVariables = {}
 
 export type MeQuery = { __typename?: 'Query' } & {
-  me: { __typename?: 'User' } & Pick<User, '_id'> & {
+  me: { __typename?: 'User' } & Pick<User, '_id' | 'isOnboarded'> & {
       profile: { __typename?: 'Profile' } & Pick<Profile, 'firstName' | 'lastName'>
       emails: Maybe<Array<{ __typename?: 'EmailRecord' } & Pick<EmailRecord, 'address'>>>
     }
@@ -204,6 +204,7 @@ export const MeDocument = gql`
       emails {
         address
       }
+      isOnboarded
     }
   }
 `

client/src/screens/Home/Home.tsx

@@ -1,9 +1,27 @@
 import * as React from 'react'
 import { View, Text } from 'react-native'
+import gql from 'graphql-tag'
 import styled from 'styled-components'
+import { useMeQuery } from '../../generated/graphql'
 import { SidebarContext } from '../../components/MainLayout'
 import Dashboard from './components/Dashboard'
-import OnboardBox from './components/OnboardBox'
+import Onboard from './components/Onboard'
+
+export const GET_USER = gql`
+  query Me {
+    me {
+      _id
+      profile {
+        firstName
+        lastName
+      }
+      emails {
+        address
+      }
+      isOnboarded
+    }
+  }
+`
 
 const Wrapper = styled(View)<{ sidebarOpen: boolean }>`
   flex: 1;
@@ -24,15 +42,18 @@ const Title = styled(Text)`
 `
 
 const Home = () => {
+  const { data, loading } = useMeQuery()
   const { sidebarOpen } = React.useContext(SidebarContext)
-  const firstName = 'Jason'
-  const isOnboarded = false
+  const firstName = data && data.me && data.me.profile.firstName
+  const isOnboarded = data && data.me && data.me.isOnboarded
   return (
     <Wrapper sidebarOpen={sidebarOpen}>
-      <View style={{ width: '75%' }}>
-        <Title>{`Hello, ${firstName}!`}</Title>
-        {isOnboarded ? <Dashboard /> : <OnboardBox />}
-      </View>
+      {loading ? null : (
+        <View style={{ width: '75%', height: '75%', overflow: 'hidden' }}>
+          <Title>{`Hello, ${firstName}!`}</Title>
+          {isOnboarded ? <Dashboard /> : <Onboard />}
+        </View>
+      )}
     </Wrapper>
   )
 }