From 0fd892ad288f2e1eaaa4fdf5e1fd6f15dbd45860 Mon Sep 17 00:00:00 2001 From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> Date: Fri, 4 Dec 2020 08:50:24 -0800 Subject: [TMA - 398 AND TMA-430] Replace Providers with Redux Store (#125) * First * WIP * Thunk * Some more comments * sc * recent searches and follounfollow * Edit profile dummy * Block / unblock and some cleanup * Replace auth provider * Sc * Delete AP after rebase * Discover users * Cleanup * More cleanup * Replace profile provider * Fixed build failure * Fixed a bug reported * Prevent app crash when backend server is down --- src/components/taggs/Tagg.tsx | 41 ++++++++++++-------------- src/components/taggs/TaggsBar.tsx | 61 ++++++++++++++++++++++----------------- 2 files changed, 53 insertions(+), 49 deletions(-) (limited to 'src/components/taggs') diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 9f8fafd1..086b3c87 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -1,5 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, {Fragment, useContext, useState} from 'react'; +import React, {Fragment, useContext, useEffect, useState} from 'react'; import {Alert, Linking, StyleSheet, TouchableOpacity, View} from 'react-native'; import PurpleRingPlus from '../../assets/icons/purple_ring+.svg'; import PurpleRing from '../../assets/icons/purple_ring.svg'; @@ -17,36 +17,35 @@ import { registerNonIntegratedSocialLink, } from '../../services'; import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common'; -import {AuthContext, ProfileContext} from '../../routes'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootreducer'; +import {ScreenType} from '../../types'; interface TaggProps { social: string; - isProfileView: boolean; isLinked: boolean; isIntegrated: boolean; setTaggsNeedUpdate: (_: boolean) => void; - setSocialDataNeedUpdate: (_: string[]) => void; - userId: string; + setSocialDataNeedUpdate: (_: string) => void; + userXId: string; + screenType: ScreenType; } const Tagg: React.FC = ({ social, - isProfileView, isLinked, isIntegrated, setTaggsNeedUpdate, setSocialDataNeedUpdate, - userId, + userXId, + screenType, }) => { const navigation = useNavigation(); const [modalVisible, setModalVisible] = useState(false); - const youMayPass = isLinked || isProfileView; - const { - profile: {name}, - socialAccounts, - avatar, - } = isProfileView ? useContext(ProfileContext) : useContext(AuthContext); - + const youMayPass = isLinked || userXId; + const {user} = userXId + ? useSelector((state: RootState) => state.userX[screenType][userXId]) + : useSelector((state: RootState) => state.user); /* case isProfileView: case linked: @@ -62,7 +61,7 @@ const Tagg: React.FC = ({ show auth browser case !integrated_social: show modal - Tagg's "Tagg" will use the Ring instead of PurpleRing + Tagg's "Tagg" will use the Ring instead of PurpleRing */ const modalOrAuthBrowserOrPass = async () => { @@ -70,14 +69,10 @@ const Tagg: React.FC = ({ if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) { navigation.push('SocialMediaTaggs', { socialMediaType: social, - isProfileView: isProfileView, - userId: userId, - name: name, - accountData: socialAccounts[social], - avatar: avatar, + userXId, }); } else { - getNonIntegratedURL(social, userId).then((socialURL) => { + getNonIntegratedURL(social, user.userId).then((socialURL) => { if (socialURL) { Linking.openURL(socialURL); } else { @@ -89,7 +84,7 @@ const Tagg: React.FC = ({ if (isIntegrated) { handlePressForAuthBrowser(social).then((success) => { setTaggsNeedUpdate(success); - setSocialDataNeedUpdate(success ? [social] : []); + if (success) setSocialDataNeedUpdate(social); }); } else { setModalVisible(true); @@ -127,7 +122,7 @@ const Tagg: React.FC = ({ return ( <> - {isProfileView && !isLinked ? ( + {userXId && !isLinked ? ( ) : ( <> diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index aac68e99..12e4b93a 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -1,35 +1,53 @@ -// @refresh react -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useState, useContext} from 'react'; import {StyleSheet} from 'react-native'; import Animated from 'react-native-reanimated'; +import {useDispatch, useSelector} from 'react-redux'; import { INTEGRATED_SOCIAL_LIST, PROFILE_CUTOUT_BOTTOM_Y, SOCIAL_LIST, } from '../../constants'; -import {AuthContext, ProfileContext} from '../../routes'; import {getLinkedSocials} from '../../services'; import {StatusBarHeight} from '../../utils'; import Tagg from './Tagg'; +import {RootState} from '../../store/rootReducer'; +import {ScreenType} from '../../types'; +import {loadIndividualSocial} from '../../store/actions'; const {View, ScrollView, interpolate, Extrapolate} = Animated; interface TaggsBarProps { y: Animated.Value; profileBodyHeight: number; - isProfileView: boolean; + userXId: string; + screenType: ScreenType; } const TaggsBar: React.FC = ({ y, profileBodyHeight, - isProfileView, + userXId, + screenType, }) => { let [taggs, setTaggs] = useState([]); let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); - const context = isProfileView - ? React.useContext(ProfileContext) - : React.useContext(AuthContext); - const {user, socialsNeedUpdate} = context; + const {user} = userXId + ? useSelector((state: RootState) => state.userX[screenType][userXId]) + : useSelector((state: RootState) => state.user); + + const dispatch = useDispatch(); + + /** + * Updates the individual social that needs update + * @param socialType Type of the social that needs update + */ + const handleSocialUpdate = (socialType: string) => { + dispatch(loadIndividualSocial(user.userId, socialType)); + }; + + /** + * This useEffect should be called evey time the user being viewed is changed OR + * And update is triggered manually + */ useEffect(() => { const loadData = async () => { getLinkedSocials(user.userId).then((linkedSocials) => { @@ -43,12 +61,12 @@ const TaggsBar: React.FC = ({ , ); i++; @@ -58,12 +76,12 @@ const TaggsBar: React.FC = ({ , ); i++; @@ -73,17 +91,8 @@ const TaggsBar: React.FC = ({ }); }; - if (taggsNeedUpdate) { - /** - * Triggering redundant call to the backend for now to make the app work. - * TODO : Figure out a better way to get the updates social posts for the profile being visited. - * Have an event triggered from ProfileProvider based on which we could make a call to backedn to get updated posts. - */ - //We may need the line below in future ? - // socialsNeedUpdate(INTEGRATED_SOCIAL_LIST); - loadData(); - } - }, [isProfileView, taggsNeedUpdate, user.userId]); + loadData(); + }, [taggsNeedUpdate, user]); const shadowOpacity: Animated.Node = interpolate(y, { inputRange: [ -- cgit v1.2.3-70-g09d2