Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to react dnd #27

Open
wants to merge 3 commits into
base: clerk-authentication
Choose a base branch
from
Open

Migrate to react dnd #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d07df3b
install react-dnd and html-backend
eyob-muktar Dec 22, 2023
c5f0ee9
added a react-dnd wrapper and draggable card
eyob-muktar Dec 22, 2023
61545a9
replaced react-beautiful-dnd with react-dnd
eyob-muktar Dec 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions components/LeftSideBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import React from 'react';
import { useSelector } from 'react-redux';
// import ArrowBackIcon from '@material-ui/icons/ArrowBack';
// import EditSingleExperience from "./forms/EditSingleExperience"
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import ReorderEducation from './drag&drop/ReorderEducation';
import ReorderExperience from './drag&drop/ReorderExperience';
import ReorderExtras from './drag&drop/ReorderExtras';
Expand Down Expand Up @@ -54,21 +56,23 @@ const LeftSideBar = () => {
);

return (
<div className="bg-primary lg:pt-16 lg:px-4 flex lg:block fixed lg:static bottom-0 w-screen lg:w-auto justify-center left-sidebar order-3 lg:order-1">
{/* add overflow-scroll ||^^ if section are needed to scroll */}
{sections.data.map(({ title, Icon, id, label }) => (
<div key={id} className="inline-block lg:block my-4 lg:my-8">
<Tooltip title={title} placement={matches ? 'right' : 'bottom'} arrow>
<Button onClick={toggleLeftDrawer(label, true)}>
<Icon style={{ color: 'white' }} size="100px" />
</Button>
</Tooltip>
<Drawer anchor="left" open={leftDrawerState[label]} onClose={toggleLeftDrawer(label, false)}>
{leftList(label)}
</Drawer>
</div>
))}
</div>
<DndProvider backend={HTML5Backend}>
<div className="bg-primary lg:pt-16 lg:px-4 flex lg:block fixed lg:static bottom-0 w-screen lg:w-auto justify-center left-sidebar order-3 lg:order-1">
{/* add overflow-scroll ||^^ if section are needed to scroll */}
{sections.data.map(({ title, Icon, id, label }) => (
<div key={id} className="inline-block lg:block my-4 lg:my-8">
<Tooltip title={title} placement={matches ? 'right' : 'bottom'} arrow>
<Button onClick={toggleLeftDrawer(label, true)}>
<Icon style={{ color: 'white' }} size="100px" />
</Button>
</Tooltip>
<Drawer anchor="left" open={leftDrawerState[label]} onClose={toggleLeftDrawer(label, false)}>
{leftList(label)}
</Drawer>
</div>
))}
</div>
</DndProvider>
);
};

Expand Down
59 changes: 59 additions & 0 deletions components/drag&drop/DraggableCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/* eslint-disable react/display-name */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import { memo } from 'react';
import { useDrag, useDrop } from 'react-dnd';

export const DraggableCard = memo(({ onClickItem, children, id, moveCard, findCard }) => {
const originalIndex = findCard(id).index;

const [{ isDragging }, drag] = useDrag(
() => ({
type: 'card',
item: { id, originalIndex },
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
end: (item, monitor) => {
const { id: droppedId, originalIndex } = item;
const didDrop = monitor.didDrop();
if (!didDrop) {
moveCard(droppedId, originalIndex);
}
},
}),
[id, originalIndex, moveCard],
);

const [, drop] = useDrop(
() => ({
accept: 'card',
hover({ id: draggedId }) {
if (draggedId !== id) {
const { index: overIndex } = findCard(id);
moveCard(draggedId, overIndex);
}
},
}),
[findCard, moveCard],
);

const grid = 10;
const getItemStyle = isDragging => ({
padding: grid * 2,
marginBottom: `${grid}px`,
background: '#1abc9c',
opacity: isDragging ? 0 : 1,
cursor: 'move',
});
return (
<div
onClick={() => onClickItem({ id })}
className="text-white text-lg bg-primary rounded"
ref={node => drag(drop(node))}
style={{ ...getItemStyle(isDragging) }}
>
{children}
</div>
);
});
147 changes: 68 additions & 79 deletions components/drag&drop/ReorderEducation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { useAuth } from '@clerk/nextjs';
import { Drawer, makeStyles, useMediaQuery } from '@material-ui/core';
import Button from '@material-ui/core/Button';
Expand All @@ -6,8 +8,8 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import SaveIcon from '@material-ui/icons/Save';
import axios from 'axios';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import React, { useCallback, useEffect, useState } from 'react';
import { useDrop } from 'react-dnd';
import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'sonner';
import { v4 as uuidv4 } from 'uuid';
Expand All @@ -16,6 +18,7 @@ import { toastMessages } from '../../shared/contants';
import { EmptyFileSVG } from '../SVGs';
import EducationCard from '../cards/EducationCard';
import EditSingleEducation from '../forms/EditSingleEducation';
import { DraggableCard } from './DraggableCard';

