matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: migrate lists to tanstack query

Browse Source 
Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>
This commit is contained in:
Nicole Mikołajczyk
2025-04-21 23:30:58 +02:00
parent 024160d00a
commit bfef2fadd7
12 changed files with 96 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/pl-fe/src/features/ui/components/modals/list-adder-modal/components/list.tsx
View File

@ -6,6 +6,7 @@ import Icon from 'pl-fe/components/icon';
import IconButton from 'pl-fe/components/icon-button';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useList } from 'pl-fe/queries/accounts/use-lists';
const messages = defineMessages({
remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
@ -20,7 +21,7 @@ const List: React.FC<IList> = ({ listId }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const list = useAppSelector((state) => state.lists[listId]);
const { data: list } = useList(listId);
const added = useAppSelector((state) => state.listAdder.lists.items.includes(listId));
const onRemove = () => dispatch(removeFromListAdder(listId));

4
packages/pl-fe/src/features/ui/components/modals/list-adder-modal/index.tsx
View File

@ -8,7 +8,7 @@ import AccountContainer from 'pl-fe/containers/account-container';
import { getOrderedLists } from 'pl-fe/features/lists';
import NewListForm from 'pl-fe/features/lists/components/new-list-form';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useLists } from 'pl-fe/queries/accounts/use-lists';
import List from './components/list';
@ -27,7 +27,7 @@ const ListAdderModal: React.FC<BaseModalProps & ListAdderModalProps> = ({ accoun
const intl = useIntl();
const dispatch = useAppDispatch();
const listIds = useAppSelector((state) => getOrderedLists(state).map(list => list.id));
const { data: listIds = [] } = useLists((lists) => getOrderedLists(lists).map(list => list.id));
useEffect(() => {
dispatch(setupListAdder(accountId));

12
packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/edit-list-form.tsx
View File

@ -1,13 +1,14 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { changeListEditorTitle, submitListEditor } from 'pl-fe/actions/lists';
import { changeListEditorTitle } from 'pl-fe/actions/lists';
import Button from 'pl-fe/components/ui/button';
import Form from 'pl-fe/components/ui/form';
import HStack from 'pl-fe/components/ui/hstack';
import Input from 'pl-fe/components/ui/input';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useUpdateList } from 'pl-fe/queries/accounts/use-lists';
const messages = defineMessages({
title: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
@ -18,8 +19,9 @@ const ListForm = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const value = useAppSelector((state) => state.listEditor.title);
const disabled = useAppSelector((state) => !state.listEditor.isChanged);
const { title: value, listId } = useAppSelector((state) => state.listEditor);
const { mutate: updateList, isPending: disabled } = useUpdateList(listId!);
const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
dispatch(changeListEditorTitle(e.target.value));
@ -27,11 +29,11 @@ const ListForm = () => {
const handleSubmit: React.FormEventHandler<Element> = e => {
e.preventDefault();
dispatch(submitListEditor(false));
updateList({ title: value });
};
const handleClick = () => {
dispatch(submitListEditor(false));
updateList({ title: value });
};
const save = intl.formatMessage(messages.save);