Skip to content

Commit

Permalink
refactor source code
Browse files Browse the repository at this point in the history
  • Loading branch information
@MyagmarsurenM
MyagmarsurenM committed Sep 30, 2021
1 parent 3631793 commit f525880
Show file tree
Hide file tree
Showing 9 changed files with 456 additions and 169 deletions.
14 changes: 13 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,16 @@
"files": [
"lib"
],
"peerDependencies": {
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@daily-co/daily-js": "^0.9.995",
"@nateradebaugh/react-datetime": "^4.0.0-rc.10",
"@types/bunyan": "^1.8.6",
"@types/draft-js": "^0.10.24",
"@types/enzyme": "^3.1.12",
"@types/enzyme-adapter-react-16": "^1.0.2",
"@types/jest": "^26.0.10",
"@types/node": "^10.9.4",
"@types/react": "^16.4.13",
"@types/react-dom": "^16.0.7",
Expand All @@ -29,6 +35,7 @@
"ckeditor4-react": "^1.0.0",
"classnames": "^2.2.5",
"color": "^3.1.2",
"customize-cra": "^1.0.0",
"date-fns": "1.29.0",
"dayjs": "^1.8.15",
"draft-js": "^0.10.5",
Expand All @@ -49,6 +56,7 @@
"query-string": "^5.0.0",
"react": "^16.11.0",
"react-apollo": "^3.1.3",
"react-app-rewired": "^2.1.6",
"react-beautiful-dnd": "^13.0.0",
"react-bootstrap": "^1.0.0-beta.14",
"react-color": "^2.17.3",
Expand All @@ -58,6 +66,7 @@
"react-router-dom": "^5.1.2",
"react-scripts": "^3.0.1",
"react-select-plus": "^1.0.0-rc.5",
"react-to-print": "^2.13.0",
"react-toggle": "^4.1.1",
"react-transition-group": "^2.5.1",
"request-idle-callback": "^1.0.2",
Expand All @@ -82,5 +91,8 @@
],
"engines": {
"node": ">=10.x.x"
},
"devDependencies": {
"typescript": "3.4.1"
}
}
66 changes: 63 additions & 3 deletions src/products/components/CategoryForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import FormControl from '../../components/form/Control';
import CommonForm from '../../components/form/Form';
import FormGroup from '../../components/form/Group';
import ControlLabel from '../../components/form/Label';
import Uploader from '../../components/Uploader';
import { FormColumn, FormWrapper } from '../../styles/main';
import { ModalFooter } from '../../styles/main';
import { IButtonMutateProps, IFormProps } from '../../types';
import { generateCategoryOptions } from '../../utils';
import { IAttachment, IButtonMutateProps, IFormProps } from '../../types';
import { extractAttachment, generateCategoryOptions } from '../../utils';
import { IProductCategory } from '../types';
import { PRODUCT_CATEGORY_STATUSES } from '../constants';

