aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/Draggable.tsx34
-rw-r--r--src/components/common/MomentTags.tsx100
-rw-r--r--src/components/common/TaggUserSelectionCell.tsx37
-rw-r--r--src/components/moments/MomentPostContent.tsx21
-rw-r--r--src/components/moments/TagFriendsFoooter.tsx130
-rw-r--r--src/components/profile/ProfilePreview.tsx4
-rw-r--r--src/components/suggestedPeople/BadgeIcon.tsx64
-rw-r--r--src/components/suggestedPeople/index.ts2
-rw-r--r--src/components/suggestedPeople/legacy/BadgesDropdown.tsx (renamed from src/components/suggestedPeople/BadgesDropdown.tsx)68
-rw-r--r--src/components/taggs/TaggDraggable.tsx17
10 files changed, 301 insertions, 176 deletions
diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index edd29b78..15ba3325 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -59,7 +59,7 @@ interface IProps {
minY?: number;
maxX?: number;
maxY?: number;
- onDragStart?: () => void;
+ onDragStart?: () => number;
}
export default function Draggable(props: IProps) {
@@ -103,8 +103,8 @@ export default function Draggable(props: IProps) {
// Whether we're currently dragging or not
const isDragging = React.useRef(false);
- // const [zIndex, setZIndex] = React.useState(z);
- const zIndex = z;
+ const [zIndex, setZIndex] = React.useState(z);
+ // const zIndex = z;
const getBounds = React.useCallback(() => {
const left = x + offsetFromStart.current.x;
@@ -136,7 +136,9 @@ export default function Draggable(props: IProps) {
isDragging.current = false;
if (onDragRelease) {
onDragRelease(e, gestureState);
- onRelease(e, true);
+ }
+ if (onRelease) {
+ onRelease(e, gestureState);
}
if (!shouldReverse) {
pan.current.flattenOffset();
@@ -147,18 +149,17 @@ export default function Draggable(props: IProps) {
[onDragRelease, shouldReverse, onRelease, reversePosition],
);
- const onPanResponderGrant = React.useCallback(
- (_: GestureResponderEvent) => {
- startBounds.current = getBounds();
- isDragging.current = true;
- if (!shouldReverse) {
- pan.current.setOffset(offsetFromStart.current);
- pan.current.setValue({x: 0, y: 0});
- }
- onDragStart();
- },
- [getBounds, shouldReverse],
- );
+ const onPanResponderGrant = (_: GestureResponderEvent) => {
+ startBounds.current = getBounds();
+ isDragging.current = true;
+ if (!shouldReverse) {
+ pan.current.setOffset(offsetFromStart.current);
+ pan.current.setValue({x: 0, y: 0});
+ }
+ if (onDragStart) {
+ setZIndex(onDragStart());
+ }
+ };
const handleOnDrag = React.useCallback(
(e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
@@ -194,6 +195,7 @@ export default function Draggable(props: IProps) {
listener: handleOnDrag,
useNativeDriver: false,
}),
+ onPanResponderRelease,
// onPanResponderRelease: (_) => {
// // console.log('end');
// // setZIndex(1);
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index defd4b4b..bdd1fbeb 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -1,4 +1,4 @@
-import React, {MutableRefObject, useEffect, useState} from 'react';
+import React, {createRef, MutableRefObject, useEffect, useState} from 'react';
import {MomentTagType, ProfilePreviewType} from '../../types';
import TaggDraggable from '../taggs/TaggDraggable';
import Draggable from './Draggable';
@@ -6,6 +6,7 @@ import Draggable from './Draggable';
interface MomentTagsProps {
editing: boolean;
tags: MomentTagType[];
+ setTags: (tag: MomentTagType[]) => void;
imageRef: MutableRefObject<null>;
deleteFromList?: (user: ProfilePreviewType) => void;
}
@@ -13,60 +14,127 @@ interface MomentTagsProps {
const MomentTags: React.FC<MomentTagsProps> = ({
editing,
tags,
+ setTags,
imageRef,
deleteFromList,
}) => {
const [offset, setOffset] = useState([0, 0]);
- const [curStart, setCurStart] = useState([0, 0]);
const [imageDimensions, setImageDimensions] = useState([0, 0]);
+ const [maxZIndex, setMaxZIndex] = useState(1);
+ const [draggableRefs, setDraggableRefs] = useState<
+ React.MutableRefObject<null>[]
+ >([]);
+
+ const updateTagPosition = (
+ ref: React.MutableRefObject<null>,
+ userId: string,
+ ) => {
+ if (ref !== null && ref.current !== null) {
+ ref.current.measure(
+ (
+ _fx: number, // location of ref relative to parent element
+ _fy: number,
+ _width: number,
+ _height: number,
+ px: number, // location of ref relative to entire screen
+ py: number,
+ ) => {
+ const x = ((px - offset[0]) / imageDimensions[0]) * 100;
+ const y = ((py - offset[1]) / imageDimensions[1]) * 100;
+ setTags(
+ tags.map((tag) =>
+ tag.user.id === userId
+ ? {
+ id: '',
+ x,
+ y,
+ z: maxZIndex - 1, // TODO: change this
+ user: tag.user,
+ }
+ : tag,
+ ),
+ );
+ },
+ );
+ }
+ };
+
+ useEffect(() => {
+ setDraggableRefs(tags.map((_) => createRef()));
+ }, [tags]);
useEffect(() => {
- imageRef.current.measure((fx, fy, width, height, px, py) => {
- setOffset([px, py]);
- setImageDimensions([width, height]);
- });
+ setTimeout(
+ () => {
+ imageRef.current.measure(
+ (
+ fx: number, // location of ref relative to parent element
+ fy: number,
+ width: number,
+ height: number,
+ _x: number, // location of ref relative to entire screen
+ _y: number,
+ ) => {
+ setOffset([fx, fy]);
+ setImageDimensions([width, height]);
+ },
+ );
+ },
+ editing ? 100 : 0,
+ );
}, []);
if (!tags) {
return null;
}
+
return editing && deleteFromList ? (
<>
- {tags.map((tag) => (
+ {tags.map((tag, index) => (
<Draggable
- x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
- y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+ key={tag.user.id + tag.x + tag.y}
+ x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
+ y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
+ z={tag.z}
minX={offset[0]}
minY={offset[1]}
maxX={imageDimensions[0] + offset[0]}
maxY={imageDimensions[1] + offset[1]}
- onDragStart={() => null}>
+ onDragStart={() => {
+ const currZIndex = maxZIndex;
+ setMaxZIndex(currZIndex + 1);
+ return currZIndex;
+ }}
+ onDragRelease={() =>
+ updateTagPosition(draggableRefs[index], tag.user.id)
+ }>
<TaggDraggable
+ draggableRef={draggableRefs[index]}
taggedUser={tag.user}
editingView={true}
deleteFromList={() => deleteFromList(tag.user)}
- setStart={setCurStart}
/>
</Draggable>
))}
</>
) : (
<>
- {tags.map((tag) => (
+ {tags.map((tag, index) => (
<Draggable
- x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
- y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+ key={tag.user.id}
+ x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
+ y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
+ z={tag.z}
minX={offset[0]}
minY={offset[1]}
maxX={imageDimensions[0] + offset[0]}
maxY={imageDimensions[1] + offset[1]}
- onDragStart={() => null}
disabled={true}>
<TaggDraggable
+ draggableRef={draggableRefs[index]}
taggedUser={tag.user}
editingView={editing}
deleteFromList={() => null}
- setStart={setCurStart}
/>
</Draggable>
))}
diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx
index 2ea1e4ce..72c98822 100644
--- a/src/components/common/TaggUserSelectionCell.tsx
+++ b/src/components/common/TaggUserSelectionCell.tsx
@@ -1,19 +1,20 @@
import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {ProfilePreview} from '..';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import TaggRadioButton from './TaggRadioButton';
interface TaggUserSelectionCellProps {
item: ProfilePreviewType;
- selectedUsers: ProfilePreviewType[];
- setSelectedUsers: Function;
+ tags: MomentTagType[];
+ setTags: (tags: MomentTagType[]) => void;
}
const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
item,
- selectedUsers,
- setSelectedUsers,
+ tags,
+ setTags,
}) => {
const [pressed, setPressed] = useState<boolean>(false);
@@ -22,9 +23,7 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
*/
useEffect(() => {
const updatePressed = () => {
- const userSelected = selectedUsers.findIndex(
- (selectedUser) => item.id === selectedUser.id,
- );
+ const userSelected = tags.findIndex((tag) => item.id === tag.user.id);
setPressed(userSelected !== -1);
};
updatePressed();
@@ -37,18 +36,24 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
const handlePress = () => {
// Add to selected list of users
if (pressed === false) {
- setSelectedUsers([...selectedUsers, item]);
+ setTags([
+ ...tags,
+ {
+ id: '',
+ x: 50,
+ y: 50,
+ z: 1,
+ user: item,
+ },
+ ]);
}
// Remove item from selected list of users
else {
- const filteredSelection = selectedUsers.filter(
- (user) => user.id !== item.id,
- );
- setSelectedUsers(filteredSelection);
+ setTags(tags.filter((tag) => tag.user.id !== item.id));
}
};
return (
- <View style={styles.container}>
+ <TouchableWithoutFeedback onPress={handlePress} style={styles.container}>
<View style={{width: SCREEN_WIDTH * 0.8}}>
<ProfilePreview
profilePreview={item}
@@ -56,8 +61,8 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
screenType={ScreenType.Profile}
/>
</View>
- <TaggRadioButton pressed={pressed} onPress={handlePress} />
- </View>
+ <TaggRadioButton pressed={pressed} onPress={() => null} />
+ </TouchableWithoutFeedback>
);
};
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index c3cb03f5..f485396f 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -43,6 +43,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const navigation = useNavigation();
const dispatch = useDispatch();
const imageRef = useRef(null);
+ const [fadeValue, setFadeValue] = useState(new Animated.Value(0));
+ const [visible, setVisible] = useState(false);
const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
new Animated.Value(0),
@@ -85,6 +87,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
source={{uri: pathHash}}
resizeMode={'cover'}
/>
+ {tags.length > 0 && (
+ <Image
+ source={require('../../assets/icons/tag_indicate.png')}
+ style={[styles.tagIcon]}
+ />
+ )}
</TouchableWithoutFeedback>
{visible && (
<Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
@@ -119,9 +127,6 @@ const styles = StyleSheet.create({
aspectRatio: 1,
marginBottom: '3%',
},
- tapTag: {
- position: 'absolute',
- },
footerContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
@@ -150,5 +155,15 @@ const styles = StyleSheet.create({
lineHeight: normalize(15.51),
letterSpacing: normalize(0.6),
},
+ tapTag: {
+ position: 'absolute',
+ },
+ tagIcon: {
+ width: normalize(30),
+ height: normalize(30),
+ position: 'absolute',
+ bottom: '7%',
+ left: normalize(20),
+ },
});
export default MomentPostContent;
diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 7b109877..365d709d 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,39 +1,47 @@
import {useNavigation} from '@react-navigation/native';
-import React, {Dispatch, SetStateAction} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useMemo} from 'react';
+import {
+ Image,
+ ScrollView,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from 'react-native';
import {ProfilePreview} from '..';
-import {ProfilePreviewType, ScreenType} from '../../types';
-import {normalize} from '../../utils/layouts';
+import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types';
+import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
interface TagFriendsFooterProps {
- taggedUsers: ProfilePreviewType[];
- setTaggedUsers: Dispatch<SetStateAction<ProfilePreviewType[]>>;
+ tags: MomentTagType[];
+ setTags: (tags: MomentTagType[]) => void;
}
-const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
- taggedUsers,
- setTaggedUsers,
-}) => {
+const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({tags, setTags}) => {
const navigation = useNavigation();
const handleRemoveTag = (user: ProfilePreviewType) => {
- const filteredSelection = taggedUsers.filter((item) => user.id !== item.id);
- setTaggedUsers(filteredSelection);
+ setTags(tags.filter((tag) => tag.user.id !== user.id));
};
- const TaggMoreButton = () => (
- <TouchableOpacity
- onPress={() =>
- navigation.navigate('TagSelectionScreen', {
- selectedUsers: taggedUsers,
- })
- }
- style={styles.tagMoreContainer}>
- <Image
- source={require('../../assets/icons/tagging/white-plus-icon.png')}
- style={styles.tagMoreIcon}
- />
- <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
- </TouchableOpacity>
+ const goToSelectionScreen = () => {
+ navigation.navigate('TagSelectionScreen', {
+ selectedTags: tags,
+ });
+ };
+
+ const taggMoreButton = useMemo(
+ () => (
+ <TouchableOpacity
+ onPress={goToSelectionScreen}
+ style={styles.tagMoreContainer}>
+ <Image
+ source={require('../../assets/icons/tagging/white-plus-icon.png')}
+ style={styles.tagMoreIcon}
+ />
+ <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
+ </TouchableOpacity>
+ ),
+ [tags],
);
const TaggedUser = (user: ProfilePreviewType) => (
@@ -59,31 +67,36 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
* If taggUsers is empty, title acts as a button
* Else, gets disabled and TaggMore button appears
*/
- const TagFriendsTitle = () => (
- <TouchableOpacity
- style={styles.tagFriendsTitleContainer}
- disabled={taggedUsers.length !== 0}
- onPress={() =>
- navigation.navigate('TagSelectionScreen', {
- selectedUsers: taggedUsers,
- })
- }>
- <Image
- source={require('../../assets/icons/tagging/tag-icon.png')}
- style={styles.tagIcon}
- />
- <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
- </TouchableOpacity>
+ const tagFriendsTitle = useMemo(
+ () => (
+ <TouchableOpacity
+ style={styles.tagFriendsTitleContainer}
+ disabled={tags.length !== 0}
+ onPress={() =>
+ navigation.navigate('TagSelectionScreen', {
+ selectedTags: tags,
+ })
+ }>
+ <Image
+ source={require('../../assets/icons/tagging/tag-icon.png')}
+ style={styles.tagIcon}
+ />
+ <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+ </TouchableOpacity>
+ ),
+ [tags.length],
);
return (
<>
- <TagFriendsTitle />
+ {tagFriendsTitle}
<View style={styles.tagFriendsContainer}>
- {taggedUsers.map((user) => (
- <TaggedUser {...user} />
- ))}
- {taggedUsers.length !== 0 && <TaggMoreButton />}
+ <ScrollView horizontal>
+ {tags.map((tag) => (
+ <TaggedUser key={tag.user.id} {...tag.user} />
+ ))}
+ {tags.length !== 0 && taggMoreButton}
+ </ScrollView>
</View>
</>
);
@@ -99,10 +112,9 @@ const styles = StyleSheet.create({
fontWeight: '600',
},
tagFriendsContainer: {
- flexDirection: 'row',
- marginTop: '3%',
- flexWrap: 'wrap',
- justifyContent: 'flex-start',
+ height: SCREEN_HEIGHT * 0.1,
+ marginTop: 2,
+ marginBottom: 5,
},
tagMoreLabel: {
fontWeight: '500',
@@ -111,7 +123,6 @@ const styles = StyleSheet.create({
letterSpacing: normalize(0.2),
color: 'white',
textAlign: 'center',
- marginVertical: '5%',
},
closeIconContainer: {
width: 20,
@@ -120,14 +131,25 @@ const styles = StyleSheet.create({
zIndex: 1,
},
tagMoreContainer: {
- flexDirection: 'column',
+ width: 60,
alignItems: 'center',
+ justifyContent: 'flex-start',
+ marginTop: -12,
+ },
+ tagMoreIcon: {
+ width: 38,
+ height: 38,
+ marginTop: 13,
+ marginBottom: '10%',
+ },
+ taggedUserContainer: {
+ marginTop: -12,
},
- tagMoreIcon: {width: 38, height: 38, top: -2},
- taggedUserContainer: {flexDirection: 'row-reverse'},
closeIcon: {
width: 20,
height: 20,
+ left: 15,
+ top: 10,
},
tagFriendsTitleContainer: {
flexDirection: 'row',
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 88c075e2..dd93a5fd 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -377,10 +377,8 @@ const styles = StyleSheet.create({
},
tagSelectionContainer: {
width: 60,
- flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
- margin: '1%',
},
tagSelectionAvatar: {
width: 34,
@@ -389,7 +387,7 @@ const styles = StyleSheet.create({
},
tagSelectionNameContainer: {
width: '100%',
- marginVertical: '10%',
+ marginVertical: normalize(5),
},
tagSelectionUsername: {
fontWeight: '500',
diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
new file mode 100644
index 00000000..8f576a43
--- /dev/null
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -0,0 +1,64 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {
+ Image,
+ ImageSourcePropType,
+ StyleProp,
+ StyleSheet,
+ ViewStyle,
+} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {UniversityBadge} from '../../types';
+import {normalize} from '../../utils';
+
+interface BadgeIconProps {
+ badge: UniversityBadge;
+ img: ImageSourcePropType;
+ style?: StyleProp<ViewStyle>;
+}
+
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
+ const navigation = useNavigation();
+ return (
+ <TouchableOpacity
+ style={[styles.badgeButton, style]}
+ onPress={() => {
+ navigation.navigate('MutualBadgeHolders', {
+ badge_id: badge.id,
+ badge_title: badge.name,
+ badge_img: img,
+ });
+ }}>
+ <LinearGradient
+ colors={['#4E3629', '#EC2027']}
+ useAngle={true}
+ angle={154.72}
+ angleCenter={{x: 0.5, y: 0.5}}
+ style={styles.badgeBackground}>
+ <Image source={img} style={styles.icon} />
+ </LinearGradient>
+ </TouchableOpacity>
+ );
+};
+
+const styles = StyleSheet.create({
+ badgeBackground: {
+ width: '100%',
+ height: '100%',
+ borderRadius: 50,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ badgeButton: {
+ width: normalize(30),
+ height: normalize(30),
+ borderRadius: 30,
+ },
+ icon: {
+ width: '60%',
+ height: '60%',
+ },
+});
+
+export default BadgeIcon;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
index 339c9ae0..34bb96d4 100644
--- a/src/components/suggestedPeople/index.ts
+++ b/src/components/suggestedPeople/index.ts
@@ -1,3 +1,3 @@
export {default as MutualFriends} from './MutualFriends';
-export {default as BadgesDropdown} from './BadgesDropdown';
export {default as SPTaggsBar} from './SPTaggsBar';
+export {default as BadgeIcon} from './BadgeIcon';
diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
index bc4e7a54..267355f3 100644
--- a/src/components/suggestedPeople/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
@@ -1,39 +1,35 @@
-import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {ImageSourcePropType, StyleSheet} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
-import LinearGradient from 'react-native-linear-gradient';
import Animated, {Easing} from 'react-native-reanimated';
-import {UniversityType, UniversityBadge} from '../../types';
-import {UniversityIcon} from '..';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-import UniversityIconClicked from './UniversityIconClicked';
+import {BadgeIcon, UniversityIcon} from '../..';
+import {UniversityBadge, UniversityType} from '../../../types';
+import {normalize} from '../../../utils';
+import UniversityIconClicked from '../UniversityIconClicked';
+
interface BadgesDropdownProps {
university: UniversityType;
localBadges: {
badge: UniversityBadge;
- img: string;
+ img: ImageSourcePropType;
}[];
- badges: UniversityBadge[];
}
const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
university,
localBadges,
- badges,
}) => {
// Used to toggle between dropdown being displayed and not
const [displayBadges, setDisplayBadges] = useState<boolean>(false);
// Determines the absolute position of the individual badges [0, i * 40]
let [top, setTop] = useState<Animated.Value<number>[]>([]);
- const navigation = useNavigation();
useEffect(() => {
// Initialize position of badges to 0
const defineBadgePositions = () => {
let localTop: Animated.Value<number>[] = [];
- badges.forEach(() => {
+ localBadges.forEach(() => {
localTop.push(new Animated.Value(0));
});
setTop(localTop);
@@ -43,7 +39,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
// Displays badges dropdown by updating top [state] for every badge
const animate = () => {
- for (let i = 0; i < badges?.length; i++) {
+ for (let i = 0; i < localBadges?.length; i++) {
if (top) {
Animated.timing(top[i], {
toValue: i * 40 + 50,
@@ -56,7 +52,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
// Draws back displayed badges by setting top [state] to 0 for every badge
const animateBack = () => {
- for (let i = 0; i < badges?.length; i++) {
+ for (let i = 0; i < localBadges?.length; i++) {
if (top) {
Animated.timing(top[i], {
toValue: 0,
@@ -106,30 +102,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
zIndex: -1 * badge.id,
},
]}>
- <TouchableOpacity
- style={styles.badgeButton}
- onPress={() => {
- navigation.navigate('MutualBadgeHolders', {
- badge_id: badge.id,
- badge_title: badge.name,
- badge_img: img,
- });
- }}>
- <LinearGradient
- colors={['#4E3629', '#EC2027']}
- useAngle={true}
- angle={154.72}
- angleCenter={{x: 0.5, y: 0.5}}
- style={styles.badgeBackground}>
- <Image
- source={img}
- style={{
- width: SCREEN_WIDTH * 0.04,
- height: SCREEN_WIDTH * 0.04,
- }}
- />
- </LinearGradient>
- </TouchableOpacity>
+ <BadgeIcon badge={badge} img={img} />
</Animated.View>
))}
</Animated.View>
@@ -137,18 +110,6 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
};
const styles = StyleSheet.create({
- badgeBackground: {
- position: 'absolute',
- width: '100%',
- height: '100%',
- borderRadius: 50,
- borderColor: 'transparent',
- borderWidth: 1,
- alignSelf: 'center',
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- },
badgesContainer: {
flexDirection: 'column',
justifyContent: 'space-between',
@@ -157,12 +118,9 @@ const styles = StyleSheet.create({
left: '5%',
paddingBottom: '2%',
},
- badgeButton: {
- width: 30,
- height: 30,
- borderRadius: 15,
+ animatedBadgeView: {
+ position: 'absolute',
},
- animatedBadgeView: {position: 'absolute'},
universityIconContainer: {
width: normalize(31),
height: normalize(38),
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 12e8e1e1..d458fab6 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -1,5 +1,5 @@
import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
+import React from 'react';
import {
Image,
StyleSheet,
@@ -7,6 +7,7 @@ import {
TouchableOpacity,
TouchableWithoutFeedback,
View,
+ ViewProps,
} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import Avatar from '../../components/common/Avatar';
@@ -15,31 +16,23 @@ import {ProfilePreviewType, ScreenType, UserType} from '../../types';
import {normalize} from '../../utils';
import {navigateToProfile} from '../../utils/users';
-interface TaggDraggableProps {
+interface TaggDraggableProps extends ViewProps {
+ draggableRef: React.MutableRefObject<null>;
taggedUser: ProfilePreviewType;
editingView: boolean;
deleteFromList: () => void;
- setStart: Function;
}
const TaggDraggable: React.FC<TaggDraggableProps> = (
props: TaggDraggableProps,
) => {
+ const {draggableRef, taggedUser, editingView, deleteFromList} = props;
const navigation = useNavigation();
const dispatch = useDispatch();
const state = useSelector((rs: RootState) => rs);
- const {taggedUser, editingView, deleteFromList, setStart} = props;
let uriX = require('../../assets/images/draggableX.png');
let uriTip = require('../../assets/images/Tagg-Triangle.png');
- const draggableRef = useRef(null);
-
- useEffect(() => {
- draggableRef.current.measure((width: number, height: number) => {
- setStart([width, height]);
- });
- }, []);
-
const user: UserType = {
userId: taggedUser.id,
username: taggedUser.username,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 02:25:06 +0000