Feature/cu 8678ugunq - Add UI components for the new GlobalSearch page

src/components/GlobalSearch/SearchTagFilter.tsx

@@ -0,0 +1,59 @@
+import { Pressable } from "react-native"
+import { SearchTag, getSearchTagIcon } from "utils/search"
+
+import { BodyText } from "components/Text"
+import { Icon } from "components/Icon"
+import { usePalette } from "utils/colors"
+
+interface SearchTagFilterProps {
+  tag: SearchTag
+  title: string
+  onClick: () => void
+  isSelected: boolean
+}
+
+export const SearchTagFilter = ({
+  tag,
+  title,
+  onClick,
+  isSelected,
+}: SearchTagFilterProps) => {
+  const { isLight, buttonFill } = usePalette()
+  const icon = getSearchTagIcon(tag)
+
+  return (
+    <Pressable
+      onPress={onClick}
+      style={{
+        flexDirection: "row",
+        height: 32,
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: 50,
+        gap: 6,
+        borderWidth: 2,
+        borderColor: isLight ? "#424967" : "#8791BD",
+        backgroundColor: isSelected
+          ? isLight
+            ? "#424967"
+            : "#FFB544"
+          : "transparent",
+      }}
+    >
+      <Icon
+        source={icon}
+        color={isSelected ? "#fff" : buttonFill}
+        scale={0.7}
+      />
+      <BodyText
+        style={{
+          fontSize: 13,
+          fontWeight: "700",
+          color: isSelected ? "#fff" : isLight ? "#454773" : "#fff",
+        }}
+      >
+        {title}
+      </BodyText>
+    </Pressable>
+  )
+}

src/components/GlobalSearch/SearchTile.tsx

