Полная переработка Street RP

БЫЛО — Redux (3 файла, ~70 строк)

store/phone/types.ts
export const SET_CALL = 'SET_CALL';
export const ACCEPT_CALL = 'ACCEPT_CALL';
export const SET_WALLPAPER = 'SET_WALLPAPER';

type SetCallAction = { type: typeof SET_CALL; payload?: Call; };
type AcceptCallAction = { type: typeof ACCEPT_CALL; };
type SetWallpaperAction = { type: typeof SET_WALLPAPER; payload: string; };

export type PhoneActionTypes = SetCallAction | AcceptCallAction | SetWallpaperAction;

store/phone/actions.ts
export function setCall(data?: Call): PhoneActionTypes {
return { type: SET_CALL, payload: data };
}
export function acceptCall(): PhoneActionTypes {
return { type: ACCEPT_CALL };
}
export function setWallpaper(name: string): PhoneActionTypes {
return { type: SET_WALLPAPER, payload: name };
}

store/phone/reducer.ts
export default function phoneReducer(state = initialState, action: PhoneActionTypes): PhoneState {
switch (action.type) {
case SET_CALL: return { ...state, call: action.payload };
case ACCEPT_CALL: return { ...state, call: state.call ? { ...state.call, isRecieve: true } : undefined };
case SET_WALLPAPER: return { ...state, wallpaper: action.payload };
default: return state;
}
}

СТАЛО — Zustand (1 файл, 29 строк)

export const usePhoneStore = create<PhoneState & PhoneActions>((set) => ({
call: undefined,
wallpaper: "0",

setCall: (call) => set({ call }),
acceptCall: () => set((state) => ({ call: state.call ? { ...state.call, isRecieve: true } : undefined })),
setWallpaper: (wallpaper) => set({ wallpaper }),
}));

3 файла → 1 файл. Удалены actions, types, reducer. Логика та же.

---
2. Компонент Контактов

БЫЛО — Class Component (~155 строк)

export default class Contacts extends Component<{}, State> {
readonly state: State = {
contacts: [],
blacklist: [],
showEditor: false,
searchValue: ''
};

componentDidMount() {
rpc.callServer('Phone-GetContactsData').then((data) => this.setState(() => data));
}

toggleEditor() {
this.setState((state) => ({ showEditor: !state.showEditor }));
}

async saveContact(data: ContactData) {
const { selectedContact: contact } = this.state;
try {
await rpc.callServer(
contact ? 'Phone-EditContact' : 'Phone-AddContact',
contact ? [contact.phone, data] : data
);
this.setState((state) => ({
contacts: contact
? state.contacts.map((item) => (item.phone === contact.phone ? data : item))
: [...state.contacts, data],
selectedContact: data
}));
this.toggleEditor();
} catch (err: any) {
showNotification('error', 'Контакт с указанным номером уже существует');
}
}

render() {
const { selectedContact, showEditor } = this.state;
return (
<div className="contacts">
{showEditor ? (
<Editor
contact={selectedContact}
save={this.saveContact.bind(this)}
remove={this.deleteContact.bind(this)}
close={this.toggleEditor.bind(this)}
/>
) : selectedContact ? (
<Contact ... />
) : (
<Fragment>
<Navigation action={{ title: IoIosAdd, onClick: this.toggleEditor.bind(this) }} />
...
</Fragment>
)}
</div>
);
}
}


СТАЛО — Functional Component с хуками (~115 строк)

export default function Contacts() {
const [searchValue, setSearchValue] = useState("");
const [showEditor, setShowEditor] = useState(false);
const [contacts, setContacts] = useState<ContactData[]>([]);
const [selectedContact, setSelectedContact] = useState<ContactData | undefined>();

useEffect(() => {
rpc.callServer("Phone-GetContactsData").then((data) => {
setContacts(data.contacts);
setBlacklist(data.blacklist);
});
}, []);

const toggleEditor = () => setShowEditor(!showEditor);

const saveContact = async (data: ContactData) => {
try {
await rpc.callServer(selectedContact ? "Phone-EditContact" : "Phone-AddContact", ...);
setContacts((prev) => selectedContact ? prev.map(...) : [...prev, data]);
toggleEditor();
} catch (err: any) {
showNotification("error", "Контакт с указанным номером уже существует");
}
};

if (showEditor) return <Wrapper><Editor ... /></Wrapper>;
if (selectedContact) return <Wrapper><Contact ... /></Wrapper>;

return (
<Wrapper>
<div className="px-3">
<div className="flex items-center justify-between">
<Title>Контакты</Title>
<Button variant="ghost" size="icon" onClick={toggleEditor}>
<CiCirclePlus className="!size-6" />
</Button>
</div>
<SearchInput ... />
</div>
<List contacts={getFilteredItems()} selectContact={selectContact} />
</Wrapper>
);
}

Нажмите для раскрытия...

Farko написал(а):

Кто делал дизайн?

Нажмите для раскрытия...