Merge pull request #196 from Hylozoic/all-view-port-to-mobile

All view port to mobile

apps/mobile/ios/Podfile.lock

@@ -1333,7 +1333,7 @@ PODS:
     - react-native-config/App (= 1.5.3)
   - react-native-config/App (1.5.3):
     - React-Core
-  - react-native-date-picker (5.0.8):
+  - react-native-date-picker (5.0.9):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1473,7 +1473,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-webview (13.13.1):
+  - react-native-webview (13.13.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1858,7 +1858,7 @@ PODS:
     - React-Core
     - SDWebImage (~> 5.11.1)
     - SDWebImageWebPCoder (~> 0.8.4)
-  - RNGestureHandler (2.22.0):
+  - RNGestureHandler (2.22.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2491,7 +2491,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: 1364ae5354f51b3ecee8eb718b5b6d1686d2ff4d
   react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
   react-native-config: 8f7283449bbb048902f4e764affbbf24504454af
-  react-native-date-picker: 543274fea228bdf7427a917d19b71f8f6eca7a72
+  react-native-date-picker: d55302b0ff2c95854f60f40c5465109601fde317
   react-native-document-picker: cd4d6b36a5207ad7a9e599ebb9eb0c2e84fa0b87
   react-native-geolocation-service: 608e1da71a1ac31b4de64d9ef2815f697978c55b
   react-native-image-picker: e7331948589e764ecd5a9c715c3fc14d4e6187e6
@@ -2500,7 +2500,7 @@ SPEC CHECKSUMS:
   react-native-render-html: 984dfe2294163d04bf5fe25d7c9f122e60e05ebe
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
   react-native-safe-area-context: cbadf383376f589bb611c8ae0280c1d4b7b447e9
-  react-native-webview: ce6e24111244cea3b9cefbb65d8c32ad0a0c7b45
+  react-native-webview: 08a61d1d92fee7875c8702e70f7da1d706a9d2dc
   React-nativeconfig: 539ff4de6ce3b694e8e751080568c281c84903ce
   React-NativeModulesApple: 771cc40b086281b820fe455fedebbe4341fd0c90
   React-perflogger: 4e80a5b8d61dfb38024e7d5b8efaf9ce1037d31f
@@ -2537,7 +2537,7 @@ SPEC CHECKSUMS:
   RNCPicker: d23ebebb0c66864ac3edf260c20f8a4470aa2769
   RNDeviceInfo: 3f2e5fcca3637f75c6d30ba287293c2f97206781
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
-  RNGestureHandler: 8ce7a079c513f96f9b580bcb2ecee621d511361f
+  RNGestureHandler: 41e106f2004f7b0d5fd1bb92179797890bcbb0ec
   RNGoogleSignin: 24d3b3261f78b0fae0aa013f8ab6f8d25e369b0c
   RNReanimated: 9ee6347ca0aa3cf78cae715455e781728ae142e2
   RNScreens: b02af14099030cc1e63f74f2791574e909fc1541

apps/mobile/src/components/CreateGroupNotice/CreateGroupNotice.js

@@ -1,22 +1,56 @@
 import React from 'react'
-import { View, Text, Image } from 'react-native'
+import { View, Text, Image, StyleSheet } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
 import { useTranslation } from 'react-i18next'
 import Button from 'components/Button'
-import styles from './CreateGroupNotice.styles'
+import { rhino50 } from 'style/colors'
 
 const axolotlImage = require('assets/hey-axolotl.png')
 
-export default function CreateGroupNotice ({ goToCreateGroup, text }) {
+export default function CreateGroupNotice () {
   const { t } = useTranslation()
+  const navigation = useNavigation()
+
+  const handleOnPress = () => navigation.navigate('Create Group')
+  const text = t('no_posts_here_try_creating_your_own_group')
+
   return (
     <View style={styles.container}>
       <Text style={styles.promptText}>{text}</Text>
       <Image style={styles.image} source={axolotlImage} />
-      <Button
-        text={t('Start a Group')}
-        style={styles.button}
-        onPress={goToCreateGroup}
-      />
+      <Button text={t('Start a Group')} style={styles.button} onPress={handleOnPress} />
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white'
+  },
+  promptText: {
+    marginTop: 40,
+    marginBottom: 20,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    paddingLeft: 10,
+    paddingRight: 10,
+    fontSize: 20,
+    textAlign: 'center',
+    color: rhino50
+  },
+  image: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    height: 220,
+    width: 250,
+    marginBottom: 40
+  },
+  button: {
+    width: 200,
+    height: 40,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    fontSize: 14
+  }
+})

apps/mobile/src/components/FlagGroupContent/FlagGroupContent.js

@@ -38,7 +38,7 @@ const FlagGroupContent = ({ onClose, linkData, type = 'content' }) => {
     variables: { slug: groupSlug }
   })
   const group = useMemo(() => GroupPresenter(groupData?.group), [groupData])
