Coming back from another screen that adds data to Firestore, our ListUserTally.js component in the TallyScreen.js page (main page) doesn’t get updated. Right now, if we want to add data to the current date TallyScreen, we need to go to the EntryScreen.js screen, fill in the data, and hit confirm to add data to Firestore (that navigates us back to TallyScreen). To see the update we then need to change to a random date and come back to the current date in TallyScreen.
Tried re-rendering TallyScreen.js, force refresh, and using useEffect() to no avail.
Here is the code for those three pages:
TallyScreen.js
export default function TallyScreen({ navigation}) {
const [date, setDate] = useState(new Date());
const { uid } = firebase.auth().currentUser;
const drawer = useRef();
const menuNavigate = (nav) => {
if (navigation.getState().routes[navigation.getState().index].name == nav)
drawer.current.close();
else {
drawer.current.close();
navigation.navigate(nav);
}
};
return (
<Drawer
content={
<Menu
onBackPress={() => drawer.current.close()}
onNavigate={(nav) => menuNavigate(nav)}
></Menu>
}
ref={drawer}
styles={styles.container}
type="displace"
openDrawerOffset={220}
>
<View style={styles.container}>
<NavbarItem onOpenDrawer={() => drawer.current.open()} />
<ListUserTally setDate={setDate}/>
</View>
<ActionButton
onPress={() =>
navigation.navigate("EntryScreen", {
date: date.toString(),
})
}
buttonColor="#E5791C"
size={60}
shadowStyle={styles.addEntryButton}
/>
</Drawer>
);
}
ListUserTally.js
export default function ListUserTally(props) {
const { uid } = firebase.auth().currentUser;
const [listUserTally, setListUserTally] = useState([]);
const [selectedDate, setSelectedDate] = useState(new Date());
useEffect(() => {
setListUserTally([]);
getTodaysBagups();
}, [selectedDate]);
const getTodaysBagups = async () => {
const currentDateMidnight = selectedDate.setHours(0, 0, 0, 0);
const currentDate = new Date(currentDateMidnight);
const nextDateMidnight = new Date(currentDate.getTime() + 86400000);
const userData = await getUserDetails(uid);
const allUsers = [];
await firebase
.firestore()
.collection("users")
.doc(uid)
.collection("bagups")
.where("date", ">=", currentDate)
.where("date", "<", nextDateMidnight)
.get()
.then((snapshot) => {
console.log(Tally.createTallyFromBE(snapshot, userData));
allUsers.push(Tally.createTallyFromBE(snapshot, userData));
})
.catch((err) => {
console.log("Error getting bagup documents", err);
});
setListUserTally(allUsers);
};
const getUserDetails = async (userId) => {
let user = undefined;
await firebase
.firestore()
.collection("users")
.doc(userId)
.get()
.then((snapshot) => {
user = snapshot.data();
})
.catch((err) => {
console.log("Error getting bagup documents", err);
});
return user;
};
const setSelectedDates = (date) => {
props.setDate(date);
setSelectedDate(date);
};
return (
<ScrollView contentContainerStyle={styles.scrollView}>
<DateSelector
setSelectedDates={setSelectedDates}
selectedDate={selectedDate}
/>
{listUserTally
? listUserTally.map((tally, id) => {
if (tally.bagups.length > 0) {
return (
<CollapsableUserTally
key={id}
data={tally}
collapsed={id == 0 ? false : true}
/>
);
} else {
return undefined;
}
})
: undefined}
<View style={styles.emptyView}>
{/*Empty view to avoid visual obstruction by ActionButton*/}
</View>
</ScrollView>
);
}
EntryScreen.js
export default function EntryScreen({ navigation, route }) {
const [currentLanguage, setcurrentLanguage] = useState("ENGLISH");
const [block, setBlock] = useState("");
const [piece, setPiece] = useState("");
const [centage, setCentage] = useState(null);
const [bagupId, setBagupId] = useState(null);
const [requestKey, setRequestKey] = useState("");
const [bundleSize, setBundleSize] = useState(null);
const [bundleCount, setBundleCount] = useState(null);
const { uid } = firebase.auth().currentUser;
const date = route.params.date;
const inputBlock = useRef();
const inputPiece = useRef();
const inputCentage = useRef();
const inputBagupId = useRef();
const inputRK = useRef();
const inputBS = useRef();
const inputBC = useRef();
const onConfirmPress = () => {
if (inputVerification()) {
firebase
.firestore()
.collection("users")
.doc(uid)
.collection("bagups")
.add({
block: block,
piece: piece,
centage: centage,
id: bagupId,
requestKey: requestKey,
bundleSize: bundleSize,
bundleCount: bundleCount,
date: new Date(date),
});
navigation.navigate("TallyScreen");
}
};
function inputVerification() {
// https://aboutreact.com/react-native-check-textinput-is-empty-or-not/
if (
!block.trim() ||
!piece.trim() ||
!centage.trim() ||
!bagupId.trim() ||
!requestKey.trim() ||
!bundleSize.trim() ||
!bundleCount.trim()
) {
alert("Please enter all values");
return false;
}
// https://mkyong.com/javascript/check-if-variable-is-a-number-in-javascript/
if (
isNaN(centage) ||
isNaN(bagupId) ||
isNaN(bundleSize) ||
isNaN(bundleCount)
) {
alert(
"Make sure centage, bag up id, bundle size, and bundle count are all numbers"
);
return false;
}
return true;
}
function getBagupRevenue() {
return centage * bundleCount * bundleSize;
}
return (
<View style={styles.container}>
<HeaderRNE
containerStyle={styles.navbar}
centerComponent={{
text: getText("HEADER_ADD_ENTRY", currentLanguage),
style: styles.header,
}}
leftComponent={
<TouchableWithoutFeedback
onPress={() => navigation.navigate("TallyScreen")
}
>
<Icon size={40} name="arrowleft" type="antdesign" />
</TouchableWithoutFeedback>
}
/>
<View style={styles.container}></View>
<TouchableWithoutFeedback onPress={() => inputBlock.current.focus()}>
<View style={styles.inputBox}>
<Icon name="terrain" type="fontawesome" style={styles.inputBoxIcon} />
<TextInput
ref={inputBlock}
style={styles.inputBoxInput}
placeholder={getText("BLOCK_PLACEHOLDER", currentLanguage)}
onChangeText={(text) => setBlock(text)}
value={block}
/>
</View>
(...)
<Text style={styles.bagupInfoText}>
{getText("BAGUP_REVENUE", currentLanguage)}
{getBagupRevenue()}
</Text>
<View style={styles.confirmButtonView}>
<View style={{ flex: 3 }}>
<Button
title={getText("CONFIRM", currentLanguage)}
buttonStyle={styles.confirmButton}
titleStyle={styles.confirmButtonText}
onPress={() => onConfirmPress()}
/>
</View>
</View>
</View>
);
}
