diff --git a/front/components/UI/IconButton.tsx b/front/components/UI/IconButton.tsx index a785403..4c18aa0 100644 --- a/front/components/UI/IconButton.tsx +++ b/front/components/UI/IconButton.tsx @@ -150,9 +150,6 @@ const IconButton: React.FC = ({ const scaleValue: Animated.Value = useRef(new Animated.Value(1)).current; const animateValue: Animated.Value = useRef(new Animated.Value(isActive ? 0 : 1)).current; - // Check for active icon. - const hasActiveIcon: boolean = !!IconActive; - // Interpolation for icon colors between active and inactive states. const colorValue: Animated.AnimatedInterpolation = animateValue.interpolate({ inputRange: [0, 1], @@ -208,7 +205,7 @@ const IconButton: React.FC = ({ ]), ]; - if (hasActiveIcon || colorActive) { + if (IconActive || colorActive) { animations.push( Animated.timing(animateValue, { toValue: isActiveState ? 1 : 0, @@ -224,7 +221,7 @@ const IconButton: React.FC = ({ return ( - {hasActiveIcon && ( + {IconActive && ( = ({ const hoverValue = getTransformValue(key, hoverStyle); const pressValue = getTransformValue(key, pressStyle); - const interpolated = animatedValues[key].interpolate({ + const interpolated = animatedValues[key]!.interpolate({ inputRange: [0, 1, 2], outputRange: [defaultValue, hoverValue, pressValue], }); @@ -94,7 +94,7 @@ const InteractiveCC: React.FC = ({ const hoverValue = hoverStyle[key] !== undefined ? hoverStyle[key] : defaultValue; const pressValue = pressStyle[key] !== undefined ? pressStyle[key] : defaultValue; - interpolatedStyle[key] = animatedValues[key].interpolate({ + interpolatedStyle[key] = animatedValues[key]!.interpolate({ inputRange: [0, 1, 2], outputRange: [defaultValue, hoverValue, pressValue], }); @@ -107,7 +107,7 @@ const InteractiveCC: React.FC = ({ const animateToState = (stateValue: number) => { Object.keys(animatedValues).forEach((key) => { - Animated.timing(animatedValues[key], { + Animated.timing(animatedValues[key]!, { toValue: stateValue, duration: duration, useNativeDriver: true, diff --git a/front/components/UI/LogoutButtonCC.tsx b/front/components/UI/LogoutButtonCC.tsx index f4149e3..bb54105 100644 --- a/front/components/UI/LogoutButtonCC.tsx +++ b/front/components/UI/LogoutButtonCC.tsx @@ -24,7 +24,7 @@ const handleSubmit = async (username: string, password: string, email: string) = type LogoutButtonCCProps = { collapse?: boolean; isGuest?: boolean; - style: StyleProp; + style?: StyleProp; buttonType: ButtonType; }; diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx index e790472..9a2dc4e 100644 --- a/front/components/UI/ScaffoldDesktopCC.tsx +++ b/front/components/UI/ScaffoldDesktopCC.tsx @@ -210,7 +210,7 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => { /> - + { marginLeft: 0, padding: props.widthPadding ? 20 : 0, borderRadius: 12, + minHeight: 'auto', }} > {props.children} diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx index 94fd4bc..d1fd52d 100644 --- a/front/components/V2/TabNavigation.tsx +++ b/front/components/V2/TabNavigation.tsx @@ -18,125 +18,3 @@ export type NaviTab = { iconName?: string; }; -const tabs = [ - { - id: 'home', - label: 'Discovery', - icon: , - iconName: 'search', - }, - { - id: 'profile', - label: 'Profile', - icon: , - iconName: 'person', - }, - { - id: 'music', - label: 'Music', - icon: , - iconName: 'musical-notes', - }, - { - id: 'search', - label: 'Search', - icon: , - iconName: 'search', - }, - { - id: 'notifications', - label: 'Notifications', - icon: , - iconName: 'notifications', - }, - { - id: 'settings', - label: 'Settings', - icon: , - iconName: 'settings', - }, -] as NaviTab[]; - -const TabNavigation = () => { - const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); - const [isDesktopCollapsed, setIsDesktopCollapsed] = useState(false); - const [activeTab, setActiveTab] = useState(tabs[0]?.id ?? 'home'); - const colorScheme = useColorScheme(); - - const child = ; - - const appTabs = tabs.map((t) => { - // use the same instance of a component between desktop and mobile - return { - ...t, - onPress: () => setActiveTab(t.id), - icon: ( - - ), - }; - }); - - return ( - - {screenSize === 'small' ? ( - - - {child} - - - ) : ( - - - {child} - - - )} - - ); -}; - -export default TabNavigation; diff --git a/front/views/ScoreView.tsx b/front/views/ScoreView.tsx index 1abf16b..a2cc50b 100644 --- a/front/views/ScoreView.tsx +++ b/front/views/ScoreView.tsx @@ -33,7 +33,6 @@ const ScoreView = (props: RouteProps) => { const artistQuery = useQuery(() => API.getArtist(songQuery.data!.artistId!), { enabled: songQuery.data !== undefined, }); - const scoresQuery = useQuery(API.getSongHistory(props.songId), { refetchOnWindowFocus: true }); const recommendations = useQuery(API.getSongSuggestions); const artistRecommendations = useQueries( recommendations.data @@ -139,9 +138,7 @@ const ScoreView = (props: RouteProps) => { - {scoresQuery.data && (scoresQuery.data?.history?.length ?? 0) > 1 && ( - - )} + ({ diff --git a/front/views/SongLobbyView.tsx b/front/views/SongLobbyView.tsx index 09be78b..3466655 100644 --- a/front/views/SongLobbyView.tsx +++ b/front/views/SongLobbyView.tsx @@ -114,9 +114,7 @@ const SongLobbyView = (props: RouteProps) => { {scoresQuery.data?.history.at(0)?.score ?? 0} - {scoresQuery.data && (scoresQuery.data?.history?.length ?? 0) > 0 && ( - - )} + ); };