From 32f7227e7d59ffb0fd5c04b2cf07569244d49a24 Mon Sep 17 00:00:00 2001 From: meziyum Date: Wed, 15 Mar 2023 04:14:10 +0530 Subject: [PATCH 1/8] Initial Refactor --- src/client/components/input/drag-and-drop.js | 95 +++++++++----------- 1 file changed, 42 insertions(+), 53 deletions(-) diff --git a/src/client/components/input/drag-and-drop.js b/src/client/components/input/drag-and-drop.js index 4b5e60ec62..f1ff79ab09 100644 --- a/src/client/components/input/drag-and-drop.js +++ b/src/client/components/input/drag-and-drop.js @@ -19,43 +19,34 @@ import * as bootstrap from 'react-bootstrap'; import PropTypes from 'prop-types'; import React from 'react'; +import { useState } from 'react'; const {Card, Form} = bootstrap; -class DragAndDrop extends React.Component { - constructor() { - super(); - this.handleClick = this.handleClick.bind(this); - this.handleDragOver = this.handleDragOver.bind(this); - this.handleDrop = this.handleDrop.bind(this); - this.state = { - achievement: { - name: 'drag badge to set', - src: '/images/blankbadge.svg' - } - }; - } +function DragAndDrop(props) { + const [achievement, setAchievement] = useState({ + name: 'drag badge to set', + src: '/images/blankbadge.svg' + }); - handleClick(ev) { + const handleClick = (ev) => { ev.preventDefault(); - this.setState({ - achievement: { - name: 'drag badge to set', - src: '/images/blankbadge.svg' - } + setAchievement({ + name: 'drag badge to set', + src: '/images/blankbadge.svg' }); } - handleDragOver(ev) { + const handleDragOver = (ev) => { ev.preventDefault(); } - addChild(data) { - this.setState({achievement: data}); + const addChild = (data) => { + setAchievement(data); } - handleDrop(ev) { + const handleDrop = (ev) => { ev.preventDefault(); let data; @@ -65,38 +56,36 @@ class DragAndDrop extends React.Component { catch (err) { return; } - this.addChild(data); + addChild(data); } - render() { - return ( - - - - - - -
- {this.state.achievement.name} -
- - - ); - } + return ( + + + + + + +
+ {achievement.name} +
+ + + ); } DragAndDrop.displayName = 'DragAndDrop'; From ec37cd2536f6bb3814f8064dd1f31a917260fa48 Mon Sep 17 00:00:00 2001 From: meziyum Date: Wed, 15 Mar 2023 04:51:48 +0530 Subject: [PATCH 2/8] ES-Lint fixes --- src/client/components/input/drag-and-drop.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/client/components/input/drag-and-drop.js b/src/client/components/input/drag-and-drop.js index f1ff79ab09..4ffc1d84f1 100644 --- a/src/client/components/input/drag-and-drop.js +++ b/src/client/components/input/drag-and-drop.js @@ -19,10 +19,10 @@ import * as bootstrap from 'react-bootstrap'; import PropTypes from 'prop-types'; import React from 'react'; -import { useState } from 'react'; const {Card, Form} = bootstrap; +const {useState} = React; function DragAndDrop(props) { const [achievement, setAchievement] = useState({ @@ -30,7 +30,7 @@ function DragAndDrop(props) { src: '/images/blankbadge.svg' }); - const handleClick = (ev) => { + function handleClick(ev) { ev.preventDefault(); setAchievement({ name: 'drag badge to set', @@ -38,15 +38,15 @@ function DragAndDrop(props) { }); } - const handleDragOver = (ev) => { + function handleDragOver(ev) { ev.preventDefault(); } - const addChild = (data) => { + function addChild(data) { setAchievement(data); } - const handleDrop = (ev) => { + function handleDrop(ev) { ev.preventDefault(); let data; From e70d09129ba9e9b78a91bb6f7ba528c60aa5ecb2 Mon Sep 17 00:00:00 2001 From: meziyum Date: Wed, 15 Mar 2023 05:01:50 +0530 Subject: [PATCH 3/8] eslint-disable react/jsx-no-bind --- src/client/components/input/drag-and-drop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/components/input/drag-and-drop.js b/src/client/components/input/drag-and-drop.js index 4ffc1d84f1..de01f44646 100644 --- a/src/client/components/input/drag-and-drop.js +++ b/src/client/components/input/drag-and-drop.js @@ -58,7 +58,7 @@ function DragAndDrop(props) { } addChild(data); } - + /* eslint-disable react/jsx-no-bind */ return ( Date: Wed, 15 Mar 2023 05:09:33 +0530 Subject: [PATCH 4/8] Fix react/jsx-no-bind --- src/client/components/input/drag-and-drop.js | 23 ++++++++------------ 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/client/components/input/drag-and-drop.js b/src/client/components/input/drag-and-drop.js index de01f44646..cd820eff04 100644 --- a/src/client/components/input/drag-and-drop.js +++ b/src/client/components/input/drag-and-drop.js @@ -22,31 +22,24 @@ import React from 'react'; const {Card, Form} = bootstrap; -const {useState} = React; +const {useState, useCallback} = React; function DragAndDrop(props) { const [achievement, setAchievement] = useState({ name: 'drag badge to set', src: '/images/blankbadge.svg' }); - - function handleClick(ev) { + const handleClick = useCallback((ev) => { ev.preventDefault(); setAchievement({ name: 'drag badge to set', src: '/images/blankbadge.svg' }); - } - - function handleDragOver(ev) { + }); + const handleDragOver = useCallback((ev) => { ev.preventDefault(); - } - - function addChild(data) { - setAchievement(data); - } - - function handleDrop(ev) { + }); + const handleDrop = useCallback((ev) => { ev.preventDefault(); let data; @@ -57,8 +50,10 @@ function DragAndDrop(props) { return; } addChild(data); + }); + function addChild(data) { + setAchievement(data); } - /* eslint-disable react/jsx-no-bind */ return ( Date: Wed, 15 Mar 2023 05:13:10 +0530 Subject: [PATCH 5/8] add_child fix --- src/client/components/input/drag-and-drop.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/client/components/input/drag-and-drop.js b/src/client/components/input/drag-and-drop.js index cd820eff04..181d2ca62e 100644 --- a/src/client/components/input/drag-and-drop.js +++ b/src/client/components/input/drag-and-drop.js @@ -29,6 +29,9 @@ function DragAndDrop(props) { name: 'drag badge to set', src: '/images/blankbadge.svg' }); + function addChild(data) { + setAchievement(data); + } const handleClick = useCallback((ev) => { ev.preventDefault(); setAchievement({ @@ -51,9 +54,6 @@ function DragAndDrop(props) { } addChild(data); }); - function addChild(data) { - setAchievement(data); - } return ( Date: Wed, 22 Mar 2023 03:22:34 +0530 Subject: [PATCH 6/8] Convert to .tsx The .js file has been converted to .tsx for proper typesafe. The tsconfig has strict mode set to false even then we are using event definition in typescript for future proofing in case we need to change the mode to strict. --- .../{drag-and-drop.js => drag-and-drop.tsx} | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) rename src/client/components/input/{drag-and-drop.js => drag-and-drop.tsx} (74%) diff --git a/src/client/components/input/drag-and-drop.js b/src/client/components/input/drag-and-drop.tsx similarity index 74% rename from src/client/components/input/drag-and-drop.js rename to src/client/components/input/drag-and-drop.tsx index 181d2ca62e..b2ce13da36 100644 --- a/src/client/components/input/drag-and-drop.js +++ b/src/client/components/input/drag-and-drop.tsx @@ -24,35 +24,41 @@ import React from 'react'; const {Card, Form} = bootstrap; const {useState, useCallback} = React; -function DragAndDrop(props) { - const [achievement, setAchievement] = useState({ +type Achievement = { + name: string; + src: string; + id: string; +}; +type Props = { + name: string; +}; + +function DragAndDrop({name}: Props) { + const [achievement, setAchievement] = useState({ name: 'drag badge to set', src: '/images/blankbadge.svg' }); - function addChild(data) { - setAchievement(data); - } - const handleClick = useCallback((ev) => { - ev.preventDefault(); + const handleClick = useCallback((event: React.MouseEvent) => { + event.preventDefault(); setAchievement({ name: 'drag badge to set', src: '/images/blankbadge.svg' }); }); - const handleDragOver = useCallback((ev) => { - ev.preventDefault(); + const handleDragOver = useCallback((event: React.DragEvent) => { + event.preventDefault(); }); - const handleDrop = useCallback((ev) => { - ev.preventDefault(); + const handleDrop = useCallback((event: React.DragEvent) => { + event.preventDefault(); let data; try { - data = JSON.parse(ev.dataTransfer.getData('text')); + data = JSON.parse(event.dataTransfer.getData('text')); } - catch (err) { + catch (error) { return; } - addChild(data); + setAchievement(data); }); return ( From ae13dda69a674ea4cc200a032bb356afb7dd8d93 Mon Sep 17 00:00:00 2001 From: meziyum Date: Wed, 22 Mar 2023 04:12:31 +0530 Subject: [PATCH 7/8] Documentation --- src/client/components/input/drag-and-drop.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/client/components/input/drag-and-drop.tsx b/src/client/components/input/drag-and-drop.tsx index b2ce13da36..64a48e4e29 100644 --- a/src/client/components/input/drag-and-drop.tsx +++ b/src/client/components/input/drag-and-drop.tsx @@ -24,15 +24,34 @@ import React from 'react'; const {Card, Form} = bootstrap; const {useState, useCallback} = React; +/** +* The Achievement interface, defining the properties of an achievement. +* @typedef +* @property {string} name - The name of the achievement. +* @property {string} src - The source URL of the achievement's badge image. +* @property {string} id - The ID of the achievement. +*/ type Achievement = { name: string; src: string; id: string; }; +/** + * Props for DragAndDropImage component + * @typedef {Object} Props + * @property {string} name - The name of the DragAndDrop component. + */ type Props = { name: string; }; +/** +* A component for a drag-and-drop card that displays an achievement. +* The card displays an image of the achievement and allows the user to drag and drop a different achievement onto it. +* When a new achievement is dropped onto the card, it is displayed instead of the original achievement. +* @param {Props} props - The props object containing the following: +* @returns {JSX.Element} A React component that displays a drag-and-drop card for an achievement. +*/ function DragAndDrop({name}: Props) { const [achievement, setAchievement] = useState({ name: 'drag badge to set', From af579d22fa4f44f2ca92c3bf290a7eda5dadc090 Mon Sep 17 00:00:00 2001 From: meziyum Date: Wed, 22 Mar 2023 04:48:45 +0530 Subject: [PATCH 8/8] JSX.Element --- src/client/components/input/drag-and-drop.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/components/input/drag-and-drop.tsx b/src/client/components/input/drag-and-drop.tsx index 64a48e4e29..6886b98200 100644 --- a/src/client/components/input/drag-and-drop.tsx +++ b/src/client/components/input/drag-and-drop.tsx @@ -52,7 +52,7 @@ type Props = { * @param {Props} props - The props object containing the following: * @returns {JSX.Element} A React component that displays a drag-and-drop card for an achievement. */ -function DragAndDrop({name}: Props) { +function DragAndDrop({name}: Props): JSX.Element { const [achievement, setAchievement] = useState({ name: 'drag badge to set', src: '/images/blankbadge.svg'