const ReorderEducation = ({ closeDrawer, anchor, type }) => {
const { getToken } = useAuth();
Expand Down Expand Up @@ -85,29 +88,32 @@ const ReorderEducation = ({ closeDrawer, anchor, type }) => {
const toggleEduDrawerStates = (id, open) => event => {
setEduDrawerStates({ ...eduDrawerStates, [id]: open });
};
const onDragEnd = result => {
if (!result.destination) return;
const items = Array.from(edu);
const [reorderItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderItem);
setEdu(items);
};

const grid = 10;
const getItemStyle = (isDragging, draggableStyle) => ({
// some basic styles to make the items look a bit nicer
userSelect: 'none',
padding: grid * 2,
margin: `0 0 ${grid}px 0`,
transition: 'height 0.2s',
overflow: 'hidden',

// change background colour if dragging
background: isDragging ? '#1abc9c95' : '#1abc9c',

// styles we need to apply on draggables
...draggableStyle,
});
const findCard = useCallback(
id => {
const card = edu.filter(c => `${c.id}` === id)[0];
return {
card,
index: edu.indexOf(card),
};
},
[edu],
);
const moveCard = useCallback(
(id, atIndex) => {
const { card, index } = findCard(id);
const items = Array.from(edu);
const [reorderItem] = items.splice(index, 1);
items.splice(atIndex, 0, reorderItem);
setEdu(items);
},
[findCard, edu, setEdu],
);
const [{ didDrop }, drop] = useDrop(() => ({
accept: 'card',
collect: monitor => ({
didDrop: monitor.didDrop(),
}),
}));

const getListStyle = isDraggingOver => ({
// background: isDraggingOver ? '#ffffff' : '#16a085',
Expand Down Expand Up @@ -248,64 +254,47 @@ const ReorderEducation = ({ closeDrawer, anchor, type }) => {
<AddIcon />
<p className="ml-2 capitalize">Add Education</p>
</Button>
<Button className="lg:px-4 lg:py-2 mr-6 text-white hover:bg-[#12836d] bg-primary" onClick={save} color="primary" variant="contained">
<Button
className="lg:px-4 lg:py-2 mr-6 text-white hover:bg-[#12836d] bg-primary"
onClick={save}
color="primary"
variant="contained"
>
<SaveIcon />
<p className="ml-2 capitalize">Save Order</p>
</Button>
</div>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="education">
{(provided, snapshot) => (
// eslint-disable-next-line
<div
style={getListStyle(snapshot.isDraggingOver)}
className="pb-10 pt-8 rounded flex-1 flex flex-col"
{...provided.droppableProps}
ref={provided.innerRef}
onClick={() => {
if (snapshot.isDraggingOver) {
disableActiveEdu();
}
}}
>
{edu.length === 0 ? (
<div className="flex items-center justify-center flex-1">
<div className="bg-gray-50 rounded-full h-96 w-96 flex flex-col items-center justify-center">
<EmptyFileSVG />
<h5 className="text-default font-normal my-5">No Education Yet!</h5>
</div>
</div>
) : (
edu.map((e, index) => (
<Draggable key={e.id} draggableId={e.id} index={index}>
{(provided, snapshot) => (
// eslint-disable-next-line
<div
onClick={() => onClickEdu({ id: e.id })}
className="p-6 text-white text-lg bg-primary rounded"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={{
...getItemStyle(snapshot.isDragging, provided.draggableProps.style),
}}
>
<EducationCard
{...e}
onDelete={onDelete}
openEditEduForm={toggleEduDrawerStates(e.id, true)}
educationActive={educationActive}
/>
</div>
)}
</Draggable>
))
)}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>

{edu.length === 0 ? (
<div className="flex items-center justify-center flex-1">
<div className="bg-gray-50 rounded-full h-96 w-96 flex flex-col items-center justify-center">
<EmptyFileSVG />
<h5 className="text-default font-normal my-5">No Education Yet!</h5>
</div>
</div>
) : (
<div
style={getListStyle(didDrop)}
className="pb-10 pt-8 rounded flex-1 flex flex-col"
ref={drop}
onClick={() => {
if (didDrop) {
disableActiveEdu();
}
}}
>
{edu.map((e, index) => (
<DraggableCard key={e.id} id={e.id} index={index} moveCard={moveCard} findCard={findCard} onClickItem={onClickEdu}>
<EducationCard
{...e}
onDelete={onDelete}
openEditEduForm={toggleEduDrawerStates(e.id, true)}
educationActive={educationActive}
/>
</DraggableCard>
))}
</div>
)}

{edu.map(edu => (
<div key={edu.id}>
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-redux": "^7.2.4",
"react-to-print": "^2.12.4",
Expand All @@ -38,9 +40,9 @@
"sass": "^1.32.12",
"sonner": "^1.2.4",
"swr": "^0.5.6",
"tailwindcss": "^3.3.6",
"uuid": "^8.3.2",
"yup": "^0.32.9",
"tailwindcss": "^3.3.6"
"yup": "^0.32.9"
},
"devDependencies": {
"@next/eslint-plugin-next": "^13.4.19",
Expand Down
49 changes: 49 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,6 +502,21 @@
tslib "^2.4.1"
webcrypto-core "^1.7.4"

"@react-dnd/asap@^5.0.1":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
integrity sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==

"@react-dnd/invariant@^4.0.1":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-4.0.2.tgz#b92edffca10a26466643349fac7cdfb8799769df"
integrity sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==

"@react-dnd/shallowequal@^4.0.1":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4"
integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==

"@rushstack/eslint-patch@^1.1.3":
version "1.3.3"
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz"
Expand Down Expand Up @@ -2233,6 +2248,15 @@ dlv@^1.1.3:
resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==

dnd-core@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19"
integrity sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==
dependencies:
"@react-dnd/asap" "^5.0.1"
"@react-dnd/invariant" "^4.0.1"
redux "^4.2.0"

dns-equal@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz"
Expand Down Expand Up @@ -5638,6 +5662,24 @@ react-beautiful-dnd@^13.1.0:
redux "^4.0.4"
use-memo-one "^1.1.1"

react-dnd-html5-backend@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6"
integrity sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==
dependencies:
dnd-core "^16.0.1"

react-dnd@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-16.0.1.tgz#2442a3ec67892c60d40a1559eef45498ba26fa37"
integrity sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==
dependencies:
"@react-dnd/invariant" "^4.0.1"
"@react-dnd/shallowequal" "^4.0.1"
dnd-core "^16.0.1"
fast-deep-equal "^3.1.3"
hoist-non-react-statics "^3.3.2"

react-dom@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
Expand Down Expand Up @@ -5766,6 +5808,13 @@ redux@^4.0.0, redux@^4.0.4, redux@^4.1.0:
dependencies:
"@babel/runtime" "^7.9.2"

redux@^4.2.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
dependencies:
"@babel/runtime" "^7.9.2"

reflect.getprototypeof@^1.0.3:
version "1.0.4"
resolved "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz"
Expand Down