Water logging - Perform

Water is logged from the nutrition tab through one component, WaterLogger in src/features/nutrition/components/WaterLogger.tsx. It is self-contained: it owns its query, its two mutations and its modal. It does not use the nutrition session store, and water is not part of the day snapshot. The write functions and types live in the tracking feature: src/features/tracking/data/trackingApi.ts and src/features/tracking/data/types.ts.

Props and placement

function WaterLogger(props: { date?: string; compact?: boolean })

Prop	Meaning
`date`	`YYYY-MM-DD` for a day other than today. Omitted for today
`compact`	Renders the small tile that sits beside the macro summary

PlanScreen renders it in three places and always passes key={dateParam ?? 'today'}, so the component remounts when the date changes and its local state resets.

Screen state	Variant
Editable day with a regular plan	Compact tile next to `RemainingSummary`
Editable day with a file plan	Compact tile next to `FilePlanNotice`
Editable day with no plan, or a read-only day shown as a diary	Full card

dateParam is undefined when the tab is on today and the local ISO date otherwise.

Reading the day

useQuery({
  queryKey: ['water', date ?? 'today'],
  queryFn: () => apiClient.get<WaterDay>(`/v1/trainee/water${date ? `?date=${date}` : ''}`),
  refetchInterval: 60000,
});

interface WaterDay {
  date: string;
  waterMl: number;
  goalMl: number;
  entries: { id: string; amountMl: number; createdAt: string; deductEntryId?: string }[];
}

The query refetches every 60 seconds while mounted, and again each time the trainee opens the sheet.

Goal

The app does not compute the goal. It shows goalMl from the response.

progress = goal > 0 ? total / goal : 0.
With a goal, the label is the waterProgress string with current and goal.
With goalMl at 0 or below, the label is the total in millilitres and the sheet adds the waterNoGoal caption.

The nutrition plan payload also carries a water value inside each day’s targets (NutritionTargetsDto.water). The mobile code does not read it for this component. How the server derives goalMl is not visible from the app.

Logging an amount

logWater(input) // POST /v1/trainee/water

interface LogWaterInput {
  date?: string;
  requestId?: string;
  amountMl: number;
}

The response type is DailyMetricTotals: waterMl and steps. Constants:

Constant	Value	Use
`STEP_ML`	100	The plus and minus buttons beside the ring
`MAX_ML`	5000	Largest absolute amount for one entry

Ways to add:

Plus button. save(100).
Presets. 200, 330, 500, 1000 and 1500 ml, labelled as cups and bottles from the strings file.
Custom. Opens a small dialog with a number field (maxLength 5). applyCustom accepts a whole number above 0 and at most 5000.

save(value) builds the payload:

const payload: LogWaterInput = {
  amountMl: value,
  date: data.date,
  requestId: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
};

Notes on that payload:

date is the date the server returned for this day, not a value the device computed again.
requestId is a fresh client-generated id per tap. The mutation has retry: 1, so a retried request carries the same id.
save rejects a non-integer, zero or an absolute value above MAX_ML with the waterInvalid message before any request.

Subtracting

The minus button calls save(-Math.min(STEP_ML, total)). The amount is negative and never larger than the current total, and the button is disabled when the total is 0. A subtraction is a new entry with a negative amountMl. It is listed in the history with its sign.

Guarding against double taps

A pending ref blocks a second save or remove until the first settles. All controls are also disabled while either mutation is pending, while the query has no data, and when the query errored.

History and deletion

The sheet has a history toggle. When open it lists data.entries newest first ([...entries].reverse()), each row showing the signed amount, the local time of createdAt, and a trash button. An empty list shows the waterEmpty message.

deleteWaterEntry({ entryId, date })
// DELETE /v1/trainee/water/<entryId>?date=<date>

remove(entryId) sends date: data.date with the entry id. The response is DailyMetricTotals. This mutation also has retry: 1. Opening the history scrolls the sheet so the toggle sits at the top. The list gets a minHeight of the scroll viewport minus the toggle height, so there is always room to scroll to it. Closing it scrolls back to the top. WaterDay.entries has an optional deductEntryId field. This component does not read it.

Cache invalidation

Both mutations call the same refresh on success:

client.invalidateQueries({ queryKey: ['water'] });
client.invalidateQueries({ queryKey: ['home'] });
client.invalidateQueries({ queryKey: ['progress'] });

The home screen and the progress screen show water totals, so they refetch after any change. A successful add also closes the custom dialog and clears its field.

Errors

Situation	What the trainee sees
The day fails to load	`waterLoadError` on the tile and in the sheet. Tapping the message in the sheet refetches
An add or delete fails	`waterSaveError` under the presets, or as the field error in the custom dialog
An invalid amount	`waterInvalid`

Sheet structure

The sheet is a transparent slide Modal over a KeyboardAvoidingView (padding on iOS, height on Android). The custom amount dialog is a second Modal nested inside the first, with a fade animation. It focuses its field in onShow.

Endpoints

Method and path	Used for
`GET /v1/trainee/water` with optional `date`	The day’s total, goal and entries
`POST /v1/trainee/water`	Add or subtract an amount
`DELETE /v1/trainee/water/<entryId>` with optional `date`	Remove one entry

​Props and placement

​Reading the day

​Goal

​Logging an amount

​Subtracting

​Guarding against double taps

​History and deletion

​Cache invalidation

​Errors

​Sheet structure

​Endpoints

​Related