Piteball
/
skolplattformen-backup
mirror of https://github.com/kolplattformen/skolplattformen.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 🎸 Notifications viewable

This commit is contained in:
Johan Öbrink 2021-01-26 12:02:24 +01:00
parent a7f5e88aaa
commit 1a80f89c0a
7 changed files with 5562 additions and 3258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/app/components/child.component.js
View File

@ -1,34 +1,52 @@
import React from 'react'
import { StyleSheet } from 'react-native';
import { TabBar, TopNavigation, TopNavigationAction, Tab, TabView, OverflowMenu, MenuItem, Layout, Text, Divider, Icon } from '@ui-kitten/components'
import { StyleSheet } from 'react-native'
import {
TopNavigation,
TopNavigationAction,
Tab,
TabView,
OverflowMenu,
MenuItem,
Layout,
Text,
Icon,
} from '@ui-kitten/components'
import { DateTime } from 'luxon'
import { NewsList } from './newsList.component'
import { Calendar } from './calendar.component'
import { Classmates } from './classmates.component'
import { SafeAreaView } from 'react-native-safe-area-context';
import { useNotifications, useNews, useClassmates, useCalendar, useSchedule } from '@skolplattformen/react-native-embedded-api'
import { NotificationsList } from './notificationsList.component'
import { SafeAreaView } from 'react-native-safe-area-context'
import {
useNotifications,
useNews,
useClassmates,
useCalendar,
useSchedule,
} from '@skolplattformen/react-native-embedded-api'
export const Child = ({ route, navigation }) => {
const [selectedIndex, setSelectedIndex] = React.useState(0)
const { child, color } = route.params;
const { child, color } = route.params
const { data: notifications, status: notificationsStatus } = useNotifications(child)
const { data: news, status: newsStatus } = useNews(child)
const { data: classmates, status: classmatesStatus } = useClassmates(child)
const { data: calendar, status: calendarStatus } = useCalendar(child)
const { data: schedule, status: scheduleStatus } = useSchedule(child, DateTime.local(), DateTime.local().plus({ days: 7 }))
const [menuVisible, setMenuVisible] = React.useState(false);
const [menuVisible, setMenuVisible] = React.useState(false)
const NewsIcon = (props) => (
<Icon {...props} name='activity-outline' />
)
const NotificationsIcon = (props) => (
<Icon {...props} name='alert-circle-outline' />
)
const CalendarIcon = (props) => (
<Icon {...props} name='calendar-outline' />
)
const ClassIcon = (props) => (
<Icon {...props} name='people-outline' />
)
const EditIcon = (props) => (
<Icon {...props} name='edit' />
)
@ -54,7 +72,7 @@ export const Child = ({ route, navigation }) => {
const toggleMenu = () => {
setMenuVisible(!menuVisible);
setMenuVisible(!menuVisible)
}
const renderMenuAction = () => (
@ -71,7 +89,7 @@ export const Child = ({ route, navigation }) => {
<MenuItem accessoryLeft={SettingsIcon} title='Anmäl frånvaro' />
</OverflowMenu>
</React.Fragment>
);
)
return (
<SafeAreaView style={{ flex: 1 }} style={{ ...styles.topBar, color: color }}>
@ -86,6 +104,11 @@ export const Child = ({ route, navigation }) => {
<NewsList news={news} />
</Layout>
</Tab>
<Tab title="Notifieringar" icon={NotificationsIcon}>
<Layout style={styles.tabContainer}>
<NotificationsList notifications={notifications} status={notificationsStatus} />
</Layout>
</Tab>
<Tab title="Schema" icon={CalendarIcon}>
<Layout style={styles.tabContainer}>
<Calendar calendar={[...calendar ?? [], ...schedule ?? []]}></Calendar>

58
packages/app/components/modalWebView.component.js Normal file
View File

@ -0,0 +1,58 @@
import { useApi } from '@skolplattformen/react-native-embedded-api'
import { Icon, Text } from '@ui-kitten/components'
import React from 'react'
import { Modal, StyleSheet, View } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { SafeAreaView } from 'react-native-safe-area-context'
import { WebView } from 'react-native-webview'
import URI from 'jsuri'
export const ModalWebView = ({ url, onClose }) => {
const { cookie } = useApi()
const uri = new URI(url)
return (
<Modal>
<SafeAreaView style={styles.container}>
<View style={styles.headerWrapper}>
<View style={styles.header}>
<Text category="s1">{uri.host()}</Text>
<TouchableOpacity onPress={onClose}>
<Icon
name='close-circle'
style={styles.icon}
fill="#333333" />
</TouchableOpacity>
</View>
</View>
<WebView
style={styles.webview}
source={{ uri: url, headers: { cookie } }} />
</SafeAreaView>
</Modal>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
},
headerWrapper: {
backgroundColor: '#333333',
padding: 5,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 10,
paddingVertical: 4,
backgroundColor: '#ffffff',
borderRadius: 5,
},
icon: {
width: 30,
height: 30,
},
webview: {
},
})

38
packages/app/components/notification.component.js Normal file
View File

@ -0,0 +1,38 @@
import React, { useState } from 'react'
import { Card, Text } from '@ui-kitten/components'
import { StyleSheet, View } from 'react-native'
import { ModalWebView } from './modalWebView.component'
export const Notification = ({ item }) => {
const [isOpen, setIsOpen] = useState(false)
const open = () => setIsOpen(true)
const close = () => setIsOpen(false)
return (
<>
<Card
style={styles.card}
onPress={open}
header={(headerProps) => (
<View {...headerProps} >
<Text category='h6'>{item.sender}</Text>
{item.category && (
<Text category='s1'>{item.category}</Text>
)}
<Text>{item.message}</Text>
</View>
)}>
</Card>
{isOpen && (
<ModalWebView url={item.url} onClose={close} />
)}
</>
)
}
const styles = StyleSheet.create({
card: {
flex: 1,
margin: 2,
},
})

26
packages/app/components/notificationsList.component.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
import { StyleSheet } from 'react-native'
import { List } from '@ui-kitten/components'
import { Notification } from './notification.component'
export const NotificationsList = ({ notifications, status }) => {
return (
<List
style={styles.container}
contentContainerStyle={styles.contentContainer}
data={notifications}
renderItem={(info) => (
<Notification key={info.item.id} item={info.item} />
)} />
)
}
const styles = StyleSheet.create({
container: {},
contentContainer: {
paddingRight: 10,
paddingBottom: 330
}
})

16
packages/app/ios/Podfile.lock
View File

@ -237,6 +237,8 @@ PODS:
- React-Core
- react-native-safe-area-context (3.1.9):
- React-Core
- react-native-webview (11.2.1):
- React-Core
- React-RCTActionSheet (0.62.2):
- React-Core/RCTActionSheetHeaders (= 0.62.2)
- React-RCTAnimation (0.62.2):
@ -296,15 +298,15 @@ PODS:
- React-cxxreact (= 0.62.2)
- React-jsi (= 0.62.2)
- ReactCommon/callinvoker (= 0.62.2)
- RNCAsyncStorage (1.13.2):
- React
- RNCAsyncStorage (1.13.3):
- React-Core
- RNCMaskedView (0.1.10):
- React
- RNGestureHandler (1.9.0):
- React-Core
- RNReanimated (1.13.2):
- React-Core
- RNScreens (2.15.0):
- RNScreens (2.17.0):
- React-Core
- RNSVG (12.1.0):
- React
@ -336,6 +338,7 @@ DEPENDENCIES:
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- "react-native-cookies (from `../node_modules/@react-native-community/cookies`)"
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- react-native-webview (from `../node_modules/react-native-webview`)
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
- React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@ -403,6 +406,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/@react-native-community/cookies"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
react-native-webview:
:path: "../node_modules/react-native-webview"
React-RCTActionSheet:
:path: "../node_modules/react-native/Libraries/ActionSheetIOS"
React-RCTAnimation:
@ -466,6 +471,7 @@ SPEC CHECKSUMS:
React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
react-native-cookies: ce50e42ace7cf0dd47769260ca5bbe8eee607e4e
react-native-safe-area-context: 86612d2c9a9e94e288319262d10b5f93f0b395f5
react-native-webview: dbe6c1ad149740f0e2d84a963f1d3c3e77f2d99c
React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71
@ -476,11 +482,11 @@ SPEC CHECKSUMS:
React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d
React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
RNCAsyncStorage: bc2f81cc1df90c267ce9ed30bb2dbc93b945a8ee
RNCAsyncStorage: 32c7cbe1d43dff5f03f3d0b9e9d2c44d8ec91a3a
RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
RNScreens: 2ad555d4d9fa10b91bb765ca07fe9b29d59573f0
RNScreens: 23c1fbf7797261321f6db93fdcbd9913573535e4
RNSVG: ce9d996113475209013317e48b05c21ee988d42e
Yoga: 3ebccbdd559724312790e7742142d062476b698e
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

8607
packages/app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
packages/app/package.json
View File

@ -12,46 +12,48 @@
"dependencies": {
"@eva-design/eva": "2.0.0",
"@eva-design/material": "^2.0.0",
"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-async-storage/async-storage": "^1.13.3",
"@react-native-community/cookies": "^5.0.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/material-top-tabs": "^5.3.10",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"@react-navigation/material-top-tabs": "^5.3.13",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",
"@skolplattformen/react-native-embedded-api": "^0.10.2",
"@ui-kitten/components": "5.0.0",
"@ui-kitten/eva-icons": "5.0.0",
"buffer": "^6.0.3",
"faker": "^5.1.0",
"faker": "^5.2.0",
"jsuri": "^1.3.1",
"luxon": "^1.25.0",
"personnummer": "^3.1.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-calendar-strip": "^2.0.9",
"react-native-calendar-strip": "^2.1.5",
"react-native-fix-image": "^2.1.0",
"react-native-gesture-handler": "^1.9.0",
"react-native-markdown-display": "^7.0.0-alpha.2",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.15.0",
"react-native-screens": "^2.17.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-tab-view": "^2.15.2",
"react-native-webview": "^11.2.1",
"use-async-storage": "^1.2.0"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^1.0.0",
"@babel/core": "^7.12.10",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@types/react": "^16.8.24",
"@types/react-native": "^0.63.43",
"@ui-kitten/metro-config": "5.0.0",
"babel-jest": "^24.9.0",
"babel-jest": "^26.6.3",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "^2.0.2",
"eslint": "^7.18.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"prettier": "^2.2.1",
"react-test-renderer": "16.11.0"
},
"jest": {