Skip to content

Commit 248255c

Browse files
Cartlong7Cartlong7
authored
Merge pull request #3 from oslabs-beta/remove-Draggable
Remove drag and drop and associated module 'react-beautiful-dnd'
2 parents ac97afe + 06cc87f commit 248255c

File tree

23 files changed

+67
-239
lines changed

23 files changed

+67
-239
lines changed

‎src/components/AccTestComponent/DescribeRenderer/DescribeRenderer.tsx

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -67,18 +67,11 @@ const DescribeRenderer = ({
6767
};
6868

6969
return describeBlocks.allIds.map((id: string, i: number) => (
70-
<Draggable
70+
<div
7171
key={`describeBlock-${id}`}
72-
draggableId={id}
7372
index={i}
7473
type="describe"
7574
>
76-
{(provided) => (
77-
<div
78-
ref={provided.innerRef}
79-
{...provided.draggableProps}
80-
{...provided.dragHandleProps}
81-
>
8275
<div id={styles.describeBlock} key={i}>
8376
<label htmlFor="describe-label" className={styles.describeLabel}>
8477
Describe Block
@@ -104,16 +97,7 @@ const DescribeRenderer = ({
10497
<p className={styles.describeStatement}>{describeBlocks.byId[id].text}</p>
10598
<div className={styles.separator} />
10699

107-
<Droppable
108-
droppableId={"droppableAccIt" + id}
109-
type={id}
110-
key={`droppable-${id}-${i}`}
111-
>
112-
{(innerProvided) => (
113-
<div
114-
ref={innerProvided.innerRef}
115-
{...innerProvided.droppableProps}
116-
>
100+
117101
<ItRenderer
118102
type={type}
119103
key={`it-${id}-${i}`}
@@ -122,10 +106,6 @@ const DescribeRenderer = ({
122106
updateItStatementText={updateItStatementText}
123107
updateItCatTag={updateItCatTag}
124108
/>
125-
{innerProvided.placeholder}
126-
</div>
127-
)}
128-
</Droppable>
129109

130110
<div className={styles.buttonContainer}>
131111
<div>
@@ -136,8 +116,6 @@ const DescribeRenderer = ({
136116
</div>
137117
</div>
138118
</div>
139-
)}
140-
</Draggable>
141119
));
142120
};
143121

‎src/components/AccTestComponent/ItRenderer/ItRenderer.tsx

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { ChangeEvent, useContext } from 'react';
22
import cn from 'classnames';
3-
import { Draggable } from 'react-beautiful-dnd';
43
import { AccTestCaseContext } from '../../../context/reducers/accTestCaseReducer';
54
import CatTagFilter from '../CatTagFilter/CatTagFilter';
65
import { AiOutlineClose } from 'react-icons/ai';
@@ -51,16 +50,9 @@ const ItRenderer = ({
5150
return itStatements.allIds[describeId].map((id: string, i: number) => {
5251
console.log('ID: ', id);
5352
console.log('ID IN ITSTATEMENTS: ', itStatements.byId[id]);
54-
return (<Draggable
55-
draggableId={id}
56-
index={i}
57-
key={`itRenderer-${id}`}
58-
>
59-
{(provided) => (
53+
return (
54+
6055
<div
61-
ref={provided.innerRef}
62-
{...provided.draggableProps}
63-
{...provided.dragHandleProps}
6456
id={styles.ItRenderer}
6557
key={i}
6658
>
@@ -85,8 +77,7 @@ const ItRenderer = ({
8577
<hr />
8678

8779
</div>
88-
)}
89-
</Draggable>)
80+
)
9081
});
9182
};
9283

‎src/components/EndpointTestComponent/Endpoint.tsx

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useContext } from 'react';
2-
import { Draggable, DraggableProvided} from 'react-beautiful-dnd';
32
import styles from './Endpoint.module.scss';
43
import style from '../ReactTestComponent/Render/Render.module.scss';
54
import styled from '../ReactTestComponent/Render/Prop.module.scss';
@@ -69,12 +68,7 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }: EndpointProps
6968

7069
return (
7170
<div style={{ maxWidth: '650px' }}>
72-
<Draggable draggableId={endpoint.id.toString()} index={index}>
73-
{(provided: typeof DraggableProvided) => (
7471
<div
75-
ref={provided.innerRef}
76-
{...provided.draggableProps}
77-
{...provided.dragHandleProps}
7872
id={styles[`endpointmodal${theme}`]}
7973
>
8074
<img
@@ -84,7 +78,6 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }: EndpointProps
8478
onClick={handleClickDeleteEndpoint}
8579
/>
8680
<div id={styles.header}>
87-
<img src={dragIcon} alt='drag' />
8881
<h3>Endpoint</h3>
8982
</div>
9083
<div id={styles.groupFlexbox}>
@@ -223,8 +216,6 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }: EndpointProps
223216
</button>
224217
</div>
225218
</div>
226-
)}
227-
</Draggable>
228219
</div>
229220
);
230221
};

‎src/components/GraphQLTestComponent/GraphQL.tsx

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useContext } from 'react';
2-
import { Draggable } from 'react-beautiful-dnd';
32
import styles from './GraphQL.module.scss';
43
import style from '../ReactTestComponent/Render/Render.module.scss';
54
import styled from '../ReactTestComponent/Render/Prop.module.scss';
@@ -76,26 +75,16 @@ const GraphQL = ({ graphQL, index, dispatchToGraphQLTestCase }: GraphQLProps) =>
7675

7776
return (
7877
<div style={{ maxWidth: '650px' }}>
79-
<Draggable draggableId={graphQL.id.toString()} index={index}>
80-
{(provided) => (
81-
8278
<div
83-
ref={provided.innerRef}
84-
{...provided.draggableProps}
85-
{...provided.dragHandleProps}
8679
id={styles[`graphQLmodal${theme}`]}
8780
>
88-
<p>
89-
{typeof provided}
90-
</p>
9181
<img
9282
src={closeIcon}
9383
id={styles.close}
9484
alt='close'
9585
onClick={handleClickDeleteGraphQL}
9686
/>
9787
<div id={styles.header}>
98-
<img src={dragIcon} alt='drag' />
9988
<h3>GraphQL</h3>
10089
</div>
10190
<div id={styles.groupFlexbox}>
@@ -233,8 +222,6 @@ const GraphQL = ({ graphQL, index, dispatchToGraphQLTestCase }: GraphQLProps) =>
233222
</button>
234223
</div>
235224
</div>
236-
)}
237-
</Draggable>
238225
</div>
239226
);
240227
};

‎src/components/Modals/ExportFileModal.jsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState, useContext } from 'react';
22
import ReactModal from 'react-modal';
3-
import Draggable from 'react-draggable';
43
import { GlobalContext } from '../../context/reducers/globalReducer';
54
import withStyles from '@mui/styles/withStyles';
65
import {
@@ -177,7 +176,6 @@ const ExportFileModal = ({ isExportModalOpen, setIsExportModalOpen }) => {
177176
ariaHideApp={false}
178177
overlayClassName={styles[`modalOverlay${theme}`]}
179178
>
180-
<Draggable>
181179
<div id={styles.container}>
182180
<AiOutlineCloseCircle
183181
id={styles.escapeButton}
@@ -227,7 +225,6 @@ const ExportFileModal = ({ isExportModalOpen, setIsExportModalOpen }) => {
227225
</div>
228226
)}
229227
</div>
230-
</Draggable>
231228
</ReactModal>
232229
</div>
233230
);

‎src/components/Modals/Modal.jsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import AccordionSummary from '@mui/material/AccordionSummary';
2424
import AccordionDetails from '@mui/material/AccordionDetails';
2525
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
2626
import { GlobalContext } from '../../context/reducers/globalReducer';
27-
import Draggable from 'react-draggable';
2827
import { AiOutlineCloseCircle } from "react-icons/ai"
2928
import { VscNewFile } from "react-icons/vsc"
3029
import { Button, TextField, InputAdornment } from '@mui/material';
@@ -221,7 +220,7 @@ if (title === 'New Test') {
221220
shouldCloseOnOverlayClick={true}
222221
shouldCloseOnEsc={true}
223222
>
224-
<Draggable id={styles.testModal}>
223+
<div id={styles.testModal}>
225224
<div id={styles.container}>
226225
<AiOutlineCloseCircle
227226
id={styles.escapeButton}
@@ -253,7 +252,7 @@ if (title === 'New Test') {
253252
</div>
254253
</div>
255254
</div>
256-
</Draggable>
255+
</div>
257256
</ReactModal>
258257
);
259258
}
@@ -268,7 +267,6 @@ if (title === 'New Test') {
268267
overlayClassName={styles[`modalOverlay${theme}`]}
269268
ariaHideApp={false}
270269
>
271-
{/* <Draggable> */}
272270
<div id={styles.containerRun}>
273271
{/* Modal Title */}
274272
<div id={styles.title}>
@@ -386,7 +384,6 @@ if (title === 'New Test') {
386384
</Accordion>
387385
</div>
388386
</div>
389-
{/* </Draggable> */}
390387
</ReactModal>
391388
);
392389
};

‎src/components/Modals/UploadTestModal.jsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState, useContext } from 'react';
22
import ReactModal from 'react-modal';
3-
import Draggable from 'react-draggable';
43
import { AccTestCaseContext } from '../../context/reducers/accTestCaseReducer';
54
import { EndpointTestCaseContext } from '../../context/reducers/endpointTestCaseReducer';
65
import { HooksTestCaseContext } from '../../context/reducers/hooksTestCaseReducer';
@@ -89,7 +88,6 @@ const UploadTestModal = ({ uploadTestModalIsOpen, setUploadTestModalIsOpen, test
8988
ariaHideApp={false}
9089
style={modalStyles}
9190
>
92-
<Draggable>
9391
<div id={styles.container}>
9492
<div id={styles.title}>
9593
<p>Save Test Case</p>
@@ -108,7 +106,6 @@ const UploadTestModal = ({ uploadTestModalIsOpen, setUploadTestModalIsOpen, test
108106
</button>
109107
</div>
110108
</div>
111-
</Draggable>
112109
</ReactModal>
113110
);
114111
};

‎src/components/PuppeteerTestComponent/PaintTiming/PaintTiming.tsx

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useContext } from 'react';
22
import styles from './PaintTiming.module.scss';
3-
import { Draggable, DraggableProvided } from 'react-beautiful-dnd';
43
import {
54
deletePuppeteerTest,
65
updatePaintTiming,
@@ -28,12 +27,7 @@ const PaintTiming = ({ paintTiming, index }: { paintTiming: PuppeteerStatements,
2827
};
2928

3029
return (
31-
<Draggable draggableId={paintTiming.id.toString()} index={index}>
32-
{(provided:typeof DraggableProvided) => (
3330
<div
34-
ref={provided.innerRef}
35-
{...provided.draggableProps}
36-
{...provided.dragHandleProps}
3731
id={styles[`modal${theme}`]}
3832
>
3933
<img
@@ -44,7 +38,6 @@ const PaintTiming = ({ paintTiming, index }: { paintTiming: PuppeteerStatements,
4438
/>
4539

4640
<div id={styles.header}>
47-
<img src={dragIcon} alt='drag' />
4841
<h3>Paint Timing</h3>
4942
</div>
5043

@@ -135,8 +128,6 @@ const PaintTiming = ({ paintTiming, index }: { paintTiming: PuppeteerStatements,
135128
</div>
136129
</div>
137130
</div>
138-
)}
139-
</Draggable>
140131
);
141132
};
142133

‎src/components/ReactHooksTestComponent/HookUpdates/HookUpdates.jsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useContext, useRef, useEffect } from 'react';
2-
import { Draggable } from 'react-beautiful-dnd';
32
import styles from './HookUpdates.module.scss';
43
import { HooksTestCaseContext } from '../../../context/reducers/hooksTestCaseReducer';
54
import {
@@ -45,13 +44,9 @@ const HookUpdates = ({ hookUpdates, index }) => {
4544
}
4645
}, []);
4746
return (
48-
<Draggable draggableId={hookUpdates.id.toString()} index={index}>
49-
{(provided) => (
5047
<div
51-
ref={provided.innerRef}
52-
{...provided.draggableProps}
5348
id={styles[`hooksmodal${theme}`]}
54-
{...provided.dragHandleProps}
49+
index={index}
5550
>
5651
<img
5752
src={closeIcon}
@@ -60,7 +55,6 @@ const HookUpdates = ({ hookUpdates, index }) => {
6055
onClick={handleClickDeleteHookUpdates}
6156
/>
6257
<div id={styles.hookUpdatesHeader}>
63-
<img src={dragIcon} alt='drag' />
6458
<h3>Hooks</h3>
6559
</div>
6660
<div id={styles.hooksFlexBox}>
@@ -129,8 +123,6 @@ const HookUpdates = ({ hookUpdates, index }) => {
129123
</Button>
130124
</div>
131125
</div>
132-
)}
133-
</Draggable>
134126
);
135127
};
136128

‎src/components/ReactTestComponent/Assertion/Assertion.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ type FieldTypes = (
2222
| 'matcherValue'
2323
)
2424

25-
const Assertion = (props: ReactTestComponentAssertion): JSX.Element => {
26-
const { statement, describeId, itId, statementId } = props;
25+
const Assertion = ({ statement, describeId, itId, statementId }: ReactTestComponentAssertion ): JSX.Element => {
2726
const [{ statements }, dispatchToReactTestCase] = useContext(ReactTestCaseContext);
2827
const [{theme}] = useContext(GlobalContext)
2928

‎src/components/ReactTestComponent/DescribeRenderer/DescribeRenderer.jsx

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import cn from 'classnames';
3-
import { Draggable, Droppable } from 'react-beautiful-dnd';
43
import ItRenderer from '../ItRenderer/ItRenderer';
54
import styles from './DescribeRenderer.module.scss';
65
import { deleteDescribeBlock, addItstatement } from '../../../context/actions/frontendFrameworkTestCaseActions';
@@ -35,13 +34,8 @@ const DescribeRenderer = ({
3534
};
3635

3736
return describeBlocks.allIds.map((id, i) => (
38-
<Draggable key={id} draggableId={id} index={i} type='describe'>
39-
{(provided) => (
4037
<div
4138
id={styles[`describeBlock${theme}`]}
42-
ref={provided.innerRef}
43-
{...provided.draggableProps}
44-
{...provided.dragHandleProps}
4539
>
4640
{/* <label htmlFor='describe-label' className={styles.describeLabel}>
4741
Describe Block
@@ -77,9 +71,6 @@ const DescribeRenderer = ({
7771
fullWidth />
7872
</div>
7973

80-
<Droppable droppableId={'droppableReactIt' + id} type={id}>
81-
{(innerProvided) => (
82-
<div ref={innerProvided.innerRef} {...innerProvided.droppableProps}>
8374
<ItRenderer
8475
type={type}
8576
key={`it-${id}-${i}`}
@@ -89,16 +80,10 @@ const DescribeRenderer = ({
8980
handleChangeItStatementText={handleChangeItStatementText}
9081
theme={theme}
9182
/>
92-
{innerProvided.placeholder}
93-
</div>
94-
)}
95-
</Droppable>
9683
<Button className={styles.addIt} id={id} onClick={addItStatementHandleClick} variant="outlined">
9784
Add It Statement
9885
</Button>
9986
</div>
100-
)}
101-
</Draggable>
10287
));
10388
};
10489

0 commit comments

Comments
 (0)