From c5176b5e5fcfd70b27fa436b0b37eb90dfe186dd Mon Sep 17 00:00:00 2001 From: thecodrr Date: Tue, 7 Apr 2020 12:06:31 +0500 Subject: [PATCH] fix: each item should have a unique key prop --- .../components/dialogs/add-notebook-dialog.js | 34 ++++++++----------- .../placeholders/favorites-placeholder.js | 15 ++++---- .../placeholders/notebooks-placeholder.js | 9 ++--- .../placeholders/notesplacholder.js | 6 ++-- .../placeholders/tags-placeholder.js | 9 ++--- apps/web/src/components/properties/index.js | 3 +- apps/web/src/views/Settings.js | 7 +++- 7 files changed, 45 insertions(+), 38 deletions(-) diff --git a/apps/web/src/components/dialogs/add-notebook-dialog.js b/apps/web/src/components/dialogs/add-notebook-dialog.js index d807ebaad..723e7e4c0 100644 --- a/apps/web/src/components/dialogs/add-notebook-dialog.js +++ b/apps/web/src/components/dialogs/add-notebook-dialog.js @@ -15,7 +15,7 @@ class AddNotebookDialog extends React.Component { id = undefined; state = { topics: [""], - focusedInputIndex: 0 + focusedInputIndex: 0, }; performActionOnTopic(index) { @@ -56,7 +56,7 @@ class AddNotebookDialog extends React.Component { if (!this.props.notebook) return; const { title, description, id, topics } = this.props.notebook; this.setState({ - topics: topics.map(topic => topic.title) + topics: topics.map((topic) => topic.title), }); this.title = title; this.description = description; @@ -72,7 +72,7 @@ class AddNotebookDialog extends React.Component { this.id = undefined; this.setState({ topics: [""], - focusedInputIndex: 0 + focusedInputIndex: 0, }); } @@ -90,9 +90,9 @@ class AddNotebookDialog extends React.Component { title: this.title, description: this.description, topics: this.topics, - id: this.id + id: this.id, }); - } + }, }} negativeButton={{ text: "Cancel", onClick: props.close }} > @@ -100,14 +100,14 @@ class AddNotebookDialog extends React.Component { (this.title = e.target.value)} + onChange={(e) => (this.title = e.target.value)} placeholder="Enter name" defaultValue={this.title} /> (this.description = e.target.value)} + onChange={(e) => (this.description = e.target.value)} placeholder="Enter description (optional)" defaultValue={this.description} /> @@ -118,31 +118,27 @@ class AddNotebookDialog extends React.Component { sx={{ maxHeight: this.MAX_AVAILABLE_HEIGHT, overflowY: "auto", - marginBottom: 1 + marginBottom: 1, }} > {this.state.topics.map((value, index) => ( - + { + ref={(ref) => { this._inputRefs[index] = ref; if (ref) ref.value = value; // set default value }} variant="default" placeholder="Topic name" - onFocus={e => { + onFocus={(e) => { this.lastLength = e.nativeEvent.target.value.length; if (this.state.focusedInputIndex === index) return; this.setState({ focusedInputIndex: index }); }} - onChange={e => { + onChange={(e) => { this.topics[index] = e.target.value; }} - onKeyUp={e => { + onKeyUp={(e) => { if (e.nativeEvent.key === "Enter") { this.addTopic(index); } else if ( @@ -180,12 +176,12 @@ class AddNotebookDialog extends React.Component { } export function showEditNoteDialog(notebook) { - return showDialog(perform => ( + return showDialog((perform) => ( { + onDone={async (nb) => { await store.add(nb); perform(false); }} diff --git a/apps/web/src/components/placeholders/favorites-placeholder.js b/apps/web/src/components/placeholders/favorites-placeholder.js index a929dc59d..d315250dc 100644 --- a/apps/web/src/components/placeholders/favorites-placeholder.js +++ b/apps/web/src/components/placeholders/favorites-placeholder.js @@ -12,7 +12,7 @@ function FavoritesPlaceholder() { position: "relative", height: "100px", alignSelf: "center", - flexDirection: "row" + flexDirection: "row", }} > {[ @@ -22,25 +22,26 @@ function FavoritesPlaceholder() { { delay: 10, marginTop: "0px", size: 30 }, { delay: 7, marginTop: "-30px", size: 25 }, { delay: 2, marginTop: "20px", size: 25 }, - { delay: 4, marginTop: "10px", size: 25 } - ].map(item => ( + { delay: 4, marginTop: "10px", size: 25 }, + ].map((item) => ( @@ -54,7 +55,7 @@ function FavoritesPlaceholder() { alignSelf="center" sx={{ textAlign: "center", - fontSize: "title" + fontSize: "title", }} > Notes you favorite appear here. diff --git a/apps/web/src/components/placeholders/notebooks-placeholder.js b/apps/web/src/components/placeholders/notebooks-placeholder.js index f54ecf905..616f3390d 100644 --- a/apps/web/src/components/placeholders/notebooks-placeholder.js +++ b/apps/web/src/components/placeholders/notebooks-placeholder.js @@ -8,14 +8,15 @@ const descriptions = [ "Thoughts & Stuff", "Ugh. Can't handle it anymore.", "Have to organize all this :(", - "What the heck!" + "What the heck!", ]; function NotebooksPlaceholder() { return ( ( + renderItem={(item) => ( diff --git a/apps/web/src/components/placeholders/notesplacholder.js b/apps/web/src/components/placeholders/notesplacholder.js index 0d5460a55..04437b779 100644 --- a/apps/web/src/components/placeholders/notesplacholder.js +++ b/apps/web/src/components/placeholders/notesplacholder.js @@ -14,6 +14,7 @@ function NotesPlaceholder() { const Icon = icons[index]; return ( @@ -33,8 +34,9 @@ function NotesPlaceholder() { - {lines.map(() => ( + {lines.map((_, index) => ( ( @@ -67,12 +68,12 @@ async function animate(controls, setTag) { await controls.start({ opacity: 0, y: 50, - transition: { delay: 1, duration: 0.4 } + transition: { delay: 1, duration: 0.4 }, }); await controls.start({ opacity: 0, y: -50, - transition: { duration: 0 } + transition: { duration: 0 }, }); setTag(getRandomTag()); await animate(controls, setTag); diff --git a/apps/web/src/components/properties/index.js b/apps/web/src/components/properties/index.js index 19f3bd3d0..be4c4cd4e 100644 --- a/apps/web/src/components/properties/index.js +++ b/apps/web/src/components/properties/index.js @@ -96,9 +96,10 @@ function Properties() { - {tools.map((tool) => ( + {tools.map((tool, _) => ( changeState(tool.key, state)} /> diff --git a/apps/web/src/views/Settings.js b/apps/web/src/views/Settings.js index 4deb79125..bbe07af4b 100644 --- a/apps/web/src/views/Settings.js +++ b/apps/web/src/views/Settings.js @@ -68,7 +68,11 @@ function Settings(props) { }} > {accents.map((color) => ( - + ))} {["Terms of Service", "Privacy Policy", "About"].map((title) => (