type Props = {
categories: IProductCategory[];
Expand All @@ -17,17 +20,45 @@ type Props = {
closeModal: () => void;
};

class CategoryForm extends React.Component<Props> {
type State = {
attachment: IAttachment
}

class CategoryForm extends React.Component<Props, State> {

constructor(props) {
super(props);

this.state = {
attachment: {} as IAttachment
};
}

renderContent = (formProps: IFormProps) => {
const { renderButton, closeModal, category, categories } = this.props;
const { values, isSubmitted } = formProps;

const object = category || ({} as IProductCategory);
const { attachment } = this.state;
values.attachment = Object.entries(attachment).length > 0 ? this.state.attachment : null;

if (category) {
values._id = category._id;
values.attachment = category.attachment
? { ...category.attachment, __typename: undefined }
: null;
}

const onChangeAttachment = (files: IAttachment[]) => {

values.attachment = files.length ? files[0] : null;
object.attachment = values.attachment;
this.setState({ attachment: values.attachment });
};

const attachments =
(object.attachment && extractAttachment([object.attachment])) || [];

return (
<>
<FormGroup>
Expand Down Expand Up @@ -62,6 +93,35 @@ class CategoryForm extends React.Component<Props> {
/>
</FormGroup>

<FormWrapper>
<FormColumn>
<FormGroup>
<ControlLabel>State</ControlLabel>

<FormControl
{...formProps}
name="status"
componentClass="select"
defaultValue={object.status}
options={PRODUCT_CATEGORY_STATUSES}
>
</FormControl>
</FormGroup>
</FormColumn>
<FormColumn>
<FormGroup>
<ControlLabel>Image</ControlLabel>

<Uploader
defaultFileList={attachments}
onChange={onChangeAttachment}
multiple={false}
single={true}
/>
</FormGroup>
</FormColumn>
</FormWrapper>

<FormGroup>
<ControlLabel>Parent Category</ControlLabel>

Expand Down
164 changes: 150 additions & 14 deletions src/products/components/ProductForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import FormGroup from '../../components/form/Group';
import ControlLabel from '../../components/form/Label';
import ModalTrigger from '../../components/ModalTrigger';
import Uploader from '../../components/Uploader';
import { ModalFooter } from '../../styles/main';
import { ModalFooter, FormColumn, FormWrapper } from '../../styles/main';
import { IAttachment, IButtonMutateProps, IFormProps } from '../../types';
import { extractAttachment, generateCategoryOptions } from '../../utils';
import { TYPES } from '../constants';
import { TYPES, PRODUCT_SUPPLY } from '../constants';
import CategoryForm from '../containers/CategoryForm';
import { Row } from '../styles';
import { IProduct, IProductCategory } from '../types';
Expand All @@ -24,7 +24,34 @@ type Props = {
closeModal: () => void;
};

class Form extends React.Component<Props> {
type State = {
disabled: boolean;
productCount: number;
minimiumCount: number;

attachment: IAttachment;
attachmentMore: IAttachment[];
}
class Form extends React.Component<Props, State> {

constructor(props) {
super(props);

const { product } = props

const productCount = product && product.productCount ? product.productCount : 0;
const minimiumCount = product && product.minimiumCount ? product.minimiumCount : 0;
const disabled = product && product.supply === "limited" ? false : true;

this.state = {
disabled,
productCount,
minimiumCount,
attachment: {} as IAttachment,
attachmentMore: [] as IAttachment[]
};
}

renderFormTrigger(trigger: React.ReactNode) {
const content = props => (
<CategoryForm {...props} categories={this.props.productCategories} />
Expand All @@ -42,13 +69,29 @@ class Form extends React.Component<Props> {

const types = TYPES.ALL;

const { attachment, attachmentMore } = this.state;

values.attachment = Object.entries(attachment).length > 0 ? attachment : null;
values.attachmentMore = Object.entries(attachmentMore).length > 0 ? attachmentMore : null;

if (product) {
values._id = product._id;
values.attachment = product.attachment
? { ...product.attachment, __typename: undefined }
: null;

const tempAttachments = product.attachmentMore || [];
const attachMore: any[] = [];

tempAttachments.forEach(attachmentOne => {
const tmp = attachmentOne ? { ...attachmentOne, __typename: undefined } : null;
attachMore.push(tmp);
});
values.attachmentMore = attachMore;
values.description = product.description;
values.vendorId = product.vendorId;
values.productCount = product.productCount;
values.minimiumCount = product.minimiumCount;
}

const trigger = (
Expand All @@ -57,9 +100,45 @@ class Form extends React.Component<Props> {
</Button>
);

const onMinimiumAndCount = (variable: string, e) => {
const value = e.target.value;
this.setState({ [variable]: value } as any);
values[variable] = value;
object[variable] = values[variable];
}

const onSupplyChange = e => {

let value = 0;
let minValue = 0;
this.setState({ disabled: true });

if (e.target.value === "limited") {
value = object.productCount || 0;
minValue = object.minimiumCount || 0;
this.setState({ disabled: false });
}

this.setState({ productCount: value });
this.setState({ minimiumCount: minValue });

values.productCount = value;
object.productCount = values.productCount;

values.minimiumCount = minValue;
object.minimiumCount = values.minimiumCount;
};

const onChangeAttachment = (files: IAttachment[]) => {

values.attachment = files.length ? files[0] : null;
object.attachment = values.attachment;

values.attachmentMore = files;
object.attachmentMore = values.attachmentMore;

this.setState({ attachment: values.attachment, attachmentMore: values.attachmentMore });

};

const onChangeDescription = e => {
Expand All @@ -73,7 +152,7 @@ class Form extends React.Component<Props> {
};

const attachments =
(object.attachment && extractAttachment([object.attachment])) || [];
(object.attachmentMore && extractAttachment(object.attachmentMore)) || [];

return (
<>
Expand Down Expand Up @@ -164,6 +243,73 @@ class Form extends React.Component<Props> {
/>
</FormGroup>

<FormWrapper>
<FormColumn>
<FormGroup>
<ControlLabel>Product supply</ControlLabel>

<FormControl
{...formProps}
name="supply"
componentClass="select"
onChange={onSupplyChange}
defaultValue={object.supply}
options={PRODUCT_SUPPLY}

>
</FormControl>
</FormGroup>
</FormColumn>

<FormColumn>
<FormWrapper>
<FormColumn>
<FormGroup>
<ControlLabel>Product count</ControlLabel>

<FormControl
{...formProps}
name="productCount"
value={this.state.productCount}
disabled={this.state.disabled}
onChange={onMinimiumAndCount.bind(this, "productCount")}
type="number"
>
</FormControl>
</FormGroup>
</FormColumn>
<FormColumn>
<FormGroup>
<ControlLabel>Minimium count</ControlLabel>

<FormControl
{...formProps}
name="minimiumCount"
value={this.state.minimiumCount}
disabled={this.state.disabled}
onChange={onMinimiumAndCount.bind(this, "minimiumCount")}
type="number"
>
</FormControl>
</FormGroup>
</FormColumn>
</FormWrapper>
</FormColumn>

</FormWrapper>

<FormGroup>
<ControlLabel>Images</ControlLabel>

<Uploader
defaultFileList={attachments}
onChange={onChangeAttachment}
multiple={true}
single={false}
/>

</FormGroup>

<FormGroup>
<ControlLabel>Vendor</ControlLabel>
<SelectCompanies
Expand Down Expand Up @@ -192,16 +338,6 @@ class Form extends React.Component<Props> {
<FormControl {...formProps} name="sku" defaultValue={object.sku} />
</FormGroup>

<FormGroup>
<ControlLabel>Image</ControlLabel>
<Uploader
defaultFileList={attachments}
onChange={onChangeAttachment}
multiple={false}
single={true}
/>
</FormGroup>

<ModalFooter>
<Button
btnStyle="simple"
Expand Down
12 changes: 12 additions & 0 deletions src/products/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,15 @@ export const TYPES = {
SERVICE: 'service',
ALL: ['product', 'service']
};

export const PRODUCT_CATEGORY_STATUSES = [
{ label: 'Active', value: 'active' },
{ label: 'Disabled', value: 'disabled' },
{ label: 'Archived', value: 'archived' }
];

export const PRODUCT_SUPPLY = [
{ label: 'Unlimited', value: 'unlimited' },
{ label: 'Limited', value: 'limited' },
{ label: 'Unique', value: 'unique' }
];
Loading

0 comments on commit f525880

Please sign in to comment.