setup router and login/signup

Author: TrillCyborg

client/src/fonts/ITCAvantGardePro-Bold.otf renamed to client/src/assets/fonts/ITCAvantGardePro-Bold.otf

@@ -2,13 +2,16 @@ import * as React from 'react'
 import { ApolloProvider } from 'react-apollo'
 import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'
 import Router from '../Router'
+import { UserProvider } from '../../screens/Login/UserContext'
 import { client } from '../../utils/apollo'
 
 const App = () => {
   return (
     <ApolloProvider client={client}>
       <ApolloHooksProvider client={client}>
-        <Router />
+        <UserProvider>
+          <Router />
+        </UserProvider>
       </ApolloHooksProvider>
     </ApolloProvider>
   )

client/src/fonts/ITCAvantGardePro-Extralight.otf renamed to client/src/assets/fonts/ITCAvantGardePro-Extralight.otf

@@ -0,0 +1,19 @@
+import { View } from 'react-native'
+import styled from 'styled-components'
+
+interface BoxProps {
+  width?: string
+  height?: number
+  maxWidth?: number
+}
+
+const Box = styled(View)<BoxProps>`
+  width: ${props => props.width || '100%'};
+  max-width: ${props => props.maxWidth || 600}px;
+  height: ${props => props.height || 500}px;
+  background: #edeef3;
+  box-shadow: 0 100px 100px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+`
+
+export default Box

client/src/fonts/ITCAvantGardePro-Medium.otf renamed to client/src/assets/fonts/ITCAvantGardePro-Medium.otf

@@ -0,0 +1 @@
+export { default } from './Box'

client/src/fonts/ITCAvantGardePro-Regular.otf renamed to client/src/assets/fonts/ITCAvantGardePro-Regular.otf

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { Text, TouchableOpacity } from 'react-native'
+import styled from 'styled-components'
+
+const Wrapper = styled(TouchableOpacity)`
+  background: #575b7e;
+  border-radius: 30px;
+  text-align: center;
+  box-shadow: 0 20px 30px 0 rgba(87, 91, 126, 0.3);
+  padding: 17px 45px;
+`
+
+const Label = styled(Text)`
+  font-size: 18px;
+  font-weight: 900;
+  color: #ffffff;
+  letter-spacing: -0.5px;
+`
+
+interface ButtonProps {
+  children: string
+  onPress: () => void
+}
+
+const Button = ({ children, onPress }: ButtonProps) => (
+  <Wrapper onPress={onPress} activeOpacity={0.6}>
+    <Label>{children}</Label>
+  </Wrapper>
+)
+
+export default Button

client/src/fonts/ITCAvantGardePro-Semibold.otf renamed to client/src/assets/fonts/ITCAvantGardePro-Semibold.otf

@@ -0,0 +1 @@
+export { default } from './Button'

client/src/assets/images/logo-full.svg

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { View, Text, TextInput, TextInputIOSProps } from 'react-native'
+import styled from 'styled-components'
+
+const Base = styled(TextInput)`
+  background: #ffffff;
+  padding: 12px 20px;
+  box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.04);
+  border-radius: 2.67px;
+  font-size: 20px;
+  font-weight: 900;
+  color: #575b7e;
+  letter-spacing: -0.91px;
+`
+
+const Label = styled(Text)`
+  margin-bottom: 8px;
+  font-size: 13.33px;
+  font-weight: 900;
+  color: #575b7e;
+  letter-spacing: -0.61px;
+`
+
+interface InputProps {
+  style?: any
+  label?: string
+  placeholder?: string
+  value?: string
+  onChangeText: (text: string) => void
+  secure?: boolean
+  textContentType?: TextInputIOSProps['textContentType']
+}
+
+const Input = ({
+  style,
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  secure,
+  textContentType,
+}: InputProps) => (
+  <View style={style}>
+    {label && <Label>{label}</Label>}
+    <Base
+      value={value}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      placeholderTextColor="rgba(67, 91, 126, 0.3)"
+      textContentType={textContentType}
+      secureTextEntry={secure}
+    />
+  </View>
+)
+
+export default Input

client/src/components/App/App.tsx

@@ -0,0 +1 @@
+export { default } from './Input'

client/src/components/Box/Box.tsx

@@ -1,5 +1,13 @@
-import { NativeRouter, Route as NativeRoute, Link as NativeLink } from 'react-router-native'
+import {
+  NativeRouter,
+  Route as NativeRoute,
+  Link as NativeLink,
+  Switch as NativeSwitch,
+  Redirect as NativeRedirect,
+} from 'react-router-native'
 
 export let Router = NativeRouter
 export let Route = NativeRoute
 export let Link = NativeLink
+export let Switch = NativeSwitch
+export let Redirect = NativeRedirect

client/src/components/Box/index.tsx

@@ -1,5 +1,13 @@
-import { BrowserRouter, Route as WebRoute, Link as WebLink } from 'react-router-dom'
+import {
+  BrowserRouter,
+  Route as WebRoute,
+  Link as WebLink,
+  Switch as WebSwitch,
+  Redirect as WebRedirect,
+} from 'react-router-dom'
 
 export let Router = BrowserRouter
 export let Route = WebRoute
 export let Link = WebLink
+export let Switch = WebSwitch
+export let Redirect = WebRedirect

client/src/components/Button/Button.tsx

@@ -1,39 +1,38 @@
 import * as React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import { Router, Route, Link } from './Router'
+import { Text } from 'react-native'
+import { Router, Route, Switch, Redirect, Link } from './Router'
+import Login from '../../screens/Login'
+import { useUserContext } from '../../screens/Login/UserContext'
 
 const Home = () => <Text>Home</Text>
-const About = () => <Text>About</Text>
 
 export default () => {
+  const { userState, getUser } = useUserContext()
+  React.useEffect(() => {
+    getUser()
+  }, [userState.user && userState.user.id])
   return (
     <Router>
-      <View style={styles.container}>
-        <View style={styles.nav}>
-          <Link to="/">
-            <Text>Home</Text>
-          </Link>
-          <Link to="/about">
-            <Text>About</Text>
-          </Link>
-        </View>
-
-        <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
-      </View>
+      {userState.loggingIn ? null : userState.user ? (
+        <Route
+          path="/"
+          render={() => (
+            <Switch>
+              <Route path="/" exact component={Home} />
+              {/* <Route path="/policies" component={Policies} /> */}
+              <Route path="*" render={() => <Redirect to="/" />} />
+            </Switch>
+          )}
+        />
+      ) : (
+        <Switch>
+          <Route path="/login" component={Login} />
+          <Route path="/signup" component={Login} />
+          <Route path="*" render={() => <Redirect to="/login" />} />
+        </Switch>
+      )}
     </Router>
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  nav: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-})
+export { Router, Route, Switch, Redirect, Link }