@olea-bps/base 1.0.0

package/libraries/stored-state/index.js

@@ -0,0 +1,155 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useReducer, useEffect, useCallback } from 'react';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as SecureStore from 'expo-secure-store';
+
+/**
+ * Erstellt einen State, der über async-storage persistiert wird und eine Update- bzw. Reset-Funktion.
+ * Dieser Hook kann wie der useState-Hook von React benutzt werden.
+ * Der Inhalt wird nicht verschlüsselt abgelegt.
+ * Falls eine Verschlüsselung gewünscht wird, ist {@link useSecureStoredState} zu nutzen.
+ * @param {string} key Schlüssel, unter welcher der Wert des States persistiert wird.
+ * @param {any | (() => any)} initialState Initialer Wert des States
+ * @return {[]} Array, welches den Wert des States, eine Update-Funktion und eine Reset-Funktion beinhaltet
+ */
+export function asyncStoredState(key, initialState) {
+    const [value, setValue] = useState(initialState);
+
+    const clearValue = useCallback(
+        () => {
+            AsyncStorage.removeItem(key)
+                .then(() => setValue(initialState))
+
+        },
+        [setValue, AsyncStorage.removeItem]
+    )
+
+    useEffect(
+        () => {
+            AsyncStorage.getItem(key)
+                .then(JSON.parse)
+                .then(setValue);
+        },
+        []
+    )
+
+    useEffect(
+        () => {
+            AsyncStorage.setItem(key, JSON.stringify(value));
+        },
+        [value]
+    )
+
+    return [value, setValue, clearValue];
+}
+
+/**
+ * Dieser Hook stellt einen State zur Verfügung, welcher automatisch in dem lokalen Speicher persistiert wird.
+ * Der State kann als sinsitiv makiert werden, wodurch der enthaltende Wert nicht in Logausgeben geschrieben wird.
+ * Standartmäßig sind die SecureStoredStates nicht sensitiv markiert.
+ *
+ * @param {string} key Schlüssel unter welchem der Wert des State geladen und gespeichert wird.
+ * @param {*} initialState Initialer Wert des States.
+ * @param {boolean} [sensitiv=true] Ist der gespeicherte Wert nicht in den Logs auszugeben?
+ * @returns {[state, (newState) => void], () => void}
+ */
+export function useSecureStoredState(key, initialState = null, sensitiv = false) {
+    const hookName = useSecureStoredState.name;
+
+    const [state, setState] = useState(
+        () => {
+            const stringValue = SecureStore.getItem(key);
+            if (stringValue) {
+                return JSON.parse(stringValue);
+            } else {
+                return undefined;
+            }
+        }
+    );
+
+    const setSecureStoredState = useCallback(
+        value => {
+            SecureStore
+                .setItemAsync(key, JSON.stringify(value))
+                .then(() => setState(value))
+                .catch(reason => console.error(hookName, ': can`t store secure state: ', reason, 'key:', key, 'value:', sensitiv ? '***sensitiv value***' : value));
+        },
+        [key, setState, SecureStore]
+    )
+
+    function deleteSecureStoredState() {
+        SecureStore
+            .deleteItemAsync(key)
+            .then(() => setState(undefined))
+            .then(() => console.debug(hookName, ':', 'remove secure state', key))
+            .catch((reason) => console.debug(hookName, ':', 'can`t remove secure state', key, ':', reason));
+    }
+
+    return [
+        state !== undefined
+            ? state
+            : initialState,
+        setSecureStoredState,
+        deleteSecureStoredState,
+    ];
+}
+
+/**
+ * Dieser Hook stellt einen State zur Verfügung, welcher automatisch in dem lokalen Speicher persistiert wird.
+ * Der State kann als sinsitiv makiert werden, wodurch der enthaltende Wert nicht in Logausgeben geschrieben wird.
+ * Standartmäßig sind die SecureStoredStates nicht sensitiv markiert.
+ *
+ * @param {string} key Schlüssel unter welchem der Wert des State geladen und gespeichert wird.
+ * @param {(prevState: any) => any} reducer The reducer function that specifies how the state gets updated. It must be pure, should take the state and action as arguments, and should return the next state. State and action can be of any types.
+ * @param {*} initialState Initialer Wert des States.
+ * @param {boolean} [sensitiv=true] Ist der gespeicherte Wert nicht in den Logs auszugeben?
+ * @returns {[state, (newState) => void]}
+ */
+export function useSecureStoredReducer(key, reducer, initialState = null, sensitiv = false) {
+    const hookName = useSecureStoredReducer.name;
+
+    const [state, dispatch] = useReducer(
+        reducer,
+        undefined,
+        () => {
+            const stringValue = SecureStore.getItem(key);
+            if (stringValue) {
+                return JSON.parse(stringValue);
+            } else {
+                return undefined;
+            }
+        },
+    );
+
+    useEffect(
+        () => {
+            if (state !== undefined) {
+                SecureStore
+                    .setItemAsync(key, JSON.stringify(state))
+                    .catch(reason => console.error(hookName, ': can`t store secure state: ', reason, 'key:', key, 'value:', sensitiv ? '***sensitiv value***' : state));
+            }
+        },
+        [state]
+    )
+
+    return [
+        state !== undefined
+            ? state
+            : initialState,
+        dispatch,
+    ];
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@olea-bps/base",
+  "version": "1.0.0",
+  "description": "OLEA base library",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tuc-urz/olea.git",
+    "directory": "packages/"
+  },
+  "contributors": [
+    {
+      "name": "Universitätsrechenzentrum TU Chemnitz",
+      "email": "support@hrz.tu-chemnitz.de",
+      "url": "https://www.tu-chemnitz.de/urz/"
+    },
+    {
+      "name": "codeculture",
+      "email": "info@codeculture.de",
+      "url": "https://codeculture.de/"
+    },
+    {
+      "name": "BPS Bildungsportal Sachsen GmbH",
+      "email": "info@bps-system.de",
+      "url": "https://www.bps-system.de/"
+    }
+  ],
+  "license": "Apache-2.0",
+  "dependencies": {
+    "redux": "^4.0.5",
+    "redux-persist": "^6.0.0",
+    "react-redux": "^9.2.0",
+    "react-native-webview": "13.16.0",
+    "react-native-vector-icons": "^10.2.0",
+    "react-native-uuid": "^2.0.3",
+    "react-native-tab-view": "^4.1.3",
+    "react-native-swipe-gestures": "^1.0.5",
+    "react-native-svg": "15.15.4",
+    "react-native-paper": "^5.14.5",
+    "react-native-modalbox": "^2.0.2",
+    "react-native-elements": "^3.4.3",
+    "moment": "^2.29.4",
+    "jwt-decode": "4.0.0",
+    "expo-web-browser": "~14.2.0",
+    "expo-linear-gradient": "~15.0.7",
+    "expo-crypto": "~14.1.4",
+    "expo-auth-session": "~6.2.1",
+    "expo-application": "^6.1.5",
+    "@react-navigation/native": "^7.1.9",
+    "@react-navigation/drawer": "^7.3.12",
+    "@react-native-firebase/messaging": "^22.2.0",
+    "@react-native-firebase/app": "^22.2.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-native-async-storage/async-storage": "~2.2.0",
+    "@novu/client": "^2.6.6",
+    "@notifee/react-native": "^9.1.8"
+  },
+  "peerDependencies": {
+    "redux": "^4.0.5",
+    "react": "^19.0.0",
+    "react-redux": "^9.2.0",
+    "react-native": "^0.81.0",
+    "react-native-paper": "^5.0.0"
+  },
+  "devDependencies": {
+    "@expo/vector-icons": "^14.1.0"
+  }
+}

