Partners feature

assets/jsicons/detailAboutUs/Branch.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SvgXml } from 'react-native-svg';
+
+export default function BranchIcon() {
+  const branchicon = `
+  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code-branch" class="svg-inline--fa fa-code-branch fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#3B3B3B" d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"></path></svg>`;
+  const BranchIcon = () => <SvgXml xml={branchicon} width="25" height="25" />;
+
+  return <BranchIcon />;
+}

assets/jsicons/detailAboutUs/Handshake.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SvgXml } from 'react-native-svg';
+
+export default function HandshakeIcon() {
+  const handshakeicon = `
+  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="handshake" class="svg-inline--fa fa-handshake fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 684 512"><path fill="#3B3B3B" d="M434.7 64h-85.9c-8 0-15.7 3-21.6 8.4l-98.3 90c-.1.1-.2.3-.3.4-16.6 15.6-16.3 40.5-2.1 56 12.7 13.9 39.4 17.6 56.1 2.7.1-.1.3-.1.4-.2l79.9-73.2c6.5-5.9 16.7-5.5 22.6 1 6 6.5 5.5 16.6-1 22.6l-26.1 23.9L504 313.8c2.9 2.4 5.5 5 7.9 7.7V128l-54.6-54.6c-5.9-6-14.1-9.4-22.6-9.4zM544 128.2v223.9c0 17.7 14.3 32 32 32h64V128.2h-96zm48 223.9c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zM0 384h64c17.7 0 32-14.3 32-32V128.2H0V384zm48-63.9c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16c0-8.9 7.2-16 16-16zm435.9 18.6L334.6 217.5l-30 27.5c-29.7 27.1-75.2 24.5-101.7-4.4-26.9-29.4-24.8-74.9 4.4-101.7L289.1 64h-83.8c-8.5 0-16.6 3.4-22.6 9.4L128 128v223.9h18.3l90.5 81.9c27.4 22.3 67.7 18.1 90-9.3l.2-.2 17.9 15.5c15.9 13 39.4 10.5 52.3-5.4l31.4-38.6 5.4 4.4c13.7 11.1 33.9 9.1 45-4.7l9.5-11.7c11.2-13.8 9.1-33.9-4.6-45.1z"></path></svg>`;
+  const HandshakeIcon = () => (
+    <SvgXml xml={handshakeicon} width="35" height="35" />
+  );
+
+  return <HandshakeIcon />;
+}

components/Animals/AnimalModal.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Modal, View, TouchableOpacity, Text } from 'react-native';
 
 //import icons
@@ -11,10 +11,10 @@ import Animals from '../Animals/Animals';
 //import styles
 import styles from '../../constants/Animals/AnimalModal';
 
-const AnimalModal = props => {
+const AnimalModal = (props) => {
   return (
     <Modal
-      animationType='fade'
+      animationType="fade"
       transparent={true}
       visible={props.isModalVisible}
       onRequestClose={() => props.setIsModalVisible(!props.isModalVisible)}

components/Partners/PartnersModal.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { Alert, Modal, View, TouchableOpacity, Text } from 'react-native';
+import BackArrow from '../../assets/jsicons/miscIcons/BackArrow';
+
+import SearchBar from '../../components/Partners/SearchBar';
+
+// For connecting Partners
+import { getConnections } from '../../store/actions';
+
+import styles from '../../constants/Partners/PartnerModal';
+const PartnersModal = (props) => {
+  const [partners, setPartners] = useState([]);
+
+  const getConnections = async () => {
+    try {
+      const partner = await props.getConnections(props.currentUserProfile.id);
+      if (Array.isArray(partner)) setPartners(partner);
+      else throw new Error(partner);
+    } catch (error) {
+      Alert.alert('Failed to get your partners');
+    }
+  };
+
+  useEffect(() => {
+    getConnections();
+  }, []);
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={props.isPartnersModalVisable}
+      onRequestClose={() =>
+        props.setIsPartnersModalVisible(!props.isPartnersModalVisable)
+      }
+    >
+      <View style={styles.modalContainer}>
+
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              props.setIsPartnersModalVisible(!props.isPartnersModalVisible)
+            }
+          >
+            <BackArrow />
+          </TouchableOpacity>
+        </View>
+        <SearchBar />
+        {/* {props.currentUserProfile.roles === 'conservationists'} */}
+      </View>
+    </Modal>
+  );
+};
+
+export default PartnersModal;

components/Partners/SearchBar.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View, TextInput } from 'react-native';
+
+import Search from '../../assets/jsicons/SearchIcon';
+import styles from '../../constants/Partners/SearchBar';
+
+const SearchBar = () => {
+  return (
+    <View style={styles.background}>
+      <Search />
+      <TextInput></TextInput>
+    </View>
+  );
+};
+
+export default SearchBar;

