Fix React warnings in development

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-07-14 15:21:46 +08:00
parent 1fa27e5166
commit 5eaeecbf5b
2 changed files with 19 additions and 27 deletions

View File

@ -2,7 +2,7 @@
import React from "react"; import React from "react";
import axios from "axios"; import axios from "axios";
import ReactDOM from "react-dom"; import { createRoot } from "react-dom/client";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
@ -314,10 +314,10 @@ class Layout extends React.PureComponent {
) : null} ) : null}
<div class={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div className={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div className="modal-dialog" role="document">
<div class="modal-content"> <div className="modal-content">
<div class="modal-body rfqFeedback"> <div className="modal-body rfqFeedback">
<div className="d-flex w-100"> <div className="d-flex w-100">
@ -369,8 +369,8 @@ class Layout extends React.PureComponent {
</form> </form>
<div className="d-flex flex-column flex-sm-row justify-content-end"> <div className="d-flex flex-column flex-sm-row justify-content-end">
<a type="button" onClick={onClickCloseRFQFeedback} class="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2">Close</a> <a type="button" onClick={onClickCloseRFQFeedback} className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2">Close</a>
<a type="button" onClick={this.handleClickLoad} class={`btn btn-sm btn-primary m-0 ms-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a> <a type="button" onClick={this.handleClickLoad} className={`btn btn-sm btn-primary m-0 ms-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
</div> </div>
</div> </div>
) : null} ) : null}
@ -453,7 +453,7 @@ class ProductItem extends React.PureComponent {
const render_datasheet_link = (datasheet_file && datasheet_name && ( const render_datasheet_link = (datasheet_file && datasheet_name && (
<div className="ds"> <div className="ds">
<span class='doc-icon'></span> <span className='doc-icon'></span>
<a href={datasheet_file} target="_blank" rel="noopener noreferrer"> <a href={datasheet_file} target="_blank" rel="noopener noreferrer">
{datasheet_name} {datasheet_name}
</a> </a>
@ -464,7 +464,7 @@ class ProductItem extends React.PureComponent {
<section className="productItem"> <section className="productItem">
<div className="content"> <div className="content">
<h3 style={{ 'margin-bottom': name_codename ? '5px' : '20px'}}>{name}</h3> <h3 style={{ 'marginBottom': name_codename ? '5px' : '20px'}}>{name}</h3>
{name_codename ? ( {name_codename ? (
<p>{name_codename}</p> <p>{name_codename}</p>
) : null } ) : null }
@ -1025,11 +1025,10 @@ class OrderPanel extends React.PureComponent {
</div> </div>
<div> <div>
<input <button
className="btn btn-sm btn-outline-primary m-0 mb-2" className="btn btn-sm btn-outline-primary m-0 mb-2"
style={{'cursor': 'pointer'}} style={{'cursor': 'pointer'}}
value="Import JSON" onClick={onClickOpenImport}>Import JSON</button>
onClick={onClickOpenImport} />
</div> </div>
{isMobile ? ( {isMobile ? (
@ -1255,13 +1254,12 @@ class OrderForm extends React.PureComponent {
placeholder="Additional notes" /> placeholder="Additional notes" />
<div className="d-flex flex-column flex-sm-row justify-content-between"> <div className="d-flex flex-column flex-sm-row justify-content-between">
<input <button
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2" className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
style={{'cursor': 'pointer', 'fontWeight': '700'}} style={{'cursor': 'pointer', 'fontWeight': '700'}}
value="Show JSON" onClick={onClickShow}>Show JSON</button>
onClick={onClickShow} />
<input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} /> <button className="btn btn-primary w-100 m-0 ms-sm-2" type="submit">{`${isProcessing ? 'Processing ...' : 'Request quote'}`}</button>
</div> </div>
{/*This will open an email window. Send the email to make your request.*/} {/*This will open an email window. Send the email to make your request.*/}
</form> </form>
@ -1514,7 +1512,7 @@ class Backlog extends React.PureComponent {
})); }));
const groups = ordered_groups.map((group, g_index) => { const groups = ordered_groups.map((group, g_index) => {
return ( return (
<div className="accordion-item"> <div className="accordion-item" key={`${group.name}`}>
<h2 className="accordion-header"> <h2 className="accordion-header">
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}> data-bs-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
@ -2026,7 +2024,7 @@ class Shop extends React.PureComponent {
} = this.state; } = this.state;
const itemsCloned = Array.from(newItems); const itemsCloned = Array.from(newItems);
const itemsData = {}; const itemsData = [];
const rules = {}; const rules = {};
@ -2310,9 +2308,7 @@ class Shop extends React.PureComponent {
...this.state.columns, ...this.state.columns,
cart: { cart: {
...this.state.columns.cart, ...this.state.columns.cart,
itemsData: { itemsData: itemsData,
...itemsData,
},
} }
}, },
rules: { rules: {
@ -2431,8 +2427,4 @@ class Shop extends React.PureComponent {
} }
} }
createRoot(document.querySelector('#root-shop')).render(<Shop data={data} />);
ReactDOM.render(
<Shop data={data} />,
document.querySelector('#root-shop'),
);

View File

@ -921,7 +921,7 @@ const shop_data = {
id: 'cart', id: 'cart',
title: 'Cart', title: 'Cart',
items: [], items: [],
itemsData: {}, itemsData: [],
}, },
}, },