weechatRN

commit 634adda70e2f5c96ffe66bd10fbb247c78b03dbc
parent c9ad9334d8a50da5fe0ae4eaf29638fb33829168
Author: Johan Lindskogen <johan.lindskogen@gmail.com>
Date:   Sun,  1 Apr 2018 16:47:08 +0200

Handle change currentBuffer in redux

Diffstat:
M
src/store/index.ts
 | 
14
+++++++++++++-
M
src/usecase/App.tsx
 | 
88
+++++++++++++++++++++++++++++++++++++++++++++++--------------------------------
M
src/usecase/buffers/ui/BufferList.tsx
 | 
16
+++++++---------

3 files changed, 72 insertions(+), 46 deletions(-)
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -5,6 +5,7 @@ import lines, { LineState } from "./lines";
 
 type AppState = {
   connected: boolean;
+  currentBufferId: string | null;
 };
 
 export type StoreState = {
@@ -13,12 +14,23 @@ export type StoreState = {
   lines: LineState;
 };
 
-const app = (state: AppState = { connected: false }, action) => {
+const initialState: AppState = {
+  connected: false,
+  currentBufferId: null
+};
+
+const app = (state: AppState = initialState, action) => {
   switch (action.type) {
     case "FETCH_VERSION":
       return {
+        ...state,
         connected: true
       };
+    case "CHANGE_CURRENT_BUFFER":
+      return {
+        ...state,
+        currentBufferId: action.bufferId
+      };
     default:
       return state;
   }
diff --git a/src/usecase/App.tsx b/src/usecase/App.tsx
@@ -1,5 +1,11 @@
 import * as React from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  SafeAreaView,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet
+} from "react-native";
 import { connect } from "react-redux";
 import * as _ from "lodash";
 
@@ -9,38 +15,36 @@ import { changeCurrentBuffer } from "./buffers/actions/BufferActions";
 
 import BufferContainer from "./buffers/ui/BufferContainer";
 import BufferList from "./buffers/ui/BufferList";
+import { StoreState } from "../store";
 
 interface Props {
   buffers: WeechatBuffer[];
-  currentBufferName: string;
-  fetchLinesForBuffer: (string) => void;
-}
-
-interface State {
   currentBufferId: string | null;
+  currentBuffer: WeechatBuffer | null;
+  fetchLinesForBuffer: (string) => void;
+  dispatch: (any) => void;
 }
 
-class App extends React.Component<Props, State> {
+class App extends React.Component<Props> {
   drawer: Drawer;
 
-  state: State = { currentBufferId: null };
-
   changeCurrentBuffer = buffer => {
-    // this.props.dispatch(changeCurrentBuffer(bufferName));
     this.drawer.close();
+    this.props.dispatch({ type: "CHANGE_CURRENT_BUFFER", bufferId: buffer.id });
     this.props.fetchLinesForBuffer(buffer.id);
-    this.setState({
-      currentBufferId: buffer.id
-    });
   };
   render() {
-    const { currentBufferId } = this.state;
-    const { buffers, currentBufferName } = this.props;
+    const {
+      buffers,
+      currentBufferId,
+      currentBuffer,
+      fetchLinesForBuffer
+    } = this.props;
 
     const sidebar = (
       <BufferList
         buffers={_.orderBy(buffers, ["number"])}
-        currentBufferName={currentBufferName}
+        currentBufferId={currentBufferId}
         onSelectBuffer={this.changeCurrentBuffer}
       />
     );
@@ -57,36 +61,48 @@ class App extends React.Component<Props, State> {
           ref={d => (this.drawer = d)}
           tweenHandler={Drawer.tweenPresets.parallax}
         >
-          <View style={styles.topbar}>
-            <View style={styles.channels}>
-              <TouchableOpacity
-                style={styles.channelsButton}
-                onPress={() => this.drawer.open()}
-              >
-                <Text style={styles.channelsButtonText}>#</Text>
-              </TouchableOpacity>
-            </View>
-            <View>
-              <Text style={styles.topbarText}>{currentBufferName}</Text>
+          <SafeAreaView style={styles.container}>
+            <View style={styles.topbar}>
+              <View style={styles.channels}>
+                <TouchableOpacity
+                  style={styles.channelsButton}
+                  onPress={() => this.drawer.open()}
+                >
+                  <Text style={styles.channelsButtonText}>#</Text>
+                </TouchableOpacity>
+              </View>
+              <View>
+                <Text style={styles.topbarText}>
+                  {currentBuffer && currentBuffer.short_name}
+                </Text>
+              </View>
+              <View style={styles.channels} />
             </View>
-            <View style={styles.channels} />
-          </View>
-          <BufferContainer bufferId={currentBufferId} />
+            <BufferContainer
+              fetchLinesForBuffer={fetchLinesForBuffer}
+              bufferId={currentBufferId}
+            />
+          </SafeAreaView>
         </Drawer>
       </View>
     );
   }
 }
 
-export default connect(state => ({
-  buffers: _.values(state.buffers)
-}))(App);
+export default connect((state: StoreState) => {
+  const currentBufferId = state.app.currentBufferId;
+  const currentBuffer = currentBufferId && state.buffers[currentBufferId];
+
+  return {
+    buffers: _.values(state.buffers),
+    currentBufferId,
+    currentBuffer
+  };
+})(App);
 
 const styles = StyleSheet.create({
   topbar: {
     flexDirection: "row",
-    paddingTop: 20,
-    height: 70,
     backgroundColor: "#333",
     justifyContent: "center",
     alignItems: "center"
@@ -115,6 +131,6 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-    backgroundColor: "#89a"
+    backgroundColor: "#333"
   }
 });
diff --git a/src/usecase/buffers/ui/BufferList.tsx b/src/usecase/buffers/ui/BufferList.tsx
@@ -10,13 +10,13 @@ import {
 
 interface BufferListItemProps {
   buffer: WeechatBuffer;
-  currentBufferName: string;
+  currentBufferId: string;
   onSelectBuffer: (b: WeechatBuffer) => any;
 }
 
 const BufferListItem = ({
   buffer,
-  currentBufferName,
+  currentBufferId,
   onSelectBuffer
 }: BufferListItemProps) => (
   <TouchableHighlight
@@ -24,9 +24,7 @@ const BufferListItem = ({
     underlayColor="#F2777A"
     style={[
       styles.listItem,
-      currentBufferName === buffer.short_name
-        ? { backgroundColor: "#F2777A" }
-        : null
+      currentBufferId === buffer.id ? { backgroundColor: "#F2777A" } : null
     ]}
   >
     <View style={styles.row}>
@@ -34,7 +32,7 @@ const BufferListItem = ({
         <Text
           style={[
             styles.listItemText,
-            currentBufferName !== buffer.short_name ? { color: "#888" } : null
+            currentBufferId !== buffer.id ? { color: "#888" } : null
           ]}
         >
           {buffer.short_name || buffer.full_name}
@@ -47,13 +45,13 @@ const BufferListItem = ({
 
 interface Props {
   buffers: WeechatBuffer[];
-  currentBufferName: string;
+  currentBufferId: string | null;
   onSelectBuffer: (b: WeechatBuffer) => any;
 }
 
 export default class BufferList extends React.Component<Props> {
   render() {
-    const { buffers, onSelectBuffer, currentBufferName } = this.props;
+    const { buffers, onSelectBuffer, currentBufferId } = this.props;
 
     return (
       <View style={styles.container}>
@@ -66,7 +64,7 @@ export default class BufferList extends React.Component<Props> {
             <BufferListItem
               buffer={item}
               onSelectBuffer={onSelectBuffer}
-              currentBufferName={currentBufferName}
+              currentBufferId={currentBufferId}
             />
           )}
         />