DRAFT: URQL POC

apps/mobile/.gitignore

@@ -64,6 +64,7 @@ npm-debug.log
 !.yarn/sdks
 !.yarn/versions
 yarn-error.log
+.yarn
 
 # Google login
 google-services.json

apps/mobile/index.js

@@ -4,11 +4,13 @@ import React, { useEffect, useState } from 'react'
 import Config from 'react-native-config'
 // Required for react-native-root-toast
 import { RootSiblingParent } from 'react-native-root-siblings'
+import { Provider as UrqlProvider } from 'urql'
 import { Provider } from 'react-redux'
-import { AppRegistry, Platform, AppState, UIManager } from 'react-native'
+import { AppRegistry, Platform, AppState, UIManager, LogBox } from 'react-native'
 import Timer from 'react-native-background-timer'
 import * as Sentry from '@sentry/react-native'
 import { OneSignal } from 'react-native-onesignal'
+import client from 'urql-shared/client'
 import { sentryConfig } from 'config'
 import store from 'store'
 import { name as appName } from './app.json'
@@ -21,6 +23,7 @@ import './i18n'
 import 'intl-pluralrules'
 import { ActionSheetProvider } from '@expo/react-native-action-sheet'
 import { baseStyle, tagsStyles, classesStyles } from 'components/HyloHTML/HyloHTML.styles'
+
 // import FastImage from 'react-native-fast-image'
 
 Sentry.init(sentryConfig)
