STYLE_GUIDE.md

Style guide

• Hooks
• Firestore Client
• Rest API

Hooks

Info

As a general rule of thumb separate "getter" hooks from "setter" hooks. E.g. use one hook to set the state and another to fetch that state.

Example

Setting the state from the useCheckForUpdates hook

29k/client/src/lib/codePush/hooks/useCheckForUpdate.ts

Lines 50 to 62 in 5dc9ce4

	const useCheckForUpdate = () => {
	const setStatus = useSetRecoilState(statusAtom);
	const setUpdateAvailable = useSetRecoilState(updateAvailableAtom);
	const setDownloadProgress = useSetRecoilState(downloadProgressAtom);
	const onStatus = useCallback(
	status => {
	setStatus(status);
	logStatus(status);
	setUpdateAvailable(status === UPDATE_INSTALLED);
	},
	[setStatus, setUpdateAvailable],
	);

Getting the state by using the zustand state useCodePushState(state => state.status)

29k/client/src/lib/codePush/components/CodePushOverlay.tsx

Lines 50 to 58 in 952b16c

	const status = useCodePushState(state => state.status);
	const downloadProgress = useCodePushState(state => state.downloadProgress);
	const isColdStarted = useAppState(state => state.isColdStarted);
	const isRequiredUpdate = useKillSwitchState(
	state => state.requiresBundleUpdate,
	);
	const setRequiresBundleUpdate = useKillSwitchState(
	state => state.setRequiresBundleUpdate,
	);

Firstore Client

Info

We use react-native-firbease/firestore in our project, as a general rule though, we decided to only use it in cases where we need live-updates.

You can read more about how firestore snapshots work, that's what we use for live data UX.

For the rest of database query operations we use our REST API, which can aggregate and take further responsibility for how we provide data to our client.

Example

A decent example of such usage can be found on our useTemple react hook.

29k/client/src/routes/Temple/hooks/useTemple.ts

Lines 7 to 31 in 237ee21

	const useTemple = () => {
	const setTempleState = useSetRecoilState(templeAtom);
	const subscribeTemple = useCallback(
	templeId => {
	const doc = firestore().collection('temples').doc(templeId);
	const unsubscribe = doc.onSnapshot(
	documentSnapshot => setTempleState(documentSnapshot.data() as Temple),
	error =>
	console.debug(
	`Failed to subscribe to live session ${templeId}`,
	error,
	),
	);
	return unsubscribe;
	},
	[setTempleState],
	);
	return {
	subscribeTemple,
	};
	};

Rest API

Info

A wrapping API layer enabling a centralized way of accessing and modifying data. As most REST API we use the method from the request to indicate which operation to perform:

GET    /fruit         // Provides all the fruits Fruit[]
GET    /fruit/:id     // Provides a fruit based on the ID used Fruit
POST   /fruit         // Creates a new fruit
PUT    /fruit/:id     // Updates an exisitng fruit
DELETE /fruit/:id     // Deletes an exisitng fruit

Example

An example is the Temple endpoint.

https://github.com/29ki/29k/blob/237ee21db3cd91990b26ebd0c5da0bb41760fb92/functions/src/api/temples/index.ts