EX:
// client form object
interface PersonClient {
firstName: string;
lastName: string;
phNumber: string;
age: string;
city: string;
address: string;
};
// server [FormBody]
interface PersonServer {
Name: {
firstName: string;
lastName: string;
},
OtherDetails: {
phNumber: string;
age: string;
city: string;
address: string;
}
}
class PersonAdapter {
constructor() {}
processServerData(personServer: PersonServer):PersonClient {
return {
firstName: personServer.firstName,
lastName: personServer.lastName,
phNumber: personServer.phNumber,
age: personServer.age,
city: personServer.city,
address: personServer.address
};
}
processClientData(personClient: PersonClient): PersonServer {
return {
Name: {
firstName: personClient.firstName,
lastName: personClient.lastName
},
OtherDetails: {
phNumber: personClient.phNumber,
age: personClient.age,
city: personClient.city,
address: personClient.address
}
};
}
}
const personAdapter = new PersonAdapter();
let clientResponse: PersonClient = {};
fetch('url', { method: 'POST',
body: personAdapter.processClientData(personClient)
})
.then((personServer: PersonServer) => {
clientResponse = personAdapter.processServerData(personServer);
});
Client form data is in a flat key-value pair object but the server form body is in grouper objects.
Adopter will convert the client object structure to server form body structure and vice versa