From 7e93ac3f0b2b6b1509d95d020a3138968ac1cfc7 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 18 May 2021 16:21:21 -0700 Subject: Messing around with captionscreen --- src/components/taggs/TaggDraggable.tsx | 81 +++++++++++++++++++++------------- 1 file changed, 50 insertions(+), 31 deletions(-) (limited to 'src/components') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 0990d924..a0872c2d 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -2,9 +2,16 @@ import {useNavigation} from '@react-navigation/native'; import React, {useState} from 'react'; import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import Draggable from 'react-native-draggable'; -import {ScreenType} from 'src/types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {ScreenType, UserType} from '../../types'; +import { + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, + navigateToProfile, +} from '../../utils'; import TaggAvatar from '../profile/TaggAvatar'; +import {RootState} from '../../store/rootReducer'; +import {useStore, useDispatch} from 'react-redux'; interface TaggDraggableProps { draggable?: boolean; @@ -12,15 +19,19 @@ interface TaggDraggableProps { minY: number; maxX: number; maxY: number; - taggedUser: string; + taggedUser: UserType; redirect: boolean; deleteFromList: Function; } -const TaggDraggable: React.FC = (props) => { +const TaggDraggable: React.FC = ( + props: TaggDraggableProps, +) => { const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); const [yCoord, setYcoord] = useState(SCREEN_WIDTH / 2); + const dispatch = useDispatch(); const navigation = useNavigation(); + const state: RootState = useStore().getState(); const { draggable, minX, @@ -39,33 +50,40 @@ const TaggDraggable: React.FC = (props) => { /** * This function returns x,y pairing for each tagg. */ - const getCoords = () => { - return [xCoord, yCoord]; - }; + // const getCoords = () => { + // return [xCoord, yCoord]; + // }; const renderTagg = () => { - - {/* user profile pic */} - - - {/* @username */} - - {taggedUser} - - {/* x button */} - - deleteFromList()}> - + return ( + + {/* user profile pic */} + + + {/* @username */} + + navigateToProfile( + state, + dispatch, + navigation, + ScreenType.Profile, + taggedUser, + ) + }> + {taggedUser} + + {/* x button */} + + deleteFromList()}> + + - - ; + + ); }; if (redirect) { if (draggable) { @@ -84,7 +102,7 @@ const TaggDraggable: React.FC = (props) => { {taggedUser} @@ -103,9 +121,10 @@ const TaggDraggable: React.FC = (props) => { ); } else { - renderTagg; + return renderTagg(); } } else { + return renderTagg(); } }; -- cgit v1.2.3-70-g09d2