From b4f4e5a3d5311dc3767aa0be13924acc6fb99951 Mon Sep 17 00:00:00 2001 From: GotthardG <51994228+GotthardG@users.noreply.github.com> Date: Tue, 3 Dec 2024 23:14:29 +0100 Subject: [PATCH] updated ContactsManagerView and AddressManagerView --- frontend/src/pages/AddressManagerView.tsx | 59 +++++++------------ frontend/src/pages/ContactsManagerView.tsx | 67 ++++++++-------------- 2 files changed, 44 insertions(+), 82 deletions(-) diff --git a/frontend/src/pages/AddressManagerView.tsx b/frontend/src/pages/AddressManagerView.tsx index da472e1..9aa3ff3 100644 --- a/frontend/src/pages/AddressManagerView.tsx +++ b/frontend/src/pages/AddressManagerView.tsx @@ -1,5 +1,4 @@ -import * as React from 'react'; -import axios from 'axios'; +import React from 'react'; import { Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material'; @@ -7,14 +6,8 @@ import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; import SaveIcon from '@mui/icons-material/Save'; import AddIcon from '@mui/icons-material/Add'; - -interface Address { - id: number; - street: string; - city: string; - zipcode: string; - country: string; -} +import { AddressesService } from '../../openapi'; +import type { Address, AddressCreate, AddressUpdate } from '../models/Address'; const AddressManager: React.FC = () => { const [addresses, setAddresses] = React.useState([]); @@ -32,12 +25,8 @@ const AddressManager: React.FC = () => { React.useEffect(() => { const fetchAddresses = async () => { try { - const response = await axios.get('http://127.0.0.1:8000/addresses'); - if (Array.isArray(response.data)) { - setAddresses(response.data); - } else { - setErrorMessage('Failed to load addresses. Expected an array of addresses.'); - } + const response = await AddressesService.getReturnAddressesAddressesGet(); + setAddresses(response); } catch (error) { console.error('Failed to fetch addresses', error); setErrorMessage('Failed to load addresses. Please try again later.'); @@ -53,37 +42,29 @@ const AddressManager: React.FC = () => { }; const handleAddOrUpdateAddress = async () => { - if (editAddressId !== null) { - // Update address - try { - await axios.put(`http://127.0.0.1:8000/addresses/${editAddressId}`, newAddress); + try { + if (editAddressId !== null) { + // Update address + await AddressesService.updateReturnAddressAddressesAddressIdPut(editAddressId, newAddress as AddressUpdate); setAddresses(addresses.map(address => address.id === editAddressId ? { ...address, ...newAddress } : address)); setEditAddressId(null); - setNewAddress({ street: '', city: '', zipcode: '', country: '' }); - setErrorMessage(null); - } catch (error) { - console.error('Failed to update address', error); - setErrorMessage('Failed to update address. Please try again later.'); - } - } else { - // Add new address - try { - const response = await axios.post('http://127.0.0.1:8000/addresses', newAddress); - setAddresses([...addresses, response.data]); - setNewAddress({ street: '', city: '', zipcode: '', country: '' }); - setErrorMessage(null); - } catch (error) { - console.error('Failed to add address', error); - setErrorMessage('Failed to add address. Please try again later.'); + } else { + // Add new address + const response = await AddressesService.createReturnAddressAddressesPost(newAddress as AddressCreate); + setAddresses([...addresses, response]); } + setNewAddress({ street: '', city: '', zipcode: '', country: '' }); + setErrorMessage(null); + } catch (error) { + console.error('Failed to add/update address', error); + setErrorMessage('Failed to add/update address. Please try again later.'); } }; const handleDeleteAddress = async (id: number) => { try { - await axios.delete(`http://127.0.0.1:8000/addresses/${id}`); + await AddressesService.deleteReturnAddressAddressesAddressIdDelete(id); setAddresses(addresses.filter(address => address.id !== id)); - setErrorMessage(null); } catch (error) { console.error('Failed to delete address', error); setErrorMessage('Failed to delete address. Please try again later.'); @@ -117,7 +98,7 @@ const AddressManager: React.FC = () => { Addresses Management - + diff --git a/frontend/src/pages/ContactsManagerView.tsx b/frontend/src/pages/ContactsManagerView.tsx index d8143b7..29ca986 100644 --- a/frontend/src/pages/ContactsManagerView.tsx +++ b/frontend/src/pages/ContactsManagerView.tsx @@ -1,24 +1,17 @@ import * as React from 'react'; -import axios from 'axios'; import { - Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button + Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material'; import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; import SaveIcon from '@mui/icons-material/Save'; import AddIcon from '@mui/icons-material/Add'; - -interface Contact { - id: number; - firstname: string; - lastname: string; - phone_number: string; - email: string; -} +import { ContactsService } from '../../openapi'; +import type { ContactPerson, ContactPersonCreate, ContactPersonUpdate } from '../models/ContactPerson'; const ContactsManager: React.FC = () => { - const [contacts, setContacts] = React.useState([]); - const [newContact, setNewContact] = React.useState>({ + const [contacts, setContacts] = React.useState([]); + const [newContact, setNewContact] = React.useState>({ firstname: '', lastname: '', phone_number: '', @@ -27,17 +20,13 @@ const ContactsManager: React.FC = () => { const [editContactId, setEditContactId] = React.useState(null); const [errorMessage, setErrorMessage] = React.useState(null); const [dialogOpen, setDialogOpen] = React.useState(false); - const [selectedContact, setSelectedContact] = React.useState(null); + const [selectedContact, setSelectedContact] = React.useState(null); React.useEffect(() => { const fetchContacts = async () => { try { - const response = await axios.get('http://127.0.0.1:8000/contacts'); - if (Array.isArray(response.data)) { - setContacts(response.data); - } else { - setErrorMessage('Failed to load contacts. Expected an array of contacts.'); - } + const response = await ContactsService.getContactsContactsGet(); + setContacts(response); } catch (error) { console.error('Failed to fetch contacts', error); setErrorMessage('Failed to load contacts. Please try again later.'); @@ -53,49 +42,41 @@ const ContactsManager: React.FC = () => { }; const handleAddOrUpdateContact = async () => { - if (editContactId !== null) { - // Update contact - try { - await axios.put(`http://127.0.0.1:8000/contacts/${editContactId}`, newContact); + try { + if (editContactId !== null) { + // Update contact + await ContactsService.updateContactContactsContactIdPut(editContactId, newContact as ContactPersonUpdate); setContacts(contacts.map(contact => contact.id === editContactId ? { ...contact, ...newContact } : contact)); setEditContactId(null); - setNewContact({ firstname: '', lastname: '', phone_number: '', email: '' }); - setErrorMessage(null); - } catch (error) { - console.error('Failed to update contact', error); - setErrorMessage('Failed to update contact. Please try again later.'); - } - } else { - // Add new contact - try { - const response = await axios.post('http://127.0.0.1:8000/contacts', newContact); - setContacts([...contacts, response.data]); - setNewContact({ firstname: '', lastname: '', phone_number: '', email: '' }); - setErrorMessage(null); - } catch (error) { - console.error('Failed to add contact', error); - setErrorMessage('Failed to add contact. Please try again later.'); + } else { + // Add new contact + const response = await ContactsService.createContactContactsPost(newContact as ContactPersonCreate); + setContacts([...contacts, response]); } + setNewContact({ firstname: '', lastname: '', phone_number: '', email: '' }); + setErrorMessage(null); + } catch (error) { + console.error('Failed to add/update contact', error); + setErrorMessage('Failed to add/update contact. Please try again later.'); } }; const handleDeleteContact = async (id: number) => { try { - await axios.delete(`http://127.0.0.1:8000/contacts/${id}`); + await ContactsService.deleteContactContactsContactIdDelete(id); setContacts(contacts.filter(contact => contact.id !== id)); - setErrorMessage(null); } catch (error) { console.error('Failed to delete contact', error); setErrorMessage('Failed to delete contact. Please try again later.'); } }; - const handleEditContact = (contact: Contact) => { + const handleEditContact = (contact: ContactPerson) => { setEditContactId(contact.id); setNewContact(contact); }; - const openDialog = (contact: Contact) => { + const openDialog = (contact: ContactPerson) => { setSelectedContact(contact); setDialogOpen(true); };