feat: login (#21)

feat: login

Author: nampdn

package.json

@@ -25,14 +25,19 @@
     "lint": "tslint -p ."
   },
   "dependencies": {
+    "apollo-boost": "0.3.1",
     "bara": "2.4.0",
-    "bara-react": "3.0.0",
+    "bara-react": "3.1.0",
     "bara-react-icons": "1.1.0",
+    "bara-react-yofi": "1.1.0",
     "electron-store": "3.2.0",
     "electron-updater": "4.0.6",
+    "graphql": "14.3.0",
+    "graphql-tag": "2.10.1",
     "jsonfile": "5.0.0",
     "mkdirp": "0.5.1",
     "react": "16.8.6",
+    "react-apollo": "2.5.5",
     "react-app-polyfill": "0.2.2",
     "react-dom": "16.8.6",
     "react-native": "0.59.4",

src/App.tsx

@@ -1,39 +1,70 @@
-import { BaraProvider, TouchableOpacity } from 'bara-react'
+import { BaraProvider, TouchableOpacity, useBarnState } from 'bara-react'
 import React, { Component } from 'react'
 import { Platform, StyleSheet, Text, View } from 'react-native'
 
+import { ApolloProvider } from 'react-apollo'
+import { client } from './graphql'
+
 import { Octicons as Icon } from 'bara-react-icons/es'
 
-import { SideBar, SideBarItem } from './components/SideBar'
+import { LoginScreen } from './features/login'
+
+import {
+  SideBar,
+  SideBarContent,
+  SideBarItem,
+  SideBarLayout,
+  SideBarSeparator,
+  SideBarSpace,
+} from 'bara-react-yofi'
 import { GlobalStyles } from './GlobalStyles'
 
 interface Props {}
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <BaraProvider>
+export const App = () => {
+  const [horizontal] = useBarnState('horizontal', false)
+  return (
+    <BaraProvider>
+      <ApolloProvider client={client}>
         <>
           <GlobalStyles />
-          <View style={styles.container}>
-            <SideBar
-              horizontal={false}
-              horizontalSide="bottom"
-              verticalSide="left"
-            >
-              <SideBarItem name="home" iconMaterial="home" />
+          <SideBarLayout
+            horizontal={horizontal}
+            horizontalSide="bottom"
+            verticalSide="left"
+          >
+            <SideBar name="sidebar-demo" horizontal={horizontal}>
+              <SideBarItem name="home" iconMaterial="home" label="Home" />
+              <SideBarSeparator horizontal={horizontal} />
+              <SideBarItem
+                name="light-bulb"
+                iconOcticon="light-bulb"
+                label="Light"
+              />
+              <SideBarSpace />
+              <SideBarSeparator horizontal={horizontal} />
+              <SideBarItem
+                name="rotate"
+                iconOcticon="screen-normal"
+                label="Rotate"
+              />
               <SideBarItem
                 name="settings"
                 iconMaterial="settings"
                 label="Settings"
               />
             </SideBar>
-          </View>
+            <SideBarContent style={{ backgroundColor: '#ccc' }}>
+              <LoginScreen />
+            </SideBarContent>
+          </SideBarLayout>
         </>
-      </BaraProvider>
-    )
-  }
+      </ApolloProvider>
+    </BaraProvider>
+  )
 }
 
+export default App
+
 const styles = StyleSheet.create({
   container: {
     alignItems: 'stretch',

src/bara.ts

@@ -1,18 +1,33 @@
-import { useInitStream } from 'bara'
+import {
+  addDebugListener,
+  setBarnState,
+  useBarn,
+  useBarnStream,
+  useInitStream,
+} from 'bara'
 import { useComponentsStream } from 'bara-react'
 
-import { whenSideBarItemPress } from './components/SideBar'
+import { whenSideBarItemPress } from 'bara-react-yofi'
 import { useWelcome } from './features/welcome'
 
 export const useStreams = () => {
+  useBarnStream({ horizontal: false })
   useInitStream()
   useComponentsStream()
 }
 
 export const useTriggers = () => {
+  let horizontal = false
   useWelcome()
-  whenSideBarItemPress('settings')(() => {
-    alert('Setting Pressed!')
+  useBarn('horizontal', (h: boolean) => {
+    horizontal = h
+  })
+  whenSideBarItemPress('rotate')(() => {
+    if (horizontal) {
+      setBarnState('horizontal', false)
+    } else {
+      setBarnState('horizontal', true)
+    }
   })
 }
 

src/components/Layout/api.ts

@@ -0,0 +1,29 @@
+import { setBarnState } from 'bara'
+import { useBarnState } from 'bara-react'
+import { useEffect } from 'react'
+import { Dimensions } from 'react-native'
+
+export const BARN_REACT_DIMENSIONS_KEY = 'dev.barajs.react.dimensions'
+export const BARN_REACT_ORIENTATION_KEY = 'dev.barajs.react.orientation'
+
+export function useDimensions() {
+  const [dimensions, setDimensions] = useBarnState(BARN_REACT_DIMENSIONS_KEY, {
+    screen: Dimensions.get('screen'),
+    window: Dimensions.get('window'),
+  })
+
+  useEffect(() => {
+    Dimensions.addEventListener('change', setDimensions)
+    return () => Dimensions.removeEventListener('change', setDimensions)
+  }, [])
+
+  return dimensions
+}
+
+export function useOrientation() {
+  const dimensions = useDimensions()
+  const [orientation] = useBarnState(BARN_REACT_ORIENTATION_KEY, {
+    portrait: true,
+    landscape: false,
+  })
+}

src/components/Layout/context.ts

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react'
+
+export type OrientationType = 'landscape' | 'portrait'
+
+export interface LayoutProviderState {
+  appOrientation: OrientationType
+  deviceOrientation: OrientationType
+}
+
+// export const LayoutContext = React.createContext<LayoutProviderState>(
+// getLayoutState(),
+// )
+
+// export const getLayoutState = () => {
+// const appOrientation = 'landscape'
+// const deviceOrientation = 'landscape'
+// return { appOrientation, deviceOrientation }
+// }

src/components/Layout/index.ts

@@ -0,0 +1 @@
+export * from './api'