Feature/cu 34ga47h - News

App.tsx

@@ -13,11 +13,11 @@ import {
 import { AppContainer } from "./src/AppContainer"
 
 import { OutsideClickProvider } from "utils/outsideClick"
-import { LoginContext, LoginState } from "utils/login"
 import { api } from "api"
 
 import AsyncStorage from "@react-native-async-storage/async-storage"
-import { SettingsContext, Settings } from "utils/settings"
+import { LoginContext, LoginState } from "contexts/login"
+import { SettingsContext, Settings } from "contexts/settings"
 import { useLoadTokens } from "utils/loadTokens"
 import { HttpClient } from "api/HttpClient"
 import { usePalette } from "utils/colors"

babel.config.js

@@ -13,6 +13,7 @@ module.exports = function (api) {
                         navigation: "./src/navigation",
                         pages: "./src/pages",
                         utils: "./src/utils",
+                        contexts: "./src/contexts",
                         api: "./src/api",
                     },
                 },

package.json

@@ -27,7 +27,7 @@
         "@react-navigation/native": "^6.0.13",
         "@react-navigation/stack": "^6.3.2",
         "@shopify/react-native-skia": "0.1.157",
-        "axios": "^1.1.3",
+        "axios": "1.2.1",
         "expo": "^47.0.0",
         "expo-asset": "~8.7.0",
         "expo-linear-gradient": "~12.0.1",
@@ -46,6 +46,7 @@
         "react-native-screens": "~3.18.0",
         "react-native-status-bar-height": "^2.6.0",
         "react-native-svg": "13.4.0",
+        "react-native-switch": "^1.5.1",
         "react-native-vector-icons": "^9.1.0",
         "react-native-web": "~0.18.7",
         "react-native-webview": "11.23.1",

src/MainContainer.tsx

@@ -1,9 +1,11 @@
-import React, { FC } from "react"
+import React, { FC, useEffect, useState } from "react"
 import { View } from "react-native"
 import { Tray } from "components/Tray"
 import { usePalette } from "utils/colors"
 import { useNavigation } from "navigation/NavigationTypes"
 import { MainStack } from "navigation/MainStackNavigator"
+import { NewsPreferencesContext, Preference } from "contexts/newsPreferences"
+import AsyncStorage from "@react-native-async-storage/async-storage"
 
 /**
  * The Main Container.
@@ -15,15 +17,52 @@ export const MainContainer: FC = () => {
     const { homeBackground } = usePalette()
 
     const { navigate } = useNavigation()
+
+    const [preferences, setPreferences] = useState<Record<string, Preference>>(
+        {}
+    )
+
+    useEffect(() => {
+        console.log("Loading tags preferences from storage")
+        AsyncStorage.getItem("newstags:preferences")
+            .then(preferencesJSON => {
+                if (preferencesJSON) {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    const data: Record<string, Preference> =
+                        JSON.parse(preferencesJSON)
+                    console.log(data)
+                    setPreferences(data)
+                }
+            })
+            .catch(err => console.log(err))
+    }, [])
+
+    useEffect(() => {
+        console.log("Saving tags preferences to storage")
+        console.log(preferences)
+        AsyncStorage.setItem(
+            "newstags:preferences",
+            JSON.stringify(preferences)
+        ).catch(err => console.log(err))
+    }, [preferences])
+
     return (
         <View
             style={{
                 flex: 1,
                 backgroundColor: homeBackground,
             }}
         >
-            <MainStack />
-
+            <NewsPreferencesContext.Provider
+                value={{
+                    preferences,
+                    setArticlesPreferences: pref => {
+                        setPreferences(pref.preferences)
+                    },
+                }}
+            >
+                <MainStack />
+            </NewsPreferencesContext.Provider>
             <Tray
                 onDownloads={() => {
                     console.log("downloads")

src/api/HttpClient.ts

@@ -5,7 +5,7 @@ import axios, {
     AxiosRequestConfig,
     AxiosResponse,
 } from "axios"
-import { PolimiToken, PoliNetworkToken, Tokens } from "utils/login"
+import { PolimiToken, PoliNetworkToken, Tokens } from "contexts/login"
 import AsyncStorage from "@react-native-async-storage/async-storage"
 import { wait } from "utils/functions"
 

src/api/articles.ts

@@ -1,16 +1,31 @@
-import { getIsoStringFromDaysPassed } from "utils/functions"
+/* eslint-disable @typescript-eslint/naming-convention */
 import { HttpClient, RequestOptions } from "./HttpClient"
 
