[FIX] fix some type errors

front/components/UI/IconButton.tsx

@@ -150,9 +150,6 @@ const IconButton: React.FC<IconButtonProps> = ({
 	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<string | number> = animateValue.interpolate({
 		inputRange: [0, 1],
@@ -208,7 +205,7 @@ const IconButton: React.FC<IconButtonProps> = ({
 			]),
 		];
 
-		if (hasActiveIcon || colorActive) {
+		if (IconActive || colorActive) {
 			animations.push(
 				Animated.timing(animateValue, {
 					toValue: isActiveState ? 1 : 0,
@@ -224,7 +221,7 @@ const IconButton: React.FC<IconButtonProps> = ({
 
 	return (
 		<TouchableOpacity activeOpacity={1} onPress={toggleState} style={combinedContainerStyle}>
-			{hasActiveIcon && (
+			{IconActive && (
 				<Animated.View
 					style={[
 						{

front/components/UI/InteractiveCC.tsx

@@ -82,7 +82,7 @@ const InteractiveCC: React.FC<InteractiveCCProps> = ({
 				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<InteractiveCCProps> = ({
 				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<InteractiveCCProps> = ({
 
 	const animateToState = (stateValue: number) => {
 		Object.keys(animatedValues).forEach((key) => {
-			Animated.timing(animatedValues[key], {
+			Animated.timing(animatedValues[key]!, {
 				toValue: stateValue,
 				duration: duration,
 				useNativeDriver: true,

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<ViewStyle>;
+	style?: StyleProp<ViewStyle>;
 	buttonType: ButtonType;
 };
 

front/components/UI/ScaffoldDesktopCC.tsx

@@ -210,7 +210,7 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 					/>
 				</View>
 			</View>
-			<ScrollView style={{ flex: 1, maxHeight: '100vh' }} contentContainerStyle={{ flex: 1 }}>
+			<ScrollView style={{ flex: 1, maxHeight: '100%' }} contentContainerStyle={{ flex: 1 }}>
 				<GlassmorphismCC
 					style={{
 						backgroundColor: colors.coolGray[500],
@@ -220,6 +220,7 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 						marginLeft: 0,
 						padding: props.widthPadding ? 20 : 0,
 						borderRadius: 12,
+						minHeight: 'auto',
 					}}
 				>
 					{props.children}

front/components/V2/TabNavigation.tsx

@@ -18,125 +18,3 @@ export type NaviTab = {
 	iconName?: string;
 };
 
-const tabs = [
-	{
-		id: 'home',
-		label: 'Discovery',
-		icon: <Ionicons name="search" size={24} color="black" />,
-		iconName: 'search',
-	},
-	{
-		id: 'profile',
-		label: 'Profile',
-		icon: <Ionicons name="person" size={24} color="black" />,
-		iconName: 'person',
-	},
-	{
-		id: 'music',
-		label: 'Music',
-		icon: <Ionicons name="musical-notes" size={24} color="black" />,
-		iconName: 'musical-notes',
-	},
-	{
-		id: 'search',
-		label: 'Search',
-		icon: <Ionicons name="search" size={24} color="black" />,
-		iconName: 'search',
-	},
-	{
-		id: 'notifications',
-		label: 'Notifications',
-		icon: <Ionicons name="notifications" size={24} color="black" />,
-		iconName: 'notifications',
-	},
-	{
-		id: 'settings',
-		label: 'Settings',
-		icon: <Ionicons name="settings" size={24} color="white" />,
-		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 = <HomeView />;
-
-	const appTabs = tabs.map((t) => {
-		// use the same instance of a component between desktop and mobile
-		return {
-			...t,
-			onPress: () => setActiveTab(t.id),
-			icon: (
-				<Ionicons
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					name={t.iconName as any}
-					size={24}
-					color={colorScheme === 'dark' ? 'white' : 'black'}
-				/>
-			),
-		};
-	});
-
-	return (
-		<View
-			style={{
-				width: '100%',
-				height: '100%',
-				backgroundColor: 'rgb(26, 36, 74)',
-			}}
-		>
-			{screenSize === 'small' ? (
-				<TabNavigationPhone
-					tabs={appTabs}
-					activeTabID={activeTab}
-					setActiveTabID={setActiveTab}
-				>
-					<View
-						// @ts-expect-error Raw CSS
-						style={{
-							width: 'calc(100% - 5)',
-							height: '100%',
-							backgroundColor: 'rgba(16, 16, 20, 0.50)',
-							borderRadius: 12,
-							margin: 5,
-							backDropFilter: 'blur(2px)',
-							padding: 15,
-						}}
-					>
-						{child}
-					</View>
-				</TabNavigationPhone>
-			) : (
-				<TabNavigationDesktop
-					tabs={appTabs}
-					activeTabID={activeTab}
-					setActiveTabID={setActiveTab}
-					isCollapsed={isDesktopCollapsed}
-					setIsCollapsed={setIsDesktopCollapsed}
-				>
-					<View
-						// @ts-expect-error Raw CSS
-						style={{
-							width: 'calc(100% - 10)',
-							height: '100%',
-							backgroundColor: 'rgba(16, 16, 20, 0.50)',
-							borderRadius: 12,
-							marginVertical: 10,
-							marginRight: 10,
-							backDropFilter: 'blur(2px)',
-							padding: 20,
-						}}
-					>
-						{child}
-					</View>
-				</TabNavigationDesktop>
-			)}
-		</View>
-	);
-};
-
-export default TabNavigation;

front/views/ScoreView.tsx

@@ -33,7 +33,6 @@ const ScoreView = (props: RouteProps<ScoreViewProps>) => {
 	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<ScoreViewProps>) => {
 						</Column>
 					</Card>
 				</Row>
-				{scoresQuery.data && (scoresQuery.data?.history?.length ?? 0) > 1 && (
-					<ScoreGraph songHistory={scoresQuery.data} />
-				)}
+				<ScoreGraph />
 				<CardGridCustom
 					style={{ justifyContent: 'space-evenly' }}
 					content={recommendations.data.map((i) => ({

front/views/SongLobbyView.tsx

@@ -114,9 +114,7 @@ const SongLobbyView = (props: RouteProps<SongLobbyProps>) => {
 					<Text>{scoresQuery.data?.history.at(0)?.score ?? 0}</Text>
 				</Box>
 			</Box>
-			{scoresQuery.data && (scoresQuery.data?.history?.length ?? 0) > 0 && (
-				<ScoreGraph songHistory={scoresQuery.data} />
-			)}
+			<ScoreGraph />
 		</Box>
 	);
 };