components/Profile/ProfileBody.js

@@ -8,6 +8,7 @@ import Details from './tabs/Details';
 import Campaigns from './tabs/Campaigns';
 import Location from './tabs/Location';
 
+
 export default React.forwardRef((props, ref) => {
   const routes =
     props.profile.roles === 'supporter'
@@ -17,9 +18,11 @@ export default React.forwardRef((props, ref) => {
         ]
       : [
           { key: 'campaigns', title: 'Campaigns' },
-          { key: 'details', title: 'Details' }
+          { key: 'details', title: 'Details' },
         ];
 
+
+
   // If the profile in questions is an organization and has a location,
   // insert a tab in index 1 (in the middle as per designs)
   if (props.profile.roles === 'conservationist' && props.profile.location) {
@@ -28,12 +31,12 @@ export default React.forwardRef((props, ref) => {
 
   const [state, setState] = useState({
     index: 0,
-    routes
+    routes,
   });
 
-  const handleIndexChange = index => {
+  const handleIndexChange = (index) => {
     props.scrollToMaximizeContent(index === state.index);
-    setState(prevState => ({ ...prevState, index }));
+    setState((prevState) => ({ ...prevState, index }));
   };
 
   const renderTabBar = ({ navigationState }) => {
@@ -42,7 +45,7 @@ export default React.forwardRef((props, ref) => {
     const translateY = props.contentPaddingTop
       ? props.scrollY.interpolate({
           inputRange: [0, distance, distance * 2],
-          outputRange: [0, 0, distance]
+          outputRange: [0, 0, distance],
         })
       : 0;
 
@@ -59,7 +62,7 @@ export default React.forwardRef((props, ref) => {
                 backgroundColor: 'white',
                 borderBottomColor: `rgba(0, 255, 157, ${
                   state.index === i ? 1 : 0
-                })`
+                })`,
               }}
               onPress={() => handleIndexChange(i)}
             >
@@ -76,14 +79,14 @@ export default React.forwardRef((props, ref) => {
   const renderScene = SceneMap({
     campaigns: () => <Campaigns profile={props.profile} />,
     location: () => <Location profile={props.profile} />,
-    details: () => <Details profile={props.profile} />
+    details: () => <Details profile={props.profile} />,
   });
 
   return (
     <TabView
       sceneContainerStyle={{
         flex: 1,
-        paddingTop: 48
+        paddingTop: 48,
       }}
       navigationState={state}
       renderScene={renderScene}

components/Profile/tabs/Details.js

@@ -1,14 +1,25 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Text } from 'react-native';
-
+import { TouchableWithoutFeedback, TouchableOpacity } from 'react-native';
+import { connect } from 'react-redux';
 import styles from '../../../constants/Profile/tabs/Details';
 
 import FileIcon from '../../../assets/jsicons/detailAboutUs/File';
 import ConnectFurther from '../ConnectFurther';
+import HandshakeIcon from '../../../assets/jsicons/detailAboutUs/Handshake';
+import RocketIcon from '../../../assets/jsicons/detailAboutUs/Rocket';
+import BranchIcon from '../../../assets/jsicons/detailAboutUs/Branch';
+import PlusSignCircle from '../../../assets/jsicons/PlusSignCircle';
+import TakeAction from '../../../components/TakeAction/TakeActionCallToAction';
+
+import PartnersModal from '../../Partners/PartnersModal';
 
-const Details = props => {
+const Details = (props) => {
+  const { data } = props;
   const { profile } = props;
 
+  const [isPartnersModalVisible, setIsPartnersModalVisible] = useState(false);
+
   return (
     <View style={styles.container}>
       {profile.roles !== 'supporter' && (
@@ -19,8 +30,69 @@ const Details = props => {
               <Text style={styles.title}>{'About Us'}</Text>
             </View>
             <Text style={styles.body}>{profile.about_us}</Text>
-          </View>
 
+            <View style={styles.iconWrap}>
+              <RocketIcon />
+              <Text style={styles.title}>{'Support Our Mission'}</Text>
+            </View>
+            <Text style={styles.body}>
+              Donate funds to go towards the overall mission of our conservation
+              organization. Your donation will be used to support our team, our
+              daily activities and research.
+            </Text>
+            {/* // April 2020: Props needs to pass properly for donate button */}
+            {/* <View>
+              <TakeAction donate={props.data} />
+            </View> */}
+            {/* // April 2020: Projects will be added at a later time */}
+            {/* <View style={styles.iconWrap}>
+              <BranchIcon />
+              <Text style={styles.title}>
+                {'Projects Within Our Organization'}
+              </Text>
+            </View>
+            <Text style={styles.body}>
+              These projects are directly supported by us and are within our
+              organization. They have their own organization pages so the team
+              on the ground can better share the work they are doing in the
+              field.
+            </Text>
+            <View style={styles.ProjectPartnerSection}>
+              <TouchableOpacity style={styles.addProjectsButton}>
+                <PlusSignCircle />
+                <Text style={styles.buttonText}>Add a Project</Text>
+              </TouchableOpacity>
+            </View> */}
+            <View style={styles.iconWrap}>
+              <HandshakeIcon />
+              <Text style={styles.title}>{'Our Partners'}</Text>
+            </View>
+            <Text style={styles.body}>
+              These are the organizations that we are currently collaborating
+              with in order to spread awareness and raise the resources needed
+              to achieve our mission.
+            </Text>
+            <View style={styles.ProjectPartnerSection}>
+              {/* Code below commented out because by default the modal displays
+              for some reason...working on it. */}
+
+              {/* <PartnersModal
+                setIsPartnersModalVisible={setIsPartnersModalVisible}
+                isPartnersModalVisible={isPartnersModalVisible}
+              /> */}
+              <TouchableOpacity
+                style={styles.addProjectsButton}
+                onPress={() => {
+                  setIsPartnersModalVisible(true);
+                  console.log('plus clicked');
+                }}
+              >
+                <PlusSignCircle />
+
+                <Text style={styles.buttonText}>Add a Partner</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
           {/* Species and Habitats is a feature not yet in place */}
           {/* <View style={styles.sections}>
             <View style={styles.iconWrap}>
@@ -44,4 +116,8 @@ const Details = props => {
   );
 };
 
-export default Details;
+const mapStateToProps = (state) => ({
+  currentUserProfile: state.currentUserProfile,
+});
+
+export default connect(mapStateToProps, {})(Details);

constants/Partners/PartnerModal.js

@@ -0,0 +1,13 @@
+import { StyleSheet, Dimensions } from 'react-native';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    backgroundColor: 'lightgrey',
+    flexDirection: 'row',
+  },
+});
+export default styles;

constants/Partners/SearchBar.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  background: {
+    // backgroundColor: '#F0EEEE',
+    backgroundColor: 'darkgrey',
+    height: 50,
+    borderRadius: 5,
+    marginHorizontal: 15,
+    width: '80%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 10
+  },
+});
+
+export default styles;

constants/Profile/ProfileBody.js

@@ -2,22 +2,23 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
   },
   tabBar: {
     left: 0,
     right: 0,
     zIndex: 100,
     flexDirection: 'row',
     position: 'absolute',
-    backgroundColor: 'white'
+    backgroundColor: 'white',
   },
   tabItem: {
     flex: 1,
     alignItems: 'center',
     color: 'black',
     borderBottomWidth: 3,
     borderBottomColor: 'white',
-    padding: 12
-  }
+    paddingHorizontal: 5, // Changed from padding: 12 until get subnav setup
+    paddingVertical: 12,
+  },
 });