@@ -46,6 +49,41 @@ if (Platform.OS === 'android') {
 
 AppRegistry.registerComponent(appName, () => App)
 
+if (__DEV__) {
+  const suppressedMessages = [
+    'Selector unknown returned a different result when called with the same parameters',
+    'Support for defaultProps will be removed from memo components',
+    'Sending `onAnimatedValueUpdate` with no listeners registered.'
+  ]
+  console.log()
+  console.log('🗒️ NOTE: Logging and warnings suppressed for these known messages/issues:')
+  suppressedMessages.forEach(message => console.log(`⚠️ ${message}`))
+  console.log()
+
+  LogBox.ignoreLogs(suppressedMessages)
+
+  const connectConsoleTextFromArgs = (arrayOfStrings) =>
+    arrayOfStrings
+      .slice(1)
+      .reduce(
+        (baseString, currentString) => baseString.replace('%s', currentString),
+        arrayOfStrings[0]
+      )
+
+  const filterIgnoredMessages = (logger) => (...args) => {
+    const output = connectConsoleTextFromArgs(args)
+
+    if (output && !suppressedMessages.some((log) => output.includes(log))) {
+      logger(...args)
+    }
+  }
+
+  console.log = filterIgnoredMessages(console.log)
+  console.info = filterIgnoredMessages(console.info)
+  console.warn = filterIgnoredMessages(console.warn)
+  console.error = filterIgnoredMessages(console.error)
+}
+
 enableScreens()
 
 // Useful to debug in dev to diagnose any potential image loading issues,
@@ -101,8 +139,10 @@ export default function App () {
               systemFonts={[...defaultSystemFonts, 'Circular-Book']}
             >
               <Provider store={store}>
-                <VersionCheck />
-                <RootNavigator />
+                <UrqlProvider value={client}>
+                  <VersionCheck />
+                  <RootNavigator />
+                </UrqlProvider>
               </Provider>
             </TRenderEngineProvider>
           </RootSiblingParent>

apps/mobile/package.json

@@ -39,7 +39,10 @@
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
     "@sentry/react-native": "^5.24.1",
+    "@urql/devtools": "^2.0.3",
+    "@urql/exchange-graphcache": "^7.1.1",
     "babel-plugin-import-graphql": "^2.8.1",
+    "cross-fetch": "^4.0.0",
     "emoji-datasource-apple": "^15.1.2",
     "emoji-mart": "^5.6.0",
     "emoji-mart-native": "^0.6.5-beta",
@@ -102,7 +105,8 @@
     "reselect": "^4.1.6",
     "sails.io.js": "^1.2.1",
     "socket.io-client": "2.3.1",
-    "tinycolor2": "^1.6.0"
+    "tinycolor2": "^1.6.0",
+    "urql": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

apps/mobile/src/components/Comment/Comment.js

@@ -5,10 +5,10 @@ import Clipboard from '@react-native-clipboard/clipboard'
 import { TextHelpers } from 'hylo-shared'
 import { useDispatch, useSelector } from 'react-redux'
 import useHyloActionSheet from 'hooks/useHyloActionSheet'
-import useReactionActions from 'hooks/useReactionActions'
+import useReactOnEntity from 'urql-shared/hooks/useReactOnEntity'
+import useCurrentUser from 'urql-shared/hooks/useCurrentUser'
 import deleteCommentAction from 'store/actions/deleteComment'
 import getGroup from 'store/selectors/getGroup'
-import getMe from 'store/selectors/getMe'
 import { getPresentedPost } from 'store/selectors/getPost'
 import Avatar from 'components/Avatar'
 import EmojiRow from 'components/EmojiRow'
@@ -39,9 +39,9 @@ export default function Comment ({
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const { showHyloActionSheet } = useHyloActionSheet()
-  const { reactOnEntity, removeReactOnFromEntity } = useReactionActions()
+  const { reactOnEntity, deleteReactionFromEntity } = useReactOnEntity()
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
-  const currentUser = useSelector(getMe)
+  const currentUser = useCurrentUser()
   const group = useSelector(state => getGroup(state, { slug }))
   const canModerate = useSelector(state => hasResponsibilityForGroup(state, { responsibility: RESP_MANAGE_CONTENT, groupId: group?.id }))
   const isCreator = currentUser && (comment.creator.id === currentUser.id)
@@ -52,8 +52,8 @@ export default function Comment ({
   const myEmojis = myReactions.map((reaction) => reaction.emojiFull)
   const groupIds = post?.groups.map(g => g.id)
 
-  const handleReaction = (emojiFull) => reactOnEntity({ commentId: comment?.id, emojiFull, entityType: 'comment', groupIds, postId: post })
-  const handleRemoveReaction = (emojiFull) => removeReactOnFromEntity({ commentId: comment?.id, emojiFull, entityType: 'comment', postId: post })
+  const handleReaction = (emojiFull) => reactOnEntity('comment', comment?.id, emojiFull, postId)
+  const handleRemoveReaction = (emojiFull) => deleteReactionFromEntity('comment', comment?.id, emojiFull, postId)
   const handleReply = onReply && (() => onReply(comment))
   const handleRemove = (!isCreator && canModerate) && (
     () => Alert.alert(

apps/mobile/src/components/Comments/Comments.js

@@ -1,19 +1,13 @@
 /* eslint-disable camelcase */
-import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import React, { useState, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
 import { Text, TouchableOpacity, View, SectionList } from 'react-native'
+import { useQuery } from 'urql'
 import { isIOS } from 'util/platform'
+import commentsQuery from 'graphql/queries/commentsQuery'
+import childCommentsQuery from 'graphql/queries/childCommentsQuery'
 import Comment from 'components/Comment'
 import Loading from 'components/Loading'
 import styles from './Comments.styles'
-import { isEmpty, omit } from 'lodash/fp'
-import {
-  getHasMoreComments,
-  getComments,
-  getTotalComments
-} from 'store/selectors/getComments'
-import fetchCommentsAction from 'store/actions/fetchComments'
-import { FETCH_COMMENTS } from 'store/constants'
 
 function Comments ({
   postId,
@@ -24,24 +18,43 @@ function Comments ({
   panHandlers,
   onSelect
 }, ref) {
-  const dispatch = useDispatch()
-  const comments = useSelector(state => getComments(state, { postId })) || []
-  const pending = useSelector(state => state.pending[FETCH_COMMENTS])
-  const sections = comments.map(comment => ({
-    comment: omit(['subComments'], comment),
-    data: comment.subComments
-  }))
+  const [{ data, pending }] = useQuery({ query: commentsQuery, variables: { postId } })
+  const post = data?.post
+  const commentsQuerySet = post?.comments
+  const comments = commentsQuerySet?.items || []
+
   const [highlightedComment, setHighlightedComment] = useState()
   const commentsListRef = useRef()
+  const sections = comments?.map((comment, index) => {
+    return ({
+      comment,
+      data: comment.childComments?.items || []
+    })
+  })
 
   const scrollToComment = useCallback((comment, viewPosition = 0.2) => {
-    const parentCommentId = comment.parentComment || comment.id
-    const subCommentId = comment.parentComment ? comment.id : null
-    const section = sections.find(s => parentCommentId === s.comment.id)
-    const sectionIndex = section.comment.sectionIndex
-    const itemIndex = section.data.find(subComment =>
-      subCommentId === subComment.id)?.itemIndex || section.data.length + 1
-    commentsListRef?.current.scrollToLocation({ sectionIndex, itemIndex, viewPosition })
+    const parentCommentId = comment.parentComment?.id || comment.id
+    const childCommentId = comment.parentComment ? comment.id : null
+    const parentCommentIndex = sections.findIndex(s => parentCommentId === s.comment.id)
+    const childCommentIndex = sections[parentCommentIndex].data.findIndex(childComment => childCommentId === childComment.id)
+    const hasChildComments = sections[parentCommentIndex].data.length > 0
+    const lastItemIndex = sections[parentCommentIndex].data.length - 1
+
+    // NOTE: The logic below is a bit convoluted due to inverted SectionList, but it works.
+    let itemIndex
+    if (childCommentId) {
+      itemIndex = childCommentIndex + 1
+    } else if (hasChildComments && !childCommentId) {
+      itemIndex = lastItemIndex + 1
+    } else {
+      itemIndex = 1
+    }
+
+    commentsListRef?.current.scrollToLocation({
+      sectionIndex: parentCommentIndex === -1 ? 0 : parentCommentIndex,
+      itemIndex,
+      viewPosition
+    })
   }, [sections])
 
   const selectComment = useCallback(comment => {
@@ -56,14 +69,11 @@ function Comments ({
     clearHighlightedComment: () => setHighlightedComment(null)
   }), [setHighlightedComment, scrollToComment])
 
-  useEffect(() => {
-    dispatch(fetchCommentsAction({ postId }))
-  }, [dispatch, postId])
-
+  // Comment rendering (parent)
   const Header = () => (
     <>
       {providedHeader}
-      <ShowMore postId={postId} />
+      <ShowMore postOrComment={post} style={styles.childCommentsShowMore} />
       {pending && (
         <View style={styles.loadingContainer}>
           <Loading style={styles.loading} />
@@ -72,10 +82,11 @@ function Comments ({
     </>
   )
 
+  // Comment rendering (parent)
   const SectionFooter = ({ section: { comment } }) => {
     return (
       <>
-        <ShowMore commentId={comment.id} style={styles.subCommentsShowMore} forSubcomments />
+        <ShowMore postOrComment={comment} style={styles.childCommentsShowMore} />
         <Comment
           clearHighlighted={() => setHighlightedComment(null)}
           comment={comment}
@@ -91,6 +102,7 @@ function Comments ({
     )
   }
 
+  // comment.childComments rendering
   const Item = ({ item: comment }) => {
     return (
       <Comment
@@ -102,7 +114,7 @@ function Comments ({
         setHighlighted={() => setHighlightedComment(comment)}
         showMember={showMember}
         slug={slug}
-        style={styles.subComment}
+        style={styles.childComment}
         key={comment.id}
       />
     )
@@ -131,21 +143,26 @@ function Comments ({
 
 export default forwardRef(Comments)
 
-export function ShowMore ({ postId, commentId, forSubcomments = false, style = {} }) {
-  const queryParams = commentId ? { commentId } : { postId }
-  const dispatch = useDispatch()
-  const fetchComments = () => dispatch(fetchCommentsAction(queryParams, { cursor }))
-  const comments = useSelector(state => getComments(state, queryParams)) || []
-  const cursor = !isEmpty(comments) && comments[comments.length - 1].id
-  const total = useSelector(state => getTotalComments(state, queryParams)) || 0
-  const hasMore = useSelector(state => getHasMoreComments(state, queryParams))
-  const extra = total - comments.length
+export function ShowMore ({ postOrComment, style = {} }) {
+  const forSubcomments = !!postOrComment?.childComments
+  const commentQuerySet = forSubcomments
+    ? postOrComment?.childComments
+    : postOrComment?.comments
+  const cursor = commentQuerySet?.items[commentQuerySet?.items.length - 1]?.id
+  const variables = forSubcomments
+    ? { commentId: postOrComment?.id, cursor }
+    : { postId: postOrComment?.id, cursor }
+  const query = forSubcomments ? childCommentsQuery : commentsQuery
+  const [, fetchComments] = useQuery({ query, variables, pause: true })
+  const total = commentQuerySet?.total || 0
+  const hasMore = commentQuerySet?.hasMore
+  const extra = total - commentQuerySet?.items?.length || 0
 
   if (!hasMore || extra < 1) return null
 
   return (
     <TouchableOpacity>
-      <Text style={[styles.showMore, style]} onPress={fetchComments}>
+      <Text style={[styles.showMore, style]} onPress={() => fetchComments()}>
         View {extra} previous {forSubcomments ? 'replies' : `comment${extra > 1 ? 's' : ''}`}
       </Text>
     </TouchableOpacity>