Uh oh... There's a problem. Try refreshing the app.
\n{error.message}
\n \n );\n}\n\nexport {\n FullPageErrorFallback,\n ErrorMessage,\n CircleButton,\n BookListUL,\n Spinner,\n Button,\n Input,\n Textarea,\n Dialog,\n FormGroup,\n FullPageSpinner,\n Link,\n};\n","import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';\nimport { client } from 'utils/api-client';\n\nlet oldListItem;\n\nconst Status = {\n IDLE: 'idle',\n PENDING: 'pending',\n RESOLVED: 'resolved',\n REJECTED: 'rejected',\n};\n\nconst initialState = {\n status: Status.IDLE,\n listItems: [],\n error: null,\n};\n\nconst getListItem = createAsyncThunk('listItems/getListItem', async () => {\n const { listItems } = await client('list-items');\n return listItems;\n});\n\nconst addListItem = createAsyncThunk('listItems/addListItem', async ({ bookId }) => {\n const { listItem } = await client('list-items', { data: { bookId } });\n return listItem;\n});\n\nconst updateListItem = createAsyncThunk('listItems/updateListItem', async (updates) => {\n const { listItem } = await client(`list-items/${updates.id}`, {\n method: 'PUT',\n data: updates,\n });\n return listItem;\n});\n\nconst removeListItem = createAsyncThunk('listItems/removeListItem', async ({ id }) => {\n await client(`list-items/${id}`, { method: 'DELETE' });\n return id;\n});\n\nexport const listItemSlice = createSlice({\n name: 'listItems',\n initialState,\n reducers: {\n refetchListItem: (state, action) => {\n state.status = action.payload.status;\n state.listItems = action.payload.listItems;\n },\n },\n extraReducers: (builder) => {\n builder\n .addCase(getListItem.pending, (state) => {\n state.status = Status.PENDING;\n })\n .addCase(addListItem.pending, (state) => {\n state.status = Status.PENDING;\n })\n .addCase(updateListItem.pending, (state, action) => {\n if (action.meta.arg.rating) {\n const { rating } = action.meta.arg;\n state.listItems = state.listItems.map((listItem) => {\n if (listItem.id === action.meta.arg.id) {\n oldListItem = listItem;\n return { ...listItem, rating };\n }\n return listItem;\n });\n }\n if (action.meta.arg.notes) {\n state.status = Status.PENDING;\n }\n })\n .addCase(removeListItem.pending, (state) => {\n state.status = Status.PENDING;\n })\n .addCase(getListItem.fulfilled, (state, action) => {\n state.status = Status.RESOLVED;\n state.listItems = action.payload;\n })\n .addCase(addListItem.fulfilled, (state, action) => {\n state.status = Status.RESOLVED;\n state.listItems.unshift(action.payload);\n })\n .addCase(updateListItem.fulfilled, (state, action) => {\n state.status = Status.RESOLVED;\n state.listItems = state.listItems.map((listItem) => (listItem.id === action.payload.id ? action.payload : listItem));\n })\n .addCase(removeListItem.fulfilled, (state, action) => {\n state.status = Status.RESOLVED;\n const index = state.listItems.map((listItem) => listItem.id).indexOf(action.payload);\n state.listItems.splice(index, 1);\n })\n .addCase(getListItem.rejected, (state, action) => {\n state.status = Status.REJECTED;\n state.error = action.error;\n })\n .addCase(addListItem.rejected, (state, action) => {\n state.status = Status.REJECTED;\n state.error = action.error;\n })\n .addCase(updateListItem.rejected, (state, action) => {\n if (action.meta.arg.rating) {\n state.listItems = state.listItems.map((listItem) => {\n if (listItem.id === action.meta.arg.id) {\n return { ...listItem, ...oldListItem };\n }\n return listItem;\n });\n }\n state.status = Status.REJECTED;\n state.error = action.error;\n })\n .addCase(removeListItem.rejected, (state, action) => {\n state.status = Status.REJECTED;\n state.error = action.error;\n })\n .addCase({ type: 'user/logout' }, (state) => {\n state.listItems = initialState.listItems;\n });\n },\n});\n\nexport const { refetchListItem } = listItemSlice.actions;\n\nexport {\n getListItem, addListItem, updateListItem, removeListItem,\n};\n\nexport const selectListItemState = (stateStore) => stateStore.listItem;\n\nexport const selectListItem = (stateStore) => stateStore.listItem.listItems;\n\nexport const selectStatusListItem = (stateStore) => stateStore.listItem.status;\n\nexport const selectErrorListItem = (stateStore) => stateStore.listItem.error;\n\nexport default listItemSlice.reducer;\n","import * as React from 'react';\nimport { client } from 'utils/api-client';\n\nlet queue = [];\n\nsetInterval(sendProfileQueue, 5000);\n\nfunction sendProfileQueue() {\n if (!queue.length) {\n return Promise.resolve({ success: true });\n }\n const queueToSend = [...queue];\n queue = [];\n return client('profile', { data: queueToSend });\n}\n\n// By wrapping the Profile like this, we can set the onRender to whatever\n// we want and we get the additional benefit of being able to include\n// additional data and filter phases\nfunction Profiler({ metadata, phases, ...props }) {\n function reportProfile(\n id, // the \"id\" prop of the Profiler tree that has just committed\n phase, // either \"mount\" (if the tree just mounted) or \"update\" (if it re-rendered)\n actualDuration, // time spent rendering the committed update\n baseDuration, // estimated time to render the entire subtree without memoization\n startTime, // when React began rendering this update\n commitTime, // when React committed this update\n interactions, // the Set of interactions belonging to this update\n ) {\n if (!phases || phases.includes(phase)) {\n queue.push({\n metadata,\n id,\n phase,\n actualDuration,\n baseDuration,\n startTime,\n commitTime,\n interactions,\n });\n }\n }\n return