Map Filter

mobile/Components/AppNavigator.js

@@ -25,6 +25,7 @@ import EventDetailScreen from '../Screen/EventDetailScreen';
 import EventScreen from '../Screen/EventScreen';
 import ResourceDetailScreen from '../Screen/ResourceDetailScreen';
 import OrganizationDetailScreen from '../Screen/OrganizationDetailScreen';
+import MapFilter from '../Screen/MapFilter';
 import ArtworkFilterScreen from '../Screen/ArtworkFilterScreen';
 import { isTokenExpired } from '../redux/sliceAuth';
 
@@ -141,6 +142,7 @@ function HomeStackScreen({ navigation }) {
         component={MapScreen}
         options={{
           tabBarIcon: MapIcon,
+          headerShown: false,
         }}
       />
       <Tab.Screen
@@ -189,6 +191,7 @@ function AppNavigator() {
           <Stack.Screen name="Artwork Details" component={ArtworkDetailScreen} />
           <Stack.Screen name="Resource Details" component={ResourceDetailScreen} />
           <Stack.Screen name="Organization Details" component={OrganizationDetailScreen} />
+          <Stack.Screen name="Filter" component={MapFilter} />
           <Stack.Screen name="Artwork Filter" component={ArtworkFilterScreen} />
         </Stack.Navigator>
       </NavigationContainer>
@@ -204,4 +207,4 @@ function AppNavigator() {
   );
 }
 
-export default AppNavigator;
+export default AppNavigator;

mobile/Components/EventCard.js

@@ -19,6 +19,7 @@ function EventCard({
   number,
   email,
   website,
+  tag,
 }) {
   const onPressEvent = () => {
     navigation.navigate('Event Details', {
@@ -70,11 +71,15 @@ function EventCard({
           {' '}
           {description}
         </Paragraph>
+        <Paragraph>
+          {' '}
+          {tag}
+        </Paragraph>
         <Paragraph>Tag0 | Tag1 | Tag2</Paragraph>
       </Card.Content>
       <Card.Cover source={{ uri: url }} />
       <Card.Actions>
-        <Button onPress={onPressEvent}>Details</Button>
+        <Button onPress={() => onPressEvent}>Details</Button>
         <Button>I&apos;m interested!</Button>
       </Card.Actions>
     </Card>
@@ -95,6 +100,7 @@ EventCard.propTypes = {
   description: PropTypes.string.isRequired,
   summary: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
+  tag: PropTypes.string.isRequired,
   navigation: PropTypes.shape({
     navigate: PropTypes.func,
   }).isRequired,

mobile/Components/ResourceCard.js

@@ -5,7 +5,7 @@ import {
 import PropTypes from 'prop-types';
 
 function ResourceCard({
-  navigation, title, day, time, location, summary, url, number, email, website,
+  navigation, title, day, time, location, summary, url, number, email, website, tag,
 }) {
   const onPressEvent = () => {
     navigation.navigate('Resource Details', {
@@ -35,6 +35,9 @@ function ResourceCard({
         <Paragraph>
           {location}
         </Paragraph>
+        <Paragraph>
+          {tag}
+        </Paragraph>
       </Card.Content>
       <Card.Cover source={{ uri: url }} />
       <Card.Actions>
@@ -54,6 +57,7 @@ ResourceCard.propTypes = {
   number: PropTypes.string.isRequired,
   email: PropTypes.string.isRequired,
   website: PropTypes.string.isRequired,
+  tag: PropTypes.string.isRequired,
   navigation: PropTypes.shape({
     navigate: PropTypes.func,
   }).isRequired,

mobile/Screen/EventScreen.js

@@ -37,6 +37,7 @@ const events = [{
   email: '[email protected]',
   website: 'studio526.com',
   url: 'https:/upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg',
+  tags: 'Workshop',
 },
 {
   id: 2,
@@ -52,6 +53,7 @@ const events = [{
   email: '[email protected]',
   website: 'studio526.com',
   url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg',
+  tags: 'Workshop',
 },
 {
   id: 3,
@@ -67,6 +69,7 @@ const events = [{
   email: '[email protected]',
   website: 'studio526.com',
   url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg',
+  tags: 'Workshop',
 }];
 
 const resources = [
@@ -81,6 +84,7 @@ const resources = [
     email: '[email protected]',
     website: 'studio526.com',
     url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg',
+    tags: 'Food',
   },
   {
     id: 2,
@@ -93,6 +97,7 @@ const resources = [
     email: '[email protected]',
     website: 'studio526.com',
     url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg',
+    tags: 'Shelter',
   },
   {
     id: 3,
@@ -105,6 +110,7 @@ const resources = [
     email: '[email protected]',
     website: 'studio526.com',
     url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg',
+    tags: 'Mission',
   },
 
 ];
@@ -166,6 +172,7 @@ function EventScreen({ navigation }) {
           summary={event.summary}
           url={event.url}
           navigation={navigation}
+          tag={event.tag}
         />
       ))}
       {resources.map((resource) => (
@@ -181,6 +188,7 @@ function EventScreen({ navigation }) {
           number={resource.number}
           email={resource.email}
           website={resource.website}
+          tag={resource.tag}
         />
       ))}
     </ScrollView>

mobile/Screen/MapFilter.js

@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import {
+  View, TouchableOpacity, ScrollView, Text, StyleSheet,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 20,
+  },
+  text: {
+    fontSize: 16,
+    marginTop: 10,
+    marginLeft: 10,
+    color: 'grey',
+  },
+  header: {
+    color: 'dimgrey',
+    fontSize: 16,
+    marginTop: 25,
+    marginBottom: 10,
+    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  applyButton: {
+    marginTop: 20,
+    marginBottom: 50,
+    width: '95%',
+    borderRadius: 4,
+    height: 45,
+    backgroundColor: '#424288',
+    borderWidth: 2,
+    borderColor: '#424288',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 7,
+  },
+});
+
+function MapFilter({ route, navigation }) {
+  const {
+    categories, setCategories,
+  } = route.params;
+
+  const eventCategories = [
+    {
+      title: 'visual art',
+      length: 10,
+    },
+    {
+      title: 'film',
+      length: 4,
+    },
+    {
+      title: 'music',
+      length: 5,
+    },
+    {
+      title: 'art-related community event',
+      length: 27,
+    },
+    {
+      title: 'performance/theater',
+      length: 19,
+    },
+    {
+      title: 'spoken word',
+      length: 11,
+    },
+    {
+      title: 'miscellaneous',
+      length: 14,
+    },
+  ];
+
+  const resourceCategories = [
+    {
+      title: 'food',
+      length: 4,
+    },
+    {
+      title: 'shelter',
+      length: 7,
+    },
+    {
+      title: 'health',
+      length: 6,
+    },
+    {
+      title: 'legal services',
+      length: 14,
+    },
+    {
+      title: 'shower',
+      length: 6,
+    },
+    {
+      title: 'mission',
+      length: 7,
+    },
+    {
+      title: 'social services',
+      length: 15,
+    },
+  ];
+
+  const getButtonColor = (category) => {
+    if (category) {
+      return '#DFDFEF';
+    }
+    return '#F8F8F8';
+  };
+
+  const getBorderColor = (category) => {
+    if (category) {
+      return '#4C4C9B';
+    } return '#D0D0E8';
+  };
+
+  const getButtonStyle = (object, category) => ({
+    width: ((object.length) + 5) * 9,
+    height: 50,
+    backgroundColor: getButtonColor(category),
+    borderWidth: 2,
+    borderRadius: 10,
+    borderColor: getBorderColor(category),
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 7,
+  });
+
+  const getTextColor = (category) => {
+    if (category) {
+      return '#424288';
+    } return '#6666A9';
+  };
+
+  const getTextStyle = (category) => ({
+    color: getTextColor(category),
+    fontSize: 16,
+  });
+
+  // MAKE THIS USE_EFFECT
+  const [tempCategories, setTempCategories] = useState({ ...categories });
+
+  const onPressCategories = (property) => {
+    const objectCopy = { ...tempCategories };
+    objectCopy[property] = !objectCopy[property];
+    setTempCategories(objectCopy);
+  };
+
+  const onPressApply = () => {
+    setCategories(tempCategories);
+    navigation.goBack();
+  };
+
+  return (
+    <ScrollView>
+      <Text style={styles.text}>Select Multiple Filtering Options.</Text>
+      <Text style={styles.header}>Events</Text>
+      <View style={styles.container}>
+        {eventCategories.map((category) => (
+          <TouchableOpacity
+            style={getButtonStyle(category, tempCategories[category.title])}
+            onPress={() => onPressCategories(category.title)}
+          >
+            <Text style={getTextStyle(tempCategories[category.title])}>{category.title}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <Text style={styles.header}>Resources</Text>
+      <View style={styles.container}>
+        {resourceCategories.map((category) => (
+          <TouchableOpacity
+            style={getButtonStyle(category, tempCategories[category.title])}
+            onPress={() => onPressCategories(category.title)}
+          >
+            <Text style={getTextStyle(tempCategories[category.title])}>{category.title}</Text>
+          </TouchableOpacity>
+        ))}
+        <TouchableOpacity style={styles.applyButton} title="apply" onPress={() => onPressApply()}>
+          <Text style={[styles.title, { color: 'white' }, { fontWeight: '600' }]}>
+            Apply Filter
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
+  );
+}
+
+MapFilter.propTypes = {
+  route: PropTypes.shape({
+    params: PropTypes.shape({
+      categories: PropTypes.func.isRequired,
+      setCategories: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  navigation: PropTypes.shape({
+    goBack: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+export default MapFilter;