@@ -0,0 +1,81 @@
+import { Pressable, View } from "react-native"
+import { SearchTag, getSearchTagIcon } from "utils/search"
+
+import { BodyText } from "components/Text"
+import { Icon } from "components/Icon"
+import { usePalette } from "utils/colors"
+import { Divider } from "components/Divider"
+
+interface SearchTileProps {
+  tag: SearchTag
+  title: string
+  subtitle?: string
+  onClick?: () => void
+}
+
+export const SearchTile = ({
+  tag,
+  title,
+  subtitle,
+  onClick,
+}: SearchTileProps) => {
+  const { isLight, buttonFill } = usePalette()
+  const icon = getSearchTagIcon(tag)
+
+  return (
+    <View
+      style={{
+        paddingHorizontal: 28,
+      }}
+    >
+      <Pressable
+        onPress={onClick}
+        style={{
+          marginVertical: 20,
+        }}
+      >
+        <View style={{ flexDirection: "row", width: "100%" }}>
+          <View
+            style={{
+              height: 48,
+              width: 48,
+              marginRight: 8,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Icon source={icon} color={buttonFill} />
+          </View>
+          <View
+            style={{
+              justifyContent: "space-evenly",
+            }}
+          >
+            <BodyText
+              style={{
+                fontSize: 16,
+                fontWeight: "700",
+                color: isLight ? "#454773" : "#fff",
+              }}
+            >
+              {title}
+            </BodyText>
+
+            {subtitle && (
+              <BodyText
+                style={{
+                  fontSize: 12,
+                  fontWeight: "400",
+                  color: isLight ? "#454773" : "#fff",
+                }}
+              >
+                {subtitle}
+              </BodyText>
+            )}
+          </View>
+        </View>
+      </Pressable>
+      <Divider color={"#8791BD"} height={1} />
+    </View>
+  )
+}

src/components/Home/MainMenu.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { ScrollView, View } from "react-native"
 
 import { useNavigation } from "navigation/NavigationTypes"
@@ -25,7 +25,7 @@ type ButtonState = ButtonInterface & { shown: boolean }
 /**
  * the main menu of the app, an horizontal scroll view with the buttons to navigate to the different pages
  */
-export const MainMenu: FC<{ filter?: string }> = ({ filter }) => {
+export const MainMenu = () => {
   const { navigate } = useNavigation()
 
   const defaultIcons: ButtonInterface[] = [
@@ -110,7 +110,7 @@ export const MainMenu: FC<{ filter?: string }> = ({ filter }) => {
 
   useEffect(() => {
     scrollView.current?.scrollTo({ x: 0, y: 0, animated: true })
-  }, [filter, scrollView])
+  }, [scrollView])
 
   useEffect(() => {
     AsyncStorage.getItem("menu:icons")
@@ -206,13 +206,6 @@ export const MainMenu: FC<{ filter?: string }> = ({ filter }) => {
       </Modal>
       {icons
         .filter(i => i.shown)
-        .filter(
-          i =>
-            i.type === ButtonType.ADD ||
-            (filter
-              ? i.title.toLowerCase().includes(filter.toLowerCase())
-              : true)
-        )
         .map(buttonIcon => (
           <MenuButton
             onPress={() => {

src/components/Home/SearchButton.tsx

@@ -0,0 +1,39 @@
+import { Pressable } from "react-native"
+import { useTranslation } from "react-i18next"
+import { useNavigation } from "navigation/NavigationTypes"
+
+import searchDark from "assets/menu/searchDark.svg"
+import { Icon } from "components/Icon"
+import { BodyText } from "components/Text"
+import { usePalette } from "utils/colors"
+
+export const SearchButton = () => {
+  const navigation = useNavigation()
+  const { fieldBackground, buttonFill } = usePalette()
+
+  const { t } = useTranslation() //i18n hook
+
+  return (
+    <Pressable
+      style={{
+        flexDirection: "row",
+        width: 110,
+        marginTop: 46,
+        marginBottom: 12,
+        paddingVertical: 8,
+        backgroundColor: fieldBackground,
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "center",
+        gap: 6,
+        borderRadius: 50,
+      }}
+      onPress={() => navigation.navigate("GlobalSearch")}
+    >
+      <Icon source={searchDark} color={buttonFill} scale={0.7} />
+      <BodyText style={{ color: buttonFill, fontSize: 15 }}>
+        {"" + t("search")}
+      </BodyText>
+    </Pressable>
+  )
+}

src/components/Home/index.tsx

@@ -2,4 +2,4 @@ export * from "./MainMenu"
 export * from "./MainTitle"
 export * from "./MenuButton"
 export * from "./StickyHeader"
-export * from "./PoliSearchBar"
+export * from "./SearchButton"

src/components/Home/PoliSearchBar.tsx → src/components/PoliSearchBar.tsx

@@ -1,6 +1,7 @@
-import { FC, useEffect, useState, useRef } from "react"
+import { useEffect, useState, useRef } from "react"
 import {
   TextInput,
+  TextInputProps,
   Animated,
   Pressable,
   StyleProp,
@@ -12,17 +13,23 @@ import searchDark from "assets/menu/searchDark.svg"
 import { Icon } from "components/Icon"
 import { useTranslation } from "react-i18next"
 
+interface PoliSearchBarProps extends Pick<TextInputProps, "autoFocus"> {
+  onChange: (searchKey: string) => void
+  style?: StyleProp<ViewStyle>
+}
+
 /**
  * the search bar, which requests a search everytime the input text changes
  */
-export const PoliSearchBar: FC<{
-  onChange: (searchKey: string) => void
-  style?: StyleProp<ViewStyle>
-}> = ({ onChange, style }) => {
+export const PoliSearchBar = ({
+  autoFocus = false,
+  onChange,
+  style,
+}: PoliSearchBarProps) => {
   const { fieldBackground, fieldText, bodyText, isLight, palette } =
     usePalette()
 
-  const [isFocused, setIsFocused] = useState(false)
+  const [isFocused, setIsFocused] = useState(autoFocus)
   const shadowAnim = useRef(new Animated.Value(0)).current
   const inputText = useRef<TextInput>(null)
 
@@ -98,6 +105,7 @@ export const PoliSearchBar: FC<{
         onChangeText={onChange}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
+        autoFocus={autoFocus}
       />
       <Pressable
         style={{

src/navigation/MainStackNavigator.tsx

@@ -6,6 +6,7 @@
 import { FC } from "react"
 import { MainStackNavigatorParams } from "navigation/NavigationTypes"
 import { Home } from "pages/Home"
+import { GlobalSearch } from "pages/GlobalSearch"
 import { Article } from "pages/news/ArticleDetails"
 import { ArticlesList } from "pages/news/ArticlesList"
 import { Error404 } from "pages/Error404"
@@ -38,6 +39,7 @@ export const MainStack: FC = () => {
       initialRouteName="Home"
     >
       <MainStackNavigator.Screen name="Home" component={Home} />
+      <MainStackNavigator.Screen name="GlobalSearch" component={GlobalSearch} />
       <MainStackNavigator.Screen name="Article" component={Article} />
       <MainStackNavigator.Screen name="ArticlesList" component={ArticlesList} />
       <MainStackNavigator.Screen

src/navigation/NavigationTypes.ts

@@ -54,6 +54,7 @@ export type RootStackNavigatorParams = {
 
 export type MainStackNavigatorParams = {
   Home: undefined
+  GlobalSearch: undefined
   Article: { article: Article }
   ArticlesList: { tagName: string }
   OtherCategories: { tags: TagWithData[] }

src/pages/FreeClass/FreeClassrooms.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react"
 import { MainStackScreen, useNavigation } from "navigation/NavigationTypes"
 import { View, Alert, ActivityIndicator, StyleSheet } from "react-native"
-import { PoliSearchBar } from "components/Home"
+import { PoliSearchBar } from "components/PoliSearchBar"
 import { usePalette } from "utils/colors"
 import { BodyText } from "components/Text"
 import campusIcon from "assets/freeClassrooms/campus.svg"