package/views/Callmanager/index.js

@@ -0,0 +1,148 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useMemo } from 'react';
+import {
+    SafeAreaView,
+    StyleSheet,
+    View,
+    Switch,
+    Alert,
+    RefreshControl,
+} from 'react-native';
+
+import { connect } from 'react-redux'
+import { useTheme, Text, Button } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+import { useParallelCalls } from '../../context/context-callmanager';
+import { useUser } from '../../context/context-user';
+import AppbarComponent from '../../components/AppBar';
+
+import componentStyles from './styles';
+
+export default function CallManagerView(props) {
+    const componentName = CallManagerView.name;
+    const theme = useTheme();
+    const themeStyles = theme?.themeStyles;
+
+    const { t } = useTranslation();
+
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const [user, login, logout] = useUser();
+    const [parallelCalls, refreshParallelCalls, changeParallelCall] = useParallelCalls();
+
+    const [remoteDestinationProfilesRefreshing, setRemoteDestinationProfilesRefreshing] = useState(false);
+
+    return (
+        <SafeAreaView style={themeStyles.appSafeAreaContainer}>
+            <AppbarComponent {...props}
+                title={t('menu:titles.callmanager')}
+            />
+            <View style={themeStyles.container}>
+                {
+                    // Wenn ein Nutzer in der App angemeldet ist, werden dessen Parralelrufe angezeigt. Ansonsten wird der Nutzer zum Loggin aufgefordert.
+                    user
+                        ? <RefreshControl
+                            refreshing={remoteDestinationProfilesRefreshing}
+                            onRefresh={() => {
+                                setRemoteDestinationProfilesRefreshing(true);
+                                refreshParallelCalls()
+                                    .finally(() => setRemoteDestinationProfilesRefreshing(false));
+                            }}
+                        >
+                            <Text>
+                                {t('callmanager:userInfo', { userName: user.name, userPhoneNumber: user.phone_number })}
+                            </Text>
+                            {
+                                parallelCalls?.map?.(
+                                    parallelCall => {
+                                        const isActive = parallelCall?.enableMobileConnect;
+
+                                        return (
+                                            <View
+                                                key={parallelCall?.destination}
+                                            >
+                                                <Text>
+                                                    {parallelCall?.destination ?? t('callmanager:numberNotDisplayable')}
+                                                </Text>
+                                                <Switch
+                                                    value={isActive}
+                                                    onValueChange={
+                                                        value =>
+                                                            changeParallelCall(parallelCall?.destination, { enableMobileConnect: value })
+                                                                .then(() => refreshParallelCalls())
+                                                    }
+                                                />
+                                            </View >
+                                        )
+                                    }
+                                )
+                            }
+                            <Button
+                                onPress={() => Alert.alert(
+                                    t('callmanager:logout'),
+                                    t('callmanager:logoutConfirmation'),
+                                    [
+                                        {
+                                            text: t('callmanager:logoutOkButton'),
+                                            onPress: () => logout?.(),
+                                        },
+                                        {
+                                            text: t('callmanager:logoutNoButton'),
+                                            isPreferred: true,
+                                        }
+                                    ]
+                                )}
+                            >
+                                {t('callmanager:logout')}
+                            </Button>
+                        </RefreshControl>
+                        : <>
+                            <Text>
+                                {t('callmanager:notLoggedIn')}
+                            </Text>
+                            <Button
+                                onPress={
+                                    () =>
+                                        login
+                                            ? login()
+                                                .catch(
+                                                    reason => {
+                                                        Alert.alert(
+                                                            t('callmanager:loginFailed'),
+                                                            t('callmanager:tryLoginAgain'),
+                                                        );
+                                                        console.debug(componentName, ':', 'login failed', ':', reason);
+                                                    }
+                                                )
+                                            : Alert.alert(
+                                                t('callmanager:connectionError'),
+                                                t('callmanager:connectionErrorTryLoginAgain'),
+                                            )
+                                }
+                            >
+                                {t('callmanager:logginButton')}
+                            </Button>
+                        </>
+                }
+            </View>
+        </SafeAreaView >
+    )
+}

package/views/Callmanager/styles.js

@@ -0,0 +1,62 @@
+export default function(theme) {
+    return {
+      activity: {
+        padding: 20
+      },
+      arrowIcon: {
+        marginStart: 'auto',
+        marginEnd: 10,
+      },
+      companyCity:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall,
+        color: theme.colors.secondaryText
+      },
+      container: {
+          flex: 1,
+          backgroundColor: theme.colors.background,
+      },
+      containerErrorMsg: {
+        flex: 1,
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        margin: theme.paddings.default,
+      },
+      content: {
+        backgroundColor: theme.colors.background,
+        flex: 1
+      },
+      date:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall
+      },
+      header: {
+        backgroundColor: theme.colors.background,
+        padding: 10,
+        flexDirection: "row",
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+      },
+      headerText: {
+        fontSize: theme.fontSizes.l,
+        ...theme.fonts.light,
+        marginTop: 10,
+        marginBottom: 10
+      },
+      innerContainer: {
+        padding: 40,
+        marginTop: 200
+      },
+      title:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor
+      },
+      titleNoJobs:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor,
+        textAlign: 'center',
+        marginBottom: theme.paddings.default
+      },  
+    }
+};