Doble/Tones
1
0
Fork 0
Code Issues 5 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Feature/notification system #26

Open
mattdimegs wants to merge 34 commits from feature/notification-system into main
pull from: feature/notification-system
merge into: Doble:main
Conversation 0 Commits 34 Files changed 113 +939 -909
8 changed files with 939 additions and 909 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 1b8533d192 - Show all commits

1594
app/call.jsx
View file

File diff suppressed because it is too large Load diff

26
app/incidents.jsx
View file

@ -15,6 +15,10 @@ import ActionSheet from 'react-native-actions-sheet';
const DepartmentActionSheet = styled(ActionSheet)``; const DepartmentActionSheet = styled(ActionSheet)``;
function toBase64Unicode(str) {
return btoa(new TextEncoder().encode(str).reduce((data, byte) => data + String.fromCharCode(byte), ''));
}
export default function Incidents() { export default function Incidents() {
const actionSheetRef = useRef(null); const actionSheetRef = useRef(null);
const callFeed = useCallFeed(); const callFeed = useCallFeed();
@ -49,17 +53,8 @@ export default function Incidents() {
return ( return (
<React.Fragment> <React.Fragment>
<PageHeader> <PageHeader
<View centerHeader={<TouchableOpacity
style={{
flexDirection: 'column',
height: 80,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 7
}}
>
<TouchableOpacity
style={{ style={{
borderRadius: 6, borderRadius: 6,
elevation: 3, elevation: 3,
@ -84,9 +79,8 @@ export default function Incidents() {
> >
{selectedDepartment?.deptAbv} {selectedDepartment?.deptAbv}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>}
</View> />
</PageHeader>
<ScrollView> <ScrollView>
<StatusBar style="dark" /> <StatusBar style="dark" />
<SafeAreaView /> <SafeAreaView />
@ -121,7 +115,7 @@ export default function Incidents() {
router.push({ router.push({
pathname: '/call', pathname: '/call',
params: { params: {
callDetails: btoa(JSON.stringify(callItem)) callDetails: toBase64Unicode(JSON.stringify(callItem))
} }
}) })
}} }}
@ -254,7 +248,7 @@ export default function Incidents() {
</View> </View>
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <View style={{ paddingTop: 5, flexDirection: 'row', justifyContent: 'space-between' }}>
<Text <Text
style={{ style={{
fontSize: 12, fontSize: 12,

10
app/register.jsx
View file

@ -99,14 +99,12 @@ export default function Register() {
return ( return (
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<StatusBar style="dark" /> <StatusBar style="dark" />
<PageHeader> <PageHeader
<View style={{ flexDirection: 'row', height: 80, alignItems: 'flex-end' }}> leftHeader={ <TouchableOpacity onPress={router.back} style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 5 }}>
<TouchableOpacity onPress={router.back} style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 5 }}>
<Ionicons name="chevron-back-outline" size={22} color="red" style={{ paddingLeft: 20 }} /> <Ionicons name="chevron-back-outline" size={22} color="red" style={{ paddingLeft: 20 }} />
<Text style={{ color: 'red', fontWeight: 600 }}>Back to Login</Text> <Text style={{ color: 'red', fontWeight: 600 }}>Back to Login</Text>
</TouchableOpacity> </TouchableOpacity>}
</View> />
</PageHeader>
<KeyboardAvoidingView <KeyboardAvoidingView
style={{ flex: 1 }} style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

194
components/generalHelpers.jsx
View file

@ -1,7 +1,8 @@
import React, { useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback, ScrollView } from 'react-native'; import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback, ScrollView, Platform, Modal, Pressable } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { Row } from './Row';
import { Container } from './Container'; import { Container } from './Container';
export const StyledContainer = styled.View` export const StyledContainer = styled.View`
@ -44,7 +45,7 @@ export const StyledTextInput = styled.TextInput`
margin-bottom: 10px; margin-bottom: 10px;
`; `;
export const StyledInputLabel = styled.Text` export const StyledInputLabel = styled.Text`
font-size: 13px; font-size: 13px;
text-align: left; text-align: left;
`; `;
@ -204,17 +205,39 @@ const providerConversion = {
} }
export const PageHeader = ({ export const PageHeader = ({
children leftHeader = <View style={{ flex: 1 }} />,
centerHeader = <View style={{ flex: 1 }} />,
rightHeader = <View style={{ flex: 1 }} />
}) => { }) => {
return ( return (
<View style={{ position: 'sticky', top: 0, backgroundColor: '#ECEDEE', zIndex: 1, marginBottom: -100 }}> <View style={{ position: 'sticky', top: 0, backgroundColor: '#ECEDEE', zIndex: 1, marginBottom: -100 }}>
{children} <View
style={{
flexDirection: 'column',
height: 80,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 7
}}
>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
paddingHorizontal: 0
}}>
{leftHeader}
{centerHeader}
{rightHeader}
</View>
</View>
</View> </View>
) )
} }
export const PageFooter = ({ export const PageFooter = ({
children children
}) => { }) => {
return ( return (
<View style={{ position: 'fixed', top: 0, backgroundColor: '#ECEDEE', zIndex: 1 }}> <View style={{ position: 'fixed', top: 0, backgroundColor: '#ECEDEE', zIndex: 1 }}>
@ -224,11 +247,11 @@ export const PageFooter = ({
} }
export const LoginTextInput = ({ export const LoginTextInput = ({
label, label,
icon, icon,
isPassword = false, isPassword = false,
hidePassword = true, hidePassword = true,
setHidePassword = (boolean) => {}, setHidePassword = (boolean) => { },
...props ...props
}) => { }) => {
return ( return (
@ -239,7 +262,7 @@ export const LoginTextInput = ({
<StyledInputLabel>{label}</StyledInputLabel> <StyledInputLabel>{label}</StyledInputLabel>
<StyledTextInput {...props} /> <StyledTextInput {...props} />
{isPassword ? ( {isPassword ? (
<RightIcon onPress={() => {setHidePassword(!hidePassword)}}> <RightIcon onPress={() => { setHidePassword(!hidePassword) }}>
<Ionicons name={hidePassword ? 'eye-off-outline' : 'eye-outline'} size={30} color="gray" /> <Ionicons name={hidePassword ? 'eye-off-outline' : 'eye-outline'} size={30} color="gray" />
</RightIcon> </RightIcon>
) : null} ) : null}
@ -249,115 +272,108 @@ export const LoginTextInput = ({
export const RegisterDropdownInput = ({ export const RegisterDropdownInput = ({
label, label,
isOpen, isOpen: _isOpen,
setOpen, setOpen: _setOpen,
selectedValue, selectedValue,
onValueChange, onValueChange,
menu menu
}) => { }) => {
const [modalVisible, setModalVisible] = useState(false);
return ( return (
<Container> <Container>
<StyledInputLabel>{label}</StyledInputLabel> <StyledInputLabel>{label}</StyledInputLabel>
<TouchableOpacity activeOpacity={0.8} key={`${menu.menuName}2`} <TouchableOpacity
style={{ activeOpacity={0.8}
style={{
backgroundColor: '#E5E7EB', backgroundColor: '#E5E7EB',
marginTop: 3, marginTop: 3,
marginBottom: 10, marginBottom: 10,
borderRadius: '5px', borderRadius: 5,
flexDirection: 'row',
alignItems: 'center',
minHeight: 60,
paddingHorizontal: 15,
}} }}
onPress={() => { onPress={() => setModalVisible(true)}
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); >
LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')); <Ionicons
isOpen ? setOpen(false) : setOpen(true); name={menu.iconName}
size={30}
color={menu.iconColor}
/>
<Text style={{ color: selectedValue ? 'black' : 'grey', fontSize: 16, paddingHorizontal: 16, flex: 1 }}>
{selectedValue ? providerConversion[selectedValue] : menu.placeholder}
</Text>
<DropdownArrow onPress={() => setModalVisible(!modalVisible)}>
<Ionicons name={modalVisible ? "chevron-up-outline" : "chevron-down-outline"} size={30} color="gray" />
</DropdownArrow>
</TouchableOpacity>
<Modal
visible={modalVisible}
animationType="slide"
transparent={true}
onRequestClose={() => setModalVisible(false)}
>
<Pressable
style={{ flex: 1 }}
onPress={() => setModalVisible(false)}
/>
<View style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
backgroundColor: '#fff',
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
paddingBottom: 32,
paddingTop: 16,
}}> }}>
<Row style={{ <Pressable
paddingHorizontal: 16, style={{ flex: 1, paddingHorizontal: 15, alignItems: 'flex-end' }}
paddingVertical: 16 / 1.2, onPress={() => setModalVisible(false)}
}}> >
<Ionicons <Text style={{ color: 'red', fontWeight: 600 }}>
name={menu.iconName} Close
size={30} </Text>
color={menu.iconColor} </Pressable>
/> <Picker
<Text style={{ selectedValue={selectedValue}
fontSize: 16, onValueChange={(value) => {
paddingHorizontal: 16 onValueChange(value);
}}>
{selectedValue ? providerConversion[selectedValue] : menu.placeholder}
</Text>
<DropdownArrow
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
isOpen ? setOpen(false) : setOpen(true);
}} }}
> >
<Ionicons {menu.dropdownList.map((item) => (
name={isOpen ? "chevron-up-outline" : "chevron-down-outline"} <Picker.Item color="black" label={item.label} value={item.value} key={item.value} />
size={30} ))}
color="gray" </Picker>
/> </View>
</DropdownArrow> </Modal>
</Row>
{isOpen && <ScrollView style={{ borderRadius: '5px', backgroundColor: '#E5E7EB' }}>
{menu.dropdownList.map((subMenu, index) => {
return (
<TouchableNativeFeedback
key={index}
onPress={() => {
onValueChange(subMenu.value);
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
setOpen(false);
}}
>
<View style={{
paddingHorizontal: 16,
paddingVertical: 16 / 1.5,
borderTopColor: 'gray',
borderTopWidth: .5,
marginHorizontal: 10
}}>
<Text>{subMenu.label}</Text>
{selectedValue === subMenu.value &&
<SelectedCheckmark>
<Ionicons
name="checkmark-outline"
size={30}
color="red"
/>
</SelectedCheckmark>
}
</View>
</TouchableNativeFeedback>
)
})}
</ScrollView>}
</TouchableOpacity>
</Container> </Container>
) );
} }
export const formatPhoneNumber = (e) => { export const formatPhoneNumber = (e) => {
let formattedNumber; let formattedNumber;
const length = e?.length; const length = e?.length;
const regex = () => e.replace(/[^0-9\.]+/g, ""); const regex = () => e.replace(/[^0-9\.]+/g, "");
const areaCode = () => `(${regex().slice(0, 3)})`; const areaCode = () => `(${regex().slice(0, 3)})`;
const firstSix = () => `${areaCode()} ${regex().slice(3, 6)}`; const firstSix = () => `${areaCode()} ${regex().slice(3, 6)}`;
const trailer = (start) => `${regex().slice(start, regex().length)}`; const trailer = (start) => `${regex().slice(start, regex().length)}`;
if (length <= 3) { if (length <= 3) {
formattedNumber = regex(); formattedNumber = regex();
} else if (length === 4) { } else if (length === 4) {
formattedNumber = `${areaCode()} ${trailer(3)}`; formattedNumber = `${areaCode()} ${trailer(3)}`;
} else if (length === 5) { } else if (length === 5) {
formattedNumber = `${areaCode().replace(")", "")}`; formattedNumber = `${areaCode().replace(")", "")}`;
} else if (length >= 5 && length <= 9) { } else if (length >= 5 && length <= 9) {
formattedNumber = `${areaCode()} ${trailer(3)}`; formattedNumber = `${areaCode()} ${trailer(3)}`;
} else if (length >= 10) { } else if (length >= 10) {
formattedNumber = `${firstSix()}-${trailer(6)}`; formattedNumber = `${firstSix()}-${trailer(6)}`;
} }
return formattedNumber; return formattedNumber;
}; };

2
contexts/WebSocketContext.js
View file

@ -20,7 +20,7 @@ export const WebSocketProvider = ({ children }) => {
} }
console.log(`🔁 Connecting (Attempt ${reconnectAttempts.current + 1}/${maxReconnectAttempts})`); console.log(`🔁 Connecting (Attempt ${reconnectAttempts.current + 1}/${maxReconnectAttempts})`);
ws.current = new WebSocket(process.env.EXPO_PUBLIC_WS_URL); ws.current = new WebSocket(`${process.env.EXPO_PUBLIC_WS_URL}/callfeed`);
ws.current.onopen = () => { ws.current.onopen = () => {
console.log('✅ WebSocket connected'); console.log('✅ WebSocket connected');

7
hooks/useCallFeed/useCallFeed.jsx
View file

@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useDepartments } from "../useDepartments"; import { useDepartments } from "../useDepartments";
import { import {
C,
Cardiology, Cardiology,
Cpr, Cpr,
FourByFour, FourByFour,
@ -107,7 +106,7 @@ const getIncidents = async (departments, incidentStatus) => {
return response?.json() || []; return response?.json() || [];
}; };
export const useCallFeed = () => { export const useCallFeed = (callPage = false) => {
const departments = useDepartments(); const departments = useDepartments();
const { lastMessage } = useWebSocketContext(); const { lastMessage } = useWebSocketContext();
const [allCalls, setAllCalls] = useState([]); const [allCalls, setAllCalls] = useState([]);
@ -123,7 +122,7 @@ export const useCallFeed = () => {
setAllCalls(incidents); setAllCalls(incidents);
setInit(false); setInit(false);
} }
fetchData(); if (!callPage) fetchData();
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -141,7 +140,7 @@ export const useCallFeed = () => {
setAllCalls(incidents); setAllCalls(incidents);
} }
if (!init) { if (!init) {
fetchData(); if (!callPage) fetchData();
} }
}, [selectedStatus]); }, [selectedStatus]);

14
package-lock.json generated
View file

@ -12,6 +12,7 @@
"@emotion/unitless": "^0.10.0", "@emotion/unitless": "^0.10.0",
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "^1.24.0", "@react-native-async-storage/async-storage": "^1.24.0",
"@react-native-picker/picker": "^2.11.1",
"@react-navigation/native": "^7.1.17", "@react-navigation/native": "^7.1.17",
"expo": "^53.0.20", "expo": "^53.0.20",
"expo-constants": "~17.1.7", "expo-constants": "~17.1.7",
@ -3114,6 +3115,19 @@
"react-native": "^0.0.0-0 || >=0.60 <1.0" "react-native": "^0.0.0-0 || >=0.60 <1.0"
} }
}, },
"node_modules/@react-native-picker/picker": {
"version": "2.11.1",
"resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.1.tgz",
"integrity": "sha512-ThklnkK4fV3yynnIIRBkxxjxR4IFbdMNJVF6tlLdOJ/zEFUEFUEdXY0KmH0iYzMwY8W4/InWsLiA7AkpAbnexA==",
"license": "MIT",
"workspaces": [
"example"
],
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/@react-native/assets-registry": { "node_modules/@react-native/assets-registry": {
"version": "0.79.5", "version": "0.79.5",
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.79.5.tgz", "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.79.5.tgz",

1
package.json
View file

@ -20,6 +20,7 @@
"@emotion/unitless": "^0.10.0", "@emotion/unitless": "^0.10.0",
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "^1.24.0", "@react-native-async-storage/async-storage": "^1.24.0",
"@react-native-picker/picker": "^2.11.1",
"@react-navigation/native": "^7.1.17", "@react-navigation/native": "^7.1.17",
"expo": "^53.0.20", "expo": "^53.0.20",
"expo-constants": "~17.1.7", "expo-constants": "~17.1.7",