Groups Page

assets/groups/index.ts

@@ -0,0 +1,32 @@
+import { DataSourceParam } from "@shopify/react-native-skia"
+import whatsapp from "./whatsapp.svg"
+import facebook from "./facebook.svg"
+import telegram from "./telegram.svg"
+
+/**
+ * list of tray icons
+ */
+export const platformIconList = ["telegram", "whatsapp", "facebook"] as const
+
+export type PlatformIcon = typeof platformIconList[number]
+
+export const platformIcons: Record<
+    PlatformIcon,
+    { svg: DataSourceParam; width: number; heigth: number }
+> = {
+    whatsapp: {
+        svg: whatsapp,
+        width: 24,
+        heigth: 24,
+    },
+    telegram: {
+        svg: telegram,
+        width: 24,
+        heigth: 24,
+    },
+    facebook: {
+        svg: facebook,
+        width: 25,
+        heigth: 24,
+    },
+}

src/api/groups.ts

@@ -0,0 +1,58 @@
+import { HttpClient, RequestOptions } from "./HttpClient"
+
+/* eslint-disable @typescript-eslint/naming-convention */
+
+export interface GroupOptions {
+    name?: string
+    year?: string
+    degree?: string
+    type?: string
+    platform?: string
+    language?: string
+    office?: string
+}
+
+export interface Group {
+    class: string
+    office: string
+    id?: string
+    degree?: string
+    school?: string
+    link_id: string
+    language: string
+    type_?: string
+    year: string | null //probably I should use  | null evreywhere?
+    platform: string
+    permanent_id?: number
+    last_updated?: string
+    link_is_working?: string
+}
+
+const client = HttpClient.getInstance()
+
+/**
+ * Collection of endpoints related to Groups.
+ */
+export const groups = {
+    /**
+     * Retrieves groups from PoliNetwork server.
+     * Check {@link GroupOptions} for additional parameters.
+     */
+    async get(groupsOptions?: GroupOptions, options?: RequestOptions) {
+        const response = await client.poliNetworkInstance.get<{
+            groups: Group[]
+        }>("/v1/groups", {
+            ...options,
+            params: {
+                name: groupsOptions?.name,
+                year: groupsOptions?.year,
+                degree: groupsOptions?.degree,
+                type: groupsOptions?.type,
+                platform: groupsOptions?.platform,
+                language: groupsOptions?.language,
+                office: groupsOptions?.office,
+            },
+        })
+        return response.data.groups
+    },
+}

src/api/index.ts

@@ -1,5 +1,6 @@
 import { articles } from "./articles"
 import { auth } from "./auth"
+import { groups } from "./groups"
 import { tags } from "./tags"
 import { timetable } from "./timetable"
 import { user } from "./user"
@@ -27,4 +28,5 @@ export const api = {
     tags,
     timetable,
     user,
+    groups,
 }

src/components/Settings/SettingsScroll.tsx → src/components/ContentWrapperScroll.tsx

@@ -7,9 +7,12 @@ import { usePalette } from "utils/colors"
 /**
  * General component useful for pages with a scrollable content.
  * It provides a navbar and a scrollview with margin and rounded corners.
+ * Default margin Top is 86 (proper margin for Settings Page)
  */
-export const SettingsScroll: FC<{
-    title: string
+export const ContentWrapperScroll: FC<{
+    children: React.ReactNode
+
+    title?: string
     /**
      * Remove the navbar from the bottom of the page.
      */
@@ -18,8 +21,7 @@ export const SettingsScroll: FC<{
      * Props for the navbar, see {@link NavBar}
      */
     navbarOptions?: NavbarProps
-
-    children: React.ReactNode
+    marginTop?: number
 }> = props => {
     const { background, isLight, primary } = usePalette()
 
@@ -32,30 +34,33 @@ export const SettingsScroll: FC<{
                 backgroundColor: isLight ? primary : background,
             }}
         >
-            <View
-                style={{
-                    position: "absolute",
-                    top: 42,
-                    left: 26,
-                    zIndex: 6,
-                }}
-            >
-                <Text
+            {props.title && (
+                <View
                     style={{
-                        color: isLight ? "#fff" : primary,
-                        fontSize: 24,
-                        fontWeight: "900",
+                        position: "absolute",
+                        top: 42,
+                        left: 26,
+                        zIndex: 6,
                     }}
                 >
-                    {props.title}
-                </Text>
-            </View>
+                    <Text
+                        style={{
+                            color: isLight ? "#fff" : primary,
+                            fontSize: 24,
+                            fontWeight: "900",
+                        }}
+                    >
+                        {props.title}
+                    </Text>
+                </View>
+            )}
+
             <View
                 style={{
                     backgroundColor: background,
                     borderTopLeftRadius: 30,
                     borderTopRightRadius: 30,
-                    marginTop: 86,
+                    marginTop: props.marginTop ?? 86,
                     zIndex: 2,
                     flex: 1,
                     shadowColor: "#000",
@@ -69,7 +74,6 @@ export const SettingsScroll: FC<{
                     <View>{props.children}</View>
                 </ScrollView>
             </View>
-
             {navbar ? <NavBar {...props.navbarOptions} /> : null}
         </View>
     )

src/components/Divider.tsx

@@ -1,19 +1,25 @@
 import React, { FC } from "react"
-import { View } from "react-native"
+import { View, ViewStyle } from "react-native"
 
 export interface DividerProps {
     color?: string
     height?: number
+    width?: number
+    style?: ViewStyle
 }
 
 export const Divider: FC<DividerProps> = props => {
     return (
         <View
-            style={{
-                backgroundColor: props.color ?? "#8791BD",
-                height: props.height ?? 1,
-                width: "100%",
-            }}
+            style={[
+                {
+                    backgroundColor: props.color ?? "#8791BD",
+                    height: props.height ?? 1,
+                    width: props.width ?? "100%",
+                },
+
+                props.style,
+            ]}
         />
     )
 }

src/components/Groups/AnimatedLine.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from "react"
+import { Animated, Easing, ViewStyle } from "react-native"
+import { usePalette } from "utils/colors"
+
+export interface AnimatedLineProps {
+    /**
+     * animate when this value changes
+     */
+    mounted: boolean
+    color?: string
+    height?: number
+    width?: number
+    style?: ViewStyle
+}
+
+export const AnimatedLine: FC<AnimatedLineProps> = props => {
+    const { isLight } = usePalette()
+
+    const { current: widthAnim } = React.useRef<Animated.Value>(
+        new Animated.Value(1)
+    )
+
+    React.useEffect(() => {
+        if (props.mounted) {
+            Animated.timing(widthAnim, {
+                toValue: 250,
+                duration: 300,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start()
+        } else {
+            Animated.timing(widthAnim, {
+                toValue: 0,
+                duration: 300,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start()
+        }
+    }, [props.mounted])
+
+    return (
+        <Animated.View
+            style={[
+                {
+                    backgroundColor: isLight ? "#000" : "#8791BD",
+                    height: props.height ?? 1,
+                    width: widthAnim,
+                    alignSelf: "center",
+                },
+                props.style,
+            ]}
+        />
+    )
+}

src/components/Groups/AnimatedPoliSearchBar.tsx

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