-  const agreements = group?.agreements || []
+  const agreements = group?.agreements?.items || []
   const groupAgreementsUrl = group ? groupUrl(group.slug) + `/group/${group.slug}` : ''
   const [anonymous, setAnonymous] = useState(false)
   const [explanation, setExplanation] = useState('')

apps/mobile/src/components/GroupWelcomeCheck/GroupWelcomeCheck.js

@@ -6,24 +6,24 @@ import useCurrentGroup from '@hylo/hooks/useCurrentGroup'
 export default function GroupWelcomeCheck () {
   const navigation = useNavigation()
   const [{ currentUser }] = useCurrentUser()
-  const [{ currentGroup, isContextGroup, fetching }] = useCurrentGroup()
+  const [{ currentGroup, isContextGroupSlug, fetching }] = useCurrentGroup()
   const currentMembership = currentUser?.memberships &&
     currentUser.memberships.find(m => m.group.id === currentGroup?.id)
 
   const { agreementsAcceptedAt, joinQuestionsAnsweredAt, showJoinForm } = currentMembership?.settings || {}
 
   const numAgreements = currentGroup?.agreements?.total || 0
 
-  const agreementsChanged = (!isContextGroup && numAgreements > 0) &&
+  const agreementsChanged = (!isContextGroupSlug && numAgreements > 0) &&
     (!agreementsAcceptedAt || agreementsAcceptedAt < currentGroup?.settings?.agreementsLastUpdatedAt)
 
   useEffect(() => {
     if (!fetching) {
-      if ((!isContextGroup && showJoinForm) || agreementsChanged || (currentGroup?.settings?.askJoinQuestions && !joinQuestionsAnsweredAt)) {
+      if ((!isContextGroupSlug && showJoinForm) || agreementsChanged || (currentGroup?.settings?.askJoinQuestions && !joinQuestionsAnsweredAt)) {
         navigation.navigate('Group Welcome', { groupId: currentGroup?.id })
       }
     }
-  }, [isContextGroup, fetching, showJoinForm, agreementsChanged, joinQuestionsAnsweredAt])
+  }, [isContextGroupSlug, fetching, showJoinForm, agreementsChanged, joinQuestionsAnsweredAt])
 
   return null
 }

apps/mobile/src/components/ItemSelectorModal/ItemSelectorModal.js

@@ -8,6 +8,7 @@ import RoundCheckbox from 'components/RoundCheckBox'
 import SearchBar from 'components/SearchBar'
 import { havelockBlue, rhino80, rhino50, white, caribbeanGreen, rhino10 } from 'style/colors'
 
