feat(agenda): added support for restoring visibility of hidden events

polito · Mar 6, 2025 · f6b20e4 · f6b20e4
1 parent 1e261e1
commit f6b20e4
Show file tree

Hide file tree

Showing 8 changed files with 265 additions and 86 deletions.
diff --git a/assets/translations/en.json b/assets/translations/en.json
@@ -318,6 +318,10 @@
   "courseGuideScreen": {
     "title": "Course guide"
   },
+  "courseHideEventScreen": {
+    "button": "Show in Agenda",
+    "selectItems": "Select all"
+  },
   "courseIconPickerScreen": {
     "title": "Pick an icon"
   },

diff --git a/assets/translations/it.json b/assets/translations/it.json
@@ -329,6 +329,10 @@
   "courseGuideScreen": {
     "title": "Guida del corso"
   },
+  "courseHideEventScreen": {
+    "button": "Mostra in Agenda",
+    "selectItems": "Seleziona tutti"
+  },
   "courseIconPickerScreen": {
     "title": "Seleziona un'icona"
   },

diff --git a/src/core/components/Checkbox.tsx b/src/core/components/Checkbox.tsx
@@ -1,6 +1,4 @@
-import { useRef } from 'react';
 import {
-  Animated,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -9,12 +7,14 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons';
 import { Icon } from '@lib/ui/components/Icon';
 import { Text } from '@lib/ui/components/Text';
 import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
 import { Theme } from '@lib/ui/types/Theme';
 
+// faSquare, faSquareCheck
 export const Checkbox = ({
   text,
   onPress,
@@ -23,53 +23,55 @@ export const Checkbox = ({
   textStyle,
   checkboxStyle,
   disable,
+  dimension = 'default',
+  icon,
 }: {
-  text: string;
+  text?: string;
   onPress: () => void;
   isChecked: boolean;
   containerStyle?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   checkboxStyle?: StyleProp<ViewStyle>;
   disable?: boolean;
+  dimension?: 'default' | 'small';
+  icon?: IconDefinition;
 }) => {
   const styles = useStylesheet(createStyles);
 
-  const animatedWidth = useRef(new Animated.Value(0)).current;
-
-  const startAnimation = () => {
-    const toValue = isChecked ? 30 : 0;
-    Animated.timing(animatedWidth, {
-      toValue: toValue,
-      duration: 500,
-      useNativeDriver: false,
-    }).start();
-  };
-
   return (
     <View style={[styles.container, containerStyle]}>
       <TouchableOpacity
         style={[
           styles.checkbox,
           checkboxStyle,
-          isChecked && styles.checkboxSelected,
+          dimension === 'small' && { height: 20, width: 20 },
         ]}
         disabled={disable ?? false}
         onPress={() => {
-          startAnimation();
           onPress();
         }}
       >
-        <Animated.View
+        <View
           style={{
-            width: animatedWidth,
-            height: 30,
-            display: isChecked ? 'flex' : 'none',
+            display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
           }}
         >
-          <Icon icon={faCheck} color="white" size={20} />
-        </Animated.View>
+          {isChecked ? (
+            <Icon
+              icon={icon ? icon : faSquareCheck}
+              style={styles.checkboxIcon}
+              size={dimension === 'small' ? 15 : 20}
+            />
+          ) : (
+            <Icon
+              icon={faSquare}
+              style={styles.checkboxIcon}
+              size={dimension === 'small' ? 15 : 20}
+            />
+          )}
+        </View>
       </TouchableOpacity>
       <Text style={[styles.text, textStyle]}>{text}</Text>
     </View>
@@ -85,16 +87,13 @@ const createStyles = ({ palettes, spacing, fontSizes, dark }: Theme) =>
       marginHorizontal: spacing[5],
     },
     checkbox: {
-      borderColor: palettes.navy[dark ? '50' : '600'],
-      borderWidth: 1,
-      borderRadius: 5,
       height: 25,
       width: 25,
       justifyContent: 'center',
       alignItems: 'center',
     },
-    checkboxSelected: {
-      backgroundColor: palettes.navy[dark ? '50' : '600'],
+    checkboxIcon: {
+      color: palettes.navy[dark ? '50' : '600'],
     },
     text: {
       fontSize: fontSizes.sm,

diff --git a/src/features/agenda/screens/LectureScreen.tsx b/src/features/agenda/screens/LectureScreen.tsx
@@ -13,7 +13,7 @@ import { Row } from '@lib/ui/components/Row';
 import { useTheme } from '@lib/ui/hooks/useTheme';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 
-import { DateTime } from 'luxon';
+import { DateTime, WeekdayNumbers } from 'luxon';
 
 import { BottomBarSpacer } from '../../../core/components/BottomBarSpacer';
 import { EventDetails } from '../../../core/components/EventDetails';
@@ -73,7 +73,7 @@ export const LectureScreen = ({ route, navigation }: Props) => {
       t('lectureScreen.hideEventAlertMessage', {
         title: lecture.title,
         day: DateTime.now()
-          .set({ weekday: lecture.start.weekday })
+          .set({ weekday: lecture.start.weekday as WeekdayNumbers })
           .toFormat('cccc'),
         fromTime: lecture.fromTime,
         toTime: lecture.toTime,

diff --git a/src/features/courses/navigation/CourseSharedScreens.tsx b/src/features/courses/navigation/CourseSharedScreens.tsx
@@ -126,7 +126,6 @@ export const CourseSharedScreens = (
         options={{
           title: t('common.hiddenEvents'),
           headerLargeTitle: false,
-          headerSearchBarOptions: {},
         }}
       />
       <Stack.Screen