From fd5ed8aa4f159c8e1c0476915432e0a97a239a91 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Sat, 1 Oct 2022 19:48:06 +0530 Subject: fixed warning 'component changing controlled input to uncontrolled' while editing shipping addresses --- src/_colors.scss | 7 +++ src/_styles.scss | 2 +- src/classes/client.js | 6 ++ src/components/editors/address-editor.js | 41 ++++++------- src/components/editors/client-editor.js | 82 +++++++++++--------------- src/components/editors/contact-editor.js | 41 +++++-------- src/components/editors/item-editor.js | 20 +++++-- src/components/editors/multi-address-editor.js | 62 +++++++++++++++++++ src/components/editors/scss/_colors.scss | 14 +++-- src/components/editors/scss/client-editor.scss | 12 ++++ src/components/tables/client-table.js | 4 +- src/components/tables/scss/_colors.scss | 16 ++--- src/views/manage/clients.js | 25 +++++++- 13 files changed, 212 insertions(+), 120 deletions(-) create mode 100644 src/components/editors/multi-address-editor.js (limited to 'src') diff --git a/src/_colors.scss b/src/_colors.scss index 12e4b92..ced67aa 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -16,10 +16,17 @@ */ $primaryAccentColor: #bd93f9; +$secondaryAccentColor: #d0afff; + $backgroundColor: #282a36; $linkColor: $primaryAccentColor; $white: #f8f8f2; +$gray: lightgray; $black: black; +$warningColor: #ed4683; + $fgColor: $white; +$darkFgColor: $black; +$disabledColor: $gray; diff --git a/src/_styles.scss b/src/_styles.scss index 3faed12..064b9c6 100644 --- a/src/_styles.scss +++ b/src/_styles.scss @@ -33,7 +33,7 @@ backdrop-filter: blur(2px); .floating-window { width: 90%; - max-width: 1000px; + max-width: 1200px; z-index: 6; } } diff --git a/src/classes/client.js b/src/classes/client.js index 20e0524..6785c90 100644 --- a/src/classes/client.js +++ b/src/classes/client.js @@ -64,3 +64,9 @@ export const getAllClients = (ok, fail) => { .then(res => ok(res.data)) .catch(err => fail(err)) } + +export const editClient = (client, ok, fail) => { + axios.put(`/client/${client.Id}`, client) + .then(res => ok()) + .catch(err => fail()) +} diff --git a/src/components/editors/address-editor.js b/src/components/editors/address-editor.js index bd81b6f..5fb8ff6 100644 --- a/src/components/editors/address-editor.js +++ b/src/components/editors/address-editor.js @@ -18,29 +18,19 @@ import { Address } from './../../classes/client'; import './scss/address-editor.scss'; +import { useState, useEffect } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faXmark } from '@fortawesome/free-solid-svg-icons'; -const AddressEditor = (props) => { - const handleInput = (field, event) => { - const a = new Address(); - const val = event.target.value; - a.Country = field === "country" ? val : props.address.Country; - a.State = field === "state" ? val : props.address.State; - a.City = field === "city" ? val : props.address.City; - a.Text = field === "address" ? val : props.address.Text; - a.PostalCode = field === "postal" ? val : props.address.PostalCode; - props.setAddress(a); - } - +const AddressEditor = ({ heading, address, setAddress, isBillingAddress, billingAddressIsShipping, setShipToBillingAddress, deleteAddress}) => { return (
-

{props.heading}

- {props.isBillingAddress || // cross button +

{heading}

+ {isBillingAddress || // cross button + onClick={deleteAddress}/> }
@@ -49,21 +39,24 @@ const AddressEditor = (props) => { Country: handleInput("country", e)} /> + value={address.Country} + onChange={(e) => setAddress({Country: e.target.value})} />
@@ -72,23 +65,25 @@ const AddressEditor = (props) => { Address: