Add updating to groups

clique-orbital · Jun 27, 2019 · 755cb82 · 755cb82
1 parent a4c8e4a
commit 755cb82
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 47 deletions.
diff --git a/src/screens/Main/GroupScreen.js b/src/screens/Main/GroupScreen.js
@@ -165,7 +165,8 @@ class GroupScreen extends Component {
           onPress={() =>
             this.props.navigation.navigate("Chat", {
               group: item,
-              image: { uri: item.photoURL }
+              image: { uri: item.photoURL },
+              groupID: item.groupID
             })
           }
         >

diff --git a/src/screens/Main/Groups/ChatScreen.js b/src/screens/Main/Groups/ChatScreen.js
@@ -45,12 +45,12 @@ class ChatScreen extends Component {
     this.sendMessage = this.sendMessage.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.showEventModal = this.showEventModal.bind(this);
-    // this.sameDay = this.sameDay.bind(this);
   }
 
   messagesRef = firebase.database().ref("messages");
 
   static navigationOptions = ({ navigation }) => {
+    const group = navigation.getParam("group");
     return {
       headerTintColor: "#fff",
       headerTitle: (
@@ -64,7 +64,7 @@ class ChatScreen extends Component {
           }}
           onPress={() =>
             navigation.navigate("GroupInformation", {
-              group: navigation.getParam("group")
+              group
             })
           }
         >
@@ -82,15 +82,15 @@ class ChatScreen extends Component {
               textAlignVertical: "center"
             }}
           >
-            {navigation.getParam("group").groupName}
+            {group.groupName}
           </Text>
         </TouchableOpacity>
       ),
       headerRight: (
         <TouchableOpacity
           onPress={() =>
             navigation.navigate("GroupCalendar", {
-              groupID: navigation.getParam("group").groupID,
+              groupID: group.groupID,
               title: "Group Calendar"
             })
           }
@@ -147,7 +147,6 @@ class ChatScreen extends Component {
   };
 
   sendMessage = () => {
-    console.log("Sending Message");
     const groupID = this.state.groupID;
     if (this.state.textMessage.length > 0) {
       const msgID = this.messagesRef.child(`${groupID}`).push().key;
@@ -263,28 +262,8 @@ class ChatScreen extends Component {
       this.props.dispatch(populateNotAttending(members));
     });
     this.props.dispatch(toggleEventModal(true, event));
-    // this.props.navigation.navigate("EventModal", {
-    //   modalVisibility: true
-    // });
   };
 
-  // sameDay = (dateOfLastMsg, dayOfLastMsg) => {
-  //   console.log("props date = " + this.props.prevDate);
-  //   if (
-  //     dateOfLastMsg === this.state.dateOfLastMsg &&
-  //     dayOfLastMsg === this.state.dayOfLastMsg
-  //   ) {
-  //     console.log("in true. " + `${dateOfLastMsg}/${dayOfLastMsg}`);
-  //     return true;
-  //   }
-  //   console.log("in false. " + `${dateOfLastMsg}/${dayOfLastMsg}`);
-  //   this.setState({
-  //     dateOfLastMsg,
-  //     dayOfLastMsg
-  //   });
-  //   return false;
-  // };
-
   renderRow = ({ item }) => {
     if (item.messageType === "text") {
       return (

diff --git a/src/screens/Main/Groups/CreateGroups.js b/src/screens/Main/Groups/CreateGroups.js
@@ -23,7 +23,9 @@ class GroupMembersSelect extends React.Component {
         goBack={() => this.props.navigation.goBack()}
         onSubmit={formValues =>
           this.props.navigation.navigate("GroupDetails", {
-            users: formValues
+            users: formValues,
+            title: "Create Groups",
+            type: "create",
           })
         }
       />

diff --git a/src/screens/Main/Groups/GroupDetails.js b/src/screens/Main/Groups/GroupDetails.js
@@ -11,7 +11,7 @@ import { Field, reduxForm } from "redux-form";
 
 import Text from "../../../components/Text";
 import ContinueButton from "../../../components/ContinueButton";
-import { createGroup } from "../../../store/actions/groups";
+import { createGroup, editGroup } from "../../../store/actions/groups";
 import defaultPicture from "../../../assets/default_profile.png";
 import ImagePicker from "../../../components/ImagePickerComponent";
 import HeaderTitle from "../../../components/HeaderTitle";
@@ -20,19 +20,25 @@ import Spinner from "../../../components/Spinner";
 const required = value => (value ? undefined : "Required");
 
 class GroupDetails extends React.Component {
-  static navigationOptions = () => {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+    }
+    this.handleSubmitCreate = this.handleSubmitCreate.bind(this);
+  }
+
+  static navigationOptions = ({ navigation }) => {
     return {
       headerTitle: (
         <View style={{ bottom: 5 }}>
-          <HeaderTitle title="New Group" />
+          <HeaderTitle title={navigation.getParam("title")} />
         </View>
       )
     };
   };
 
-  state = { loading: false };
-
-  handleSubmit = values => {
+  handleSubmitCreate = values => {
     this.setState({ loading: true });
     this.props
       .dispatch(
@@ -50,6 +56,24 @@ class GroupDetails extends React.Component {
       });
   };
 
+  handleSubmitEdit = values => {
+    this.setState({ loading: true });
+    this.props
+      .dispatch(
+        editGroup(
+          this.props.navigation.getParam("groupID"),
+          values.groupname,
+          values.grouppicture.uri,
+        )
+      )
+      .then(group => {
+        this.props.navigation.navigate("GroupInformation", {
+          group,
+          image: { uri: group.photoURL }
+        })
+      });
+  };
+
   renderImagePicker = props => {
     return (
       <ImagePicker
@@ -70,7 +94,7 @@ class GroupDetails extends React.Component {
     );
   };
 
-  renderGroupPicture = () => {
+  render() {
     return (
       <View style={styles.container}>
         <View style={{ marginTop: "15%" }}>
@@ -91,18 +115,14 @@ class GroupDetails extends React.Component {
         </View>
         <TouchableOpacity
           title="Create"
-          onPress={this.props.handleSubmit(this.handleSubmit.bind(this))}
+          onPress={this.props.handleSubmit(this.props.navigation.getParam("type") === "create" ? this.handleSubmitCreate : this.handleSubmitEdit)}
           style={{ position: "absolute", top: "90%", left: "80%" }}
         >
           <ContinueButton name="arrow-forward" />
         </TouchableOpacity>
         {this.state.loading && <Spinner />}
       </View>
     );
-  };
-
-  render() {
-    return this.renderGroupPicture();
   }
 }
 
@@ -127,8 +147,11 @@ const styles = StyleSheet.create({
   }
 });
 
-const mapStateToProps = state => {
-  return { user: state.authReducer.user };
+const mapStateToProps = (state, ownProps) => {
+  return {
+    user: state.authReducer.user,
+    group: state.groupsReducer.groups[ownProps.navigation.getParam("groupID")]
+  };
 };
 
 let form = reduxForm({ form: "groupDetails" })(GroupDetails);

diff --git a/src/screens/Main/Groups/GroupInformation.js b/src/screens/Main/Groups/GroupInformation.js
@@ -8,7 +8,6 @@ import {
   Alert
 } from "react-native";
 import SwipeOut from "react-native-swipeout";
-
 import GroupPicture from "../../../components/GroupPicture";
 import firebase from "react-native-firebase";
 import Text from "../../../components/Text";
@@ -22,7 +21,10 @@ import { removeGroupMessages } from "../../../store/actions/messages";
 class GroupInformation extends React.Component {
   static navigationOptions = ({ navigation }) => {
     const group = navigation.getParam("group");
-
+    navigation.goBack = () => navigation.navigate("Chat", {
+      group,
+      image: navigation.getParam("image")
+    });
     return {
       headerTintColor: "#fff",
       headerStyle: {
@@ -47,11 +49,25 @@ class GroupInformation extends React.Component {
       ),
       headerLeft: (
         <TouchableOpacity
-          onPress={() => navigation.goBack()}
+          onPress={() => {
+            navigation.goBack();
+          }}
           style={{ alignSelf: "flex-start", paddingTop: 10, paddingLeft: 10 }}
         >
           <MyIcon name="arrow-back" color="white" size={25} type="material" />
         </TouchableOpacity>
+      ),
+      headerRight: (
+        <TouchableOpacity
+          onPress={() => navigation.navigate("GroupDetails", {
+            title: "Edit Group",
+            type: "edit",
+            groupID: group.groupID
+          })}
+          style={{ paddingTop: 12, paddingRight: 10, alignSelf: "flex-start" }}
+        >
+          <Text white style={{ fontSize: 20 }}>Edit</Text>
+        </TouchableOpacity>
       )
     };
   };
@@ -228,8 +244,7 @@ class GroupInformation extends React.Component {
 const mapStateToProps = (state, ownProps) => {
   return {
     self: state.authReducer.user,
-    group:
-      state.groupsReducer.groups[ownProps.navigation.getParam("group").groupID]
+    group: state.groupsReducer.groups[ownProps.navigation.getParam("group").groupID],
   };
 };
 

diff --git a/src/store/actions/groups.js b/src/store/actions/groups.js
@@ -107,6 +107,19 @@ const addGroupPicture = async pictureUri => {
     });
 };
 
+export const editGroup = (groupID, groupName, groupPicture) => async dispatch => {
+  const url = await addGroupPicture(groupPicture);
+  await db.ref(`groups/${groupID}/groupName`).set(groupName);
+  await db.ref(`groups/${groupID}/photoURL`).set(url);
+  const groupSnapshot = await db.ref(`groups/${groupID}`).once("value");
+  const group = groupSnapshot.val();
+  dispatch(addNewGroup(groupID, group));
+  return group;
+  // db.ref(`groups/${groupID}`).once("value", snapshot => {
+  //   dispatch(addNewGroup(groupID, snapshot.val()))
+  // })
+}
+
 export const createGroup = (
   groupName,
   groupPicture,
@@ -121,7 +134,7 @@ export const createGroup = (
     users_info = { ...users_info, [user.uid]: true };
   }
 
-  const url = await addGroupPicture(groupPicture, filetype);
+  const url = await addGroupPicture(groupPicture, filetype); //filetype not used?
   newGroupCreator(groupName, groupID, url, users_info, data).then(() => {
     return db
       .ref("groups")