Groups Page

assets/groups/index.ts

@@ -26,7 +26,7 @@ export const platformIcons: Record<
     },
     facebook: {
         svg: facebook,
-        width: 24,
+        width: 25,
         heigth: 24,
     },
 }

src/components/Groups/AnimatedPoliSearchBar.tsx

@@ -1,36 +1,29 @@
-import { Group } from "api/groups"
 import { PoliSearchBar } from "components/Home"
-import React, { FC } from "react"
+import React, { FC, useState } from "react"
 import { View, ViewStyle } from "react-native"
 import { AnimatedLine } from "./AnimatedLine"
 
-
 export interface AnimatedPoliSearchBarProps {
-    setSearch: (val: string) => void
-    isSearching: boolean
-    setIsSearching: (val: boolean) => void
-    groups?: Group[]
+    onSearch: (val: string) => void
     style?: ViewStyle
 }
 
-export const AnimatedPoliSearchBar: FC<
-    AnimatedPoliSearchBarProps
-> = props => {
-
+export const AnimatedPoliSearchBar: FC<AnimatedPoliSearchBarProps> = props => {
+    const [isSearching, setIsSearching] = useState(false)
     return (
         <View style={props.style}>
             <PoliSearchBar
                 onChange={val => {
-                    props.setSearch(val)
+                    props.onSearch(val)
                     if (val !== "") {
-                        props.setIsSearching(true)
-                    } else if (props.isSearching === true) {
-                        props.setIsSearching(false)
+                        setIsSearching(true)
+                    } else if (isSearching === true) {
+                        setIsSearching(false)
                     }
                 }}
                 style={{ marginTop: 0, marginBottom: 0 }}
             />
-            <AnimatedLine mounted={props.isSearching} />
+            <AnimatedLine mounted={isSearching} />
         </View>
     )
 }

src/components/Groups/Filters.tsx

@@ -6,15 +6,15 @@ import { ModalSelection, SelectTile } from "components/Settings"
 import { getNameFromMode, ValidModalType } from "utils/groups"
 
 export interface FiltersProps {
-    year: string
-    setYear: (value: string) => void
-    course: string
-    setCourse: (value: string) => void
-    type: string
-    setType: (value: string) => void
-    platform: string
-    setPlatform: (value: string) => void
-    forceSearch: () => void
+    filters: Filters
+    onFilterChange: (filters: Filters) => void
+}
+
+export interface Filters {
+    year?: string
+    course?: string
+    platform?: string
+    type?: string
 }
 
 interface ModalItemList {
@@ -23,8 +23,20 @@ interface ModalItemList {
 }
 
 const yearsList: ModalItemList = {
-    itemsToShow: [ "2022/2023","2021/2022", "2020/2021", "2019/2020", "2018/2019"],
-    itemsToSave: [ "2022/2023","2021/2022", "2020/2021", "2019/2020", "2018/2019"],
+    itemsToShow: [
+        "2022/2023",
+        "2021/2022",
+        "2020/2021",
+        "2019/2020",
+        "2018/2019",
+    ],
+    itemsToSave: [
+        "2022/2023",
+        "2021/2022",
+        "2020/2021",
+        "2019/2020",
+        "2018/2019",
+    ],
 }
 const coursesList: ModalItemList = {
     itemsToShow: ["Triennale", "Magistrale", "Ciclo unico"],
@@ -41,8 +53,6 @@ const platformsList: ModalItemList = {
     itemsToSave: ["WA", "FB", "TG"],
 }
 
-//to avoid writing mistakes
-const all = "Tutti"
 
 export const Filters: FC<FiltersProps> = props => {
     //show or hide modal
@@ -52,27 +62,13 @@ export const Filters: FC<FiltersProps> = props => {
     //items to show inside modal
     const [modalItems, setModalItems] = useState<ModalItemList>(yearsList)
     //currently selected item inside modal
-    const [selectedItem, setSelectedItem] = useState<string>(all)
+    const [selectedItem, setSelectedItem] = useState<string | undefined>(
+        undefined
+    )
 
-    //update state when user taps "OK" in modal
-    const updateSelectedFilter = () => {
-        if (modalMode === "year") {
-            props.setYear(selectedItem)
-        } else if (modalMode === "course") {
-            props.setCourse(selectedItem)
-        } else if (modalMode === "platform") {
-            props.setPlatform(selectedItem)
-        } else {
-            props.setType(selectedItem)
-        }
-    }
     //reset state on "reset"
     const reset = () => {
-        props.setYear(all)
-        props.setCourse(all)
-        props.setType(all)
-        props.setPlatform(all)
-        props.forceSearch()
+        props.onFilterChange({})
     }
 
     return (
@@ -81,63 +77,56 @@ export const Filters: FC<FiltersProps> = props => {
                 style={{
                     flexDirection: "row",
                     flexWrap: "wrap",
-                    paddingHorizontal: 10,
                 }}
             >
                 <OutlinedButton
                     text="Anno"
-                    buttonStyle={[
-                        styles.buttonRightMargin,
-                        styles.buttonBottomMargin,
-                    ]}
-                    isSelected={props.year !== all ? true : false}
+                    buttonStyle={styles.buttonCustomMargin}
+                    isSelected={props.filters.year ? true : false}
                     onPress={() => {
                         setModalMode("year")
                         setModalItems(yearsList)
-                        setSelectedItem(props.year)
+                        setSelectedItem(props.filters.year)
                         setIsModalShowing(true)
                     }}
                 />
                 <OutlinedButton
                     text="Corso"
-                    buttonStyle={[
-                        styles.buttonRightMargin,
-                        styles.buttonBottomMargin,
-                    ]}
-                    isSelected={props.course !== all ? true : false}
+                    buttonStyle={styles.buttonCustomMargin}
+                    isSelected={props.filters.course ? true : false}
                     onPress={() => {
                         setModalMode("course")
                         setModalItems(coursesList)
-                        setSelectedItem(props.course)
+                        setSelectedItem(props.filters.course)
                         setIsModalShowing(true)
                     }}
                 />
                 <OutlinedButton
                     text="Tipo"
-                    buttonStyle={styles.buttonBottomMargin}
-                    isSelected={props.type !== all ? true : false}
+                    buttonStyle={styles.buttonCustomMargin}
+                    isSelected={props.filters.type ? true : false}
                     onPress={() => {
                         setModalMode("type")
                         setModalItems(typesList)
-                        setSelectedItem(props.type)
+                        setSelectedItem(props.filters.type)
                         setIsModalShowing(true)
                     }}
                 />
                 <OutlinedButton
                     text="Piattaforma"
-                    buttonStyle={styles.buttonRightMargin}
-                    isSelected={props.platform !== all ? true : false}
+                    buttonStyle={styles.buttonCustomMargin}
+                    isSelected={props.filters.platform ? true : false}
                     onPress={() => {
                         setModalMode("platform")
                         setModalItems(platformsList)
-                        setSelectedItem(props.platform)
+                        setSelectedItem(props.filters.platform)
                         setIsModalShowing(true)
                     }}
                 />
                 <OutlinedButton
                     text="Reset"
                     isSpecial={true}
-                    buttonStyle={{ minWidth: 48 }}
+                    buttonStyle={[{ minWidth: 48 }, styles.buttonCustomMargin]}
                     onPress={reset}
                 />
             </View>
@@ -147,17 +136,36 @@ export const Filters: FC<FiltersProps> = props => {
                 onClose={() => {
                     setIsModalShowing(false)
                 }}
-                selectedValue={selectedItem}
                 onOK={() => {
-                    updateSelectedFilter()
+                    if (modalMode === "course") {
+                        props.onFilterChange({
+                            ...props.filters,
+                            course: selectedItem,
+                        })
+                    } else if (modalMode === "platform") {
+                        props.onFilterChange({
+                            ...props.filters,
+                            platform: selectedItem,
+                        })
+                    } else if (modalMode === "year") {
+                        props.onFilterChange({
+                            ...props.filters,
+                            year: selectedItem,
+                        })
+                    } else if (modalMode === "type") {
+                        props.onFilterChange({
+                            ...props.filters,
+                            type: selectedItem,
+                        })
+                    }
                     setIsModalShowing(false)
                 }}
             >
                 <SelectTile
-                    value={all}
-                    selected={selectedItem === all}
+                    value={"Tutti"}
+                    selected={selectedItem === undefined}
                     onPress={() => {
-                        setSelectedItem(all)
+                        setSelectedItem(undefined)
                     }}
                 />
                 {modalItems?.itemsToShow.map((itemName, index) => {
@@ -180,10 +188,9 @@ export const Filters: FC<FiltersProps> = props => {
 }
 
 const styles = StyleSheet.create({
-    buttonRightMargin: {
-        marginRight: 8,
-    },
-    buttonBottomMargin: {
+    buttonCustomMargin: {
+        marginRight: 4,
+        marginLeft: 4,
         marginBottom: 8,
     },
 })

src/components/Groups/GroupTile.tsx

@@ -21,7 +21,6 @@ export const GroupTile: FC<GroupTileProps> = props => {
 
     const iconSvg = useSVG(props.icon?.svg)
 
-
     return (
         <View style={{ flex: 1 }}>
             <Pressable

src/components/Groups/ModalGroup.tsx

@@ -38,7 +38,7 @@ export interface ModalGroupProps {
  *
  */
 export const ModalGroup: FC<ModalGroupProps> = props => {
-    const { backgroundSecondary, modalBarrier } = usePalette()
+    const { backgroundSecondary, modalBarrier, isLight } = usePalette()
 
     const deleteSvg = useSVG(icon.svg)
     return (
@@ -65,7 +65,6 @@ export const ModalGroup: FC<ModalGroupProps> = props => {
                                 height: 30,
                                 backgroundColor: "#ffffff",
                                 borderRadius: 15,
-                                marginTop: 96,
                                 marginBottom: 8,
                                 justifyContent: "center",
                                 alignItems: "center",
@@ -108,8 +107,11 @@ export const ModalGroup: FC<ModalGroupProps> = props => {
                             }}
                         >
                             <ButtonCustom
-                                overrideLight="#424967"
-                                overrideDark="#8791BD"
+                                style={{
+                                    backgroundColor: isLight
+                                        ? "#424967"
+                                        : "#8791BD",
+                                }}
                                 text={"JOIN GROUP"}
                                 onPress={() => props.onJoin(props.group)}
                             />

src/components/Settings/ButtonCustom.tsx

@@ -11,9 +11,7 @@ export interface ButtonCustomProps {
      */
     light?: boolean
     onPress?: () => void
-    buttonStyle?: ViewStyle
-    overrideLight?: string
-    overrideDark?: string
+    style?: ViewStyle
 }
 /**
  * Custom button component. Specify param `light` to select button type
@@ -28,14 +26,14 @@ export const ButtonCustom: FC<ButtonCustomProps> = props => {
                 {
                     backgroundColor: props.light
                         ? isLight
-                            ? (props.overrideLight ?? palette.lighter)
-                            : (props.overrideDark ?? palette.darker)
+                            ? (palette.lighter)
+                            : ( palette.darker)
                         : isLight
                         ? palette.darker
                         : palette.lighter,
                     minWidth: 130,
                 },
-                props.buttonStyle,
+                props.style,
             ]}
             onPress={props.onPress}
         >

src/components/Settings/CareerTile.tsx

@@ -31,7 +31,7 @@ export const CareerTile: FC<CareerTileProps> = props => {
                 <ButtonCustom
                     onPress={props.onPress}
                     text={"Cambia matricola"}
-                    buttonStyle={{ paddingHorizontal: 8 }}
+                    style={{ paddingHorizontal: 8 }}
                 />
                 <CareerColumn career={props.career}></CareerColumn>
             </View>

src/components/Settings/ModalSelection.tsx

@@ -26,12 +26,6 @@ export interface ModalSelectionProps {
      */
     onOK: () => void
 
-    /**
-     * input value of `onOk` function.
-     * Usually the current state value of a {@link RadioButtonGroup}
-     */
-    selectedValue: string
-
     /**
      * modal wrapper height, specify if height is fixed
      */