-/* eslint-disable @typescript-eslint/naming-convention */
+export interface Tags {
+    tags: Tag[]
+}
+
+export interface Tag {
+    name: string
+    image: string
+}
+
 export interface Articles {
-    results: Article[]
+    articles: Article[]
+    start: string | null
+    end: string | null
+    tag: string | null
+    author_id: number | null
+    title: string | null
 }
 export interface Article {
+    id: number
+    tag_id: string
     title: string
     subtitle?: string
     latitude?: number
     longitude?: number
-    publish_time?: string
+    publish_time: string
     target_time?: string
     content: string
     image?: string
@@ -24,37 +39,66 @@ const client = HttpClient.getInstance()
  */
 export const articles = {
     /**
-     * Retrieves articles from PoliNetwork server, from n-days ago till
-     * ending ISO date.
+     * Retrieves at most `limit` articles of a given tag from PoliNetwork server.
+     *
+     * If offset is `0` the newest `limit` articles are returned;
+     * if offset is `1` the next `limit` articles are returned, and so on.
+     *
+     * In the last group there might be less than `limit` articles.
+     *
+     * @param tag the news category
+     * @param limit maximum number of articles retrieved
+     * @param offset the page offset parameter
+     *
+     * @param options see {@link RequestOptions}
+     *
+     * @example
+     * ```ts
+     *  api.articles.getFromOffsetByTag("TAG", 10, 2)
+     *     .then(response => {
+     *          const articles: Article[] = response
+     *          //do something
+     *      })
+     *      .catch(err => console.log(err))
+     * }
+     * ```
      */
-    async getFromDaysAgoTillDate(
-        days: number,
-        end: string,
+    async getFromOffsetByTag(
+        tag: string,
+        limit: number,
+        offset: number,
         options?: RequestOptions
     ) {
-        const start: string = getIsoStringFromDaysPassed(days)
         const response = await client.poliNetworkInstance.get<Articles>(
             "/v1/articles",
             {
                 ...options,
-                params: { start: start, end: end },
+                params: {
+                    limit: limit,
+                    pageOffset: offset,
+                    tag: tag,
+                    sort: "date",
+                },
             }
         )
-        return response.data.results
+        return response.data.articles
     },
+
     /**
-     * Retrieves articles from PoliNetwork server, given a starting and ending ISO date.
+     * Retrieves the last article of a given tag from PoliNetwork server.
+     *
+     * @param tag the news category
+     *
+     * @param options see {@link RequestOptions}
      */
-    async getFromDateTillDate(
-        start: string,
-        end: string,
-        options?: RequestOptions
-    ) {
+    async getLastArticleByTag(tag: string, options?: RequestOptions) {
         const response = await client.poliNetworkInstance.get<Articles>(
             "/v1/articles",
-            options
+            {
+                ...options,
+                params: { tag: tag, limit: 1, sort: "date" },
+            }
         )
-
-        return response.data.results
+        return response.data.articles[0]
     },
 }

src/api/auth.ts

@@ -1,4 +1,4 @@
-import { PolimiToken } from "utils/login"
+import { PolimiToken } from "contexts/login"
 import { HttpClient, RequestOptions } from "./HttpClient"
 
 const client = HttpClient.getInstance()

src/components/CardWithGradient.tsx

@@ -45,33 +45,39 @@ export const CardWithGradient: FC<CardWithGradientProps> = props => {
 
     const closerToCorner = props.closerToCorner ?? false
 
-    // TODO: what is the default image?
-    const imageURL =
-        props.imageURL ||
-        "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
-
     return (
         <Pressable
             style={[
                 { marginBottom: 17, borderRadius: borderRadius },
                 props.style,
             ]}
-            onPress={props.onClick ?? null}
+            onPress={props.onClick}
         >
             <ImageBackground
-                source={{ uri: imageURL }}
+                source={props.imageURL ? { uri: props.imageURL } : {}}
                 style={{ width: "100%", height: "100%" }}
                 imageStyle={{ borderRadius: borderRadius }}
             >
                 <LinearGradient
-                    colors={[
-                        "rgba(255, 181, 68, 0.88)",
-                        "rgba(255, 181, 68, 0)",
-                    ]}
-                    locations={[0, 0.5656]}
+                    colors={
+                        props.imageURL
+                            ? [
+                                  "rgba(255, 181, 68, 0.88)",
+                                  "rgba(255, 181, 68, 0)",
+                              ]
+                            : [
+                                  "rgba(255, 181, 68, 0.88)",
+                                  "rgba(255, 181, 68, 0.34)",
+                              ]
+                    }
+                    locations={props.imageURL ? [0, 0.5656] : [0, 1]}
                     style={{ flex: 1, borderRadius: borderRadius }}
                 >
-                    <View style={{ margin: closerToCorner ? 9 : 17 }}>
+                    <View
+                        style={{
+                            margin: closerToCorner ? 9 : 17,
+                        }}
+                    >
                         <CardTitle style={{ lineHeight: 19 }}>
                             {props.title}
                         </CardTitle>