+// TODO: URQL! Finish styling this modal component
 const ItemSelectorModalHeader = ({
   searchTerm,
   headerText,

apps/mobile/src/components/ModerationList/ModerationList.js

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { View, FlatList, StyleSheet } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 import { gql, useMutation, useQuery } from 'urql'
-import { DECISIONS_OPTIONS } from 'components/StreamList/StreamList'
+import { DECISIONS_OPTIONS } from 'screens/Stream/Stream'
 import Loading from 'components/Loading'
 import ModerationListItem from 'components/ModerationListItem'
 import ListControl from 'components/ListControl'

apps/mobile/src/components/NotificationCard/NotificationCard.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 import Avatar from 'components/Avatar'
-import styles from './NotificationCard.styles'
+import { alabaster, persimmon, rhino, rhino10, rhino30, rhino60 } from 'style/colors'
 
 export default function NotificationCard ({ notification }) {
   const {
@@ -19,35 +19,99 @@ export default function NotificationCard ({ notification }) {
   const unreadTextStyle = unread ? styles.unreadText : null
 
   return (
-    <View style={[ styles.container, unreadStyle ]}>
+    <View style={[styles.container, unreadStyle]}>
       <View style={avatarSeparator ? styles.separator : null}>
         <Avatar avatarUrl={actor.avatarUrl} style={styles.avatar} />
       </View>
       <View style={styles.content}>
-        <Text numberOfLines={2} style={[ styles.header, unreadTextStyle ]}>
+        <Text numberOfLines={2} style={[styles.header, unreadTextStyle]}>
           {unread && (
             <Text style={styles.badge}>● </Text>
           )}
           {notification?.nameInHeader && (
-            <Text style={[ styles.name, unreadTextStyle ]}>{notification?.actor.name} </Text>
+            <Text style={[styles.name, unreadTextStyle]}>{notification?.actor.name} </Text>
           )}
           <Text style={[styles.title, unreadTextStyle]}>{header}</Text>
           {title && (
-            <Text style={[ styles.title, unreadTextStyle ]} numberOfLines={2}> "{title}"</Text>
+            <Text style={[styles.title, unreadTextStyle]} numberOfLines={2}> "{title}"</Text>
           )}
           {objectName && (
-            <Text style={[ styles.title, unreadTextStyle ]}> {objectName}</Text>
+            <Text style={[styles.title, unreadTextStyle]}> {objectName}</Text>
           )}
         </Text>
-        <Text style={[ styles.text, unreadTextStyle ]}>
-          <Text style={[ styles.name, unreadTextStyle ]}>{`${actor?.name.split(' ')[0]} `}</Text>
+        <Text style={[styles.text, unreadTextStyle]}>
+          <Text style={[styles.name, unreadTextStyle]}>{`${actor?.name.split(' ')[0]} `}</Text>
           {body}
           {group && (
-            <Text style={[ styles.group, unreadTextStyle ]}> { group }</Text>
+            <Text style={[styles.group, unreadTextStyle]}> {group}</Text>
           )}
         </Text>
         <Text style={styles.date}>{createdAt}</Text>
       </View>
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  avatar: {
+    marginLeft: 15,
+    marginRight: 15,
+    marginTop: 5
+  },
+  badge: {
+    color: persimmon,
+    fontFamily: 'Circular-Bold',
+    fontSize: 12
+  },
+  container: {
+    flexDirection: 'row',
+    paddingTop: 15,
+    backgroundColor: rhino10
+  },
+  unreadContainer: {
+    backgroundColor: alabaster
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'column',
+    paddingRight: 15,
+    paddingBottom: 15,
+    borderBottomColor: rhino30,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  date: {
+    fontSize: 12,
+    color: rhino30,
+    fontFamily: 'Circular-Book',
+    marginTop: 3
+  },
+  header: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  name: {
+    color: rhino60,
+    fontFamily: 'Circular-Bold',
+    fontSize: 14,
+    marginTop: 3
+  },
+  separator: {
+    borderBottomColor: rhino30,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  text: {
+    fontFamily: 'Circular-Book',
+    fontSize: 14,
+    color: rhino60,
+    marginTop: 3
+  },
+  unreadText: {
+    color: rhino
+  },
+  title: {
+    fontFamily: 'Circular-Bold',
+    fontSize: 14,
+    color: rhino60,
+    marginTop: 3
+  }
+})

apps/mobile/src/components/PostCard/PostCard.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import { View, Text, TouchableOpacity } from 'react-native'
 import { useMutation } from 'urql'
 import { useTranslation } from 'react-i18next'
@@ -15,6 +15,7 @@ import Files from 'components/Files'
 import Icon from 'components/Icon'
 import Topics from 'components/Topics'
 import styles from 'components/PostCard/PostCard.styles'
+import { useNavigation } from '@react-navigation/native'
 
 export default function PostCard ({
   goToGroup,
@@ -25,17 +26,18 @@ export default function PostCard ({
   post: providedPost = {},
   respondToEvent,
   showGroups = true,
-  showMember,
   childPost,
   showTopic: goToTopic
 }) {
   const { t } = useTranslation()
+  const navigation = useNavigation()
   const [, recordClickthrough] = useMutation(recordClickthroughMutation)
   const post = useMemo(() => PostPresenter(providedPost, groupId), [providedPost])
   const images = useMemo(() => post.imageUrls && post.imageUrls.map(uri => ({ uri })), [post])
   const locationText = useMemo(() => LocationHelpers.generalLocationString(post.locationObject, post.location), [post])
   const isFlagged = useMemo(() => post.flaggedGroups && post.flaggedGroups.includes(groupId), [post])
   const [{ currentUser }] = useCurrentUser()
+  const handleShowMember = id => navigation.navigate('Member', { id })
 
   return (
     <>
@@ -56,7 +58,7 @@ export default function PostCard ({
           isFlagged={isFlagged}
           pinned={post.pinned}
           postId={post.id}
-          showMember={showMember}
+          showMember={handleShowMember}
           title={post.title}
           type={post.type}
         />