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

Incident details encoding and UI headers

Browse source 
Introduces Unicode-safe base64 encoding/decoding for call details between incidents and call screens. Refactors PageHeader to accept left, center, and right header props for more flexible layouts. Updates call.jsx and register.jsx to use the new header structure, and improves department/unit rendering and modal dropdowns for department selection. Generalizes and modernizes UI code for better maintainability and cross-platform compatibility.
This commit is contained in:
Matt DiMeglio 2025-08-12 16:36:26 -04:00
parent 2f01c575db
commit 1b8533d192
8 changed files with 939 additions and 909 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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",