From 4c2571cfc82fc1ed6a963b63f99ffaa4bde93448 Mon Sep 17 00:00:00 2001
From: Nishanth Mane <nishath.engg93@gmail.com>
Date: Wed, 7 Feb 2024 19:21:04 +0530
Subject: [PATCH 1/3] feat: (section-list): Allow user to drag and drop to sort
the sections in the sidebar
---
.gitignore | 4 +
package-lock.json | 11 +++
package.json | 1 +
src/components/generator/Sidebar.tsx | 110 +++++++++++++++++++--------
4 files changed, 96 insertions(+), 30 deletions(-)
diff --git a/.gitignore b/.gitignore
index 8c85756e..caf2e30b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,7 @@ yarn-error.log*
# swiftlatex's postinstall files
/public/*.js
/public/*.wasm
+
+#vscode
+.vscode
+.history/**
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 75df4a94..0126ac69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-dragged": "^1.1.0",
"react-hook-form": "^7.31.3",
"react-icons": "^4.4.0",
"react-pdf": "^5.7.2",
@@ -4836,6 +4837,16 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-dragged": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/react-dragged/-/react-dragged-1.1.0.tgz",
+ "integrity": "sha512-3Mf437KumcHUgajkbOnY6khYUCVrcpLDZBZ/V3Trkve3xiVm7sTie0lJdoIvYcDAku/zxWLg5doGa4Igh8zhAw==",
+ "peerDependencies": {
+ "@types/node": ">= 14",
+ "@types/react": ">= 17",
+ "react": ">= 17"
+ }
+ },
"node_modules/react-hook-form": {
"version": "7.45.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.1.tgz",
diff --git a/package.json b/package.json
index e2610204..9aa65367 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-dragged": "^1.1.0",
"react-hook-form": "^7.31.3",
"react-icons": "^4.4.0",
"react-pdf": "^5.7.2",
diff --git a/src/components/generator/Sidebar.tsx b/src/components/generator/Sidebar.tsx
index bd21bf1d..f36e2e38 100644
--- a/src/components/generator/Sidebar.tsx
+++ b/src/components/generator/Sidebar.tsx
@@ -2,9 +2,11 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import styled from 'styled-components'
import { MdDragIndicator } from 'react-icons/md'
+import DragSort from 'react-dragged'
import { colors } from '../../theme'
import { PrimaryButton, IconButton } from '../core/Button'
+import { useState } from 'react'
const Aside = styled.aside`
grid-area: sidebar;
@@ -12,7 +14,8 @@ const Aside = styled.aside`
padding: 24px 36px;
`
-const Nav = styled.nav`
+// div targets the items inside the drag sort library
+const NavList = styled.nav`
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -20,8 +23,11 @@ const Nav = styled.nav`
gap: 24px;
margin-bottom: 28px;
- button {
- cursor: grab;
+ > div {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ gap: 24px;
}
`
@@ -33,38 +39,82 @@ const StyledLink = styled(Link)<{ $active: boolean }>`
${(props) => props.$active && `color: ${colors.primary};`}
`
+const DragIconButton = styled(IconButton)`
+ opacity: ${(props) => (props.disabled ? 0 : 1)};
+ cursor: ${(props) => (props.disabled ? 'default' : 'grab')};
+`
+
+const staticSectionLinks = [
+ { label: 'Templates', section: 'templates' },
+ { label: 'Profile', section: 'basics' }
+]
+
+const sortableSectionLinks = [
+ { label: 'Education', section: 'education' },
+ { label: 'Work Experience', section: 'work' },
+ { label: 'Skills', section: 'skills' },
+ { label: 'Projects', section: 'projects' },
+ { label: 'Awards', section: 'awards' }
+]
+
+const NavItem = ({
+ label,
+ section,
+ currSection,
+ draggable
+}: {
+ label: string
+ section: string
+ currSection: string
+ draggable?: boolean
+}) => (
+ <div key={section} style={{ display: 'flex', gap: 8 }}>
+ <DragIconButton type="button" disabled={!Boolean(draggable)}>
+ <MdDragIndicator />
+ </DragIconButton>
+ <StyledLink
+ href={`/generator?section=${section}`}
+ $active={section === currSection}
+ >
+ {label}
+ </StyledLink>
+ </div>
+)
+
export function Sidebar() {
const router = useRouter()
- const { section: currSection = 'basics' } = router.query
-
- const sectionLinks = [
- { label: 'Templates', section: 'templates' },
- { label: 'Profile', section: 'basics' },
- { label: 'Education', section: 'education' },
- { label: 'Work Experience', section: 'work' },
- { label: 'Skills', section: 'skills' },
- { label: 'Projects', section: 'projects' },
- { label: 'Awards', section: 'awards' }
- ]
+ const currSection = (router.query.section || 'basics') as string
+ const [sections, updateSectionOrder] = useState(sortableSectionLinks)
return (
<Aside>
- <Nav>
- {sectionLinks.map(({ label, section }) => (
- <div key={section} style={{ display: 'flex', gap: 8 }}>
- <IconButton type="button">
- <MdDragIndicator />
- </IconButton>
- <StyledLink
- href={`/generator?section=${section}`}
- $active={section === currSection}
- >
- {label}
- </StyledLink>
- </div>
- ))}
- </Nav>
-
+ <NavList>
+ <div>
+ {staticSectionLinks.map(({ label, section }) => (
+ <NavItem
+ key={section}
+ label={label}
+ section={section}
+ currSection={currSection}
+ />
+ ))}
+ </div>
+ <DragSort
+ items={sections}
+ onChange={(params) => updateSectionOrder(params)}
+ renderItem={({ label, section }) => {
+ return (
+ <NavItem
+ draggable
+ key={section}
+ label={label}
+ section={section}
+ currSection={currSection}
+ />
+ )
+ }}
+ />
+ </NavList>
<PrimaryButton form="resume-form">MAKE</PrimaryButton>
</Aside>
)
From dbf72348599937325966366a5fc45adc23a78dab Mon Sep 17 00:00:00 2001
From: Nishanth Mane <nishath.engg93@gmail.com>
Date: Thu, 8 Feb 2024 00:08:26 +0530
Subject: [PATCH 2/3] feat: (drag-sort): use identical drag sort library to
that of v2
---
package-lock.json | 38 +++++++++++---
package.json | 2 +-
src/components/generator/Sidebar.tsx | 76 +++++++++++++---------------
3 files changed, 66 insertions(+), 50 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 0126ac69..824e26b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-dragged": "^1.1.0",
+ "react-easy-sort": "^1.6.0",
"react-hook-form": "^7.31.3",
"react-icons": "^4.4.0",
"react-pdf": "^5.7.2",
@@ -1702,6 +1702,17 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/array-move": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/array-move/-/array-move-3.0.1.tgz",
+ "integrity": "sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg==",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/array-union": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -4837,16 +4848,27 @@
"react": "^18.2.0"
}
},
- "node_modules/react-dragged": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/react-dragged/-/react-dragged-1.1.0.tgz",
- "integrity": "sha512-3Mf437KumcHUgajkbOnY6khYUCVrcpLDZBZ/V3Trkve3xiVm7sTie0lJdoIvYcDAku/zxWLg5doGa4Igh8zhAw==",
+ "node_modules/react-easy-sort": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/react-easy-sort/-/react-easy-sort-1.6.0.tgz",
+ "integrity": "sha512-zd9Nn90wVlZPEwJrpqElN87sf9GZnFR1StfjgNQVbSpR5QTSzCHjEYK6REuwq49Ip+76KOMSln9tg/ST2KLelg==",
+ "dependencies": {
+ "array-move": "^3.0.1",
+ "tslib": "2.0.1"
+ },
+ "engines": {
+ "node": ">=16"
+ },
"peerDependencies": {
- "@types/node": ">= 14",
- "@types/react": ">= 17",
- "react": ">= 17"
+ "react": ">=16.4.0",
+ "react-dom": ">=16.4.0"
}
},
+ "node_modules/react-easy-sort/node_modules/tslib": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+ "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+ },
"node_modules/react-hook-form": {
"version": "7.45.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.1.tgz",
diff --git a/package.json b/package.json
index 9aa65367..52ae79fd 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-dragged": "^1.1.0",
+ "react-easy-sort": "^1.6.0",
"react-hook-form": "^7.31.3",
"react-icons": "^4.4.0",
"react-pdf": "^5.7.2",
diff --git a/src/components/generator/Sidebar.tsx b/src/components/generator/Sidebar.tsx
index f36e2e38..e11be7b7 100644
--- a/src/components/generator/Sidebar.tsx
+++ b/src/components/generator/Sidebar.tsx
@@ -1,12 +1,13 @@
+import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import styled from 'styled-components'
import { MdDragIndicator } from 'react-icons/md'
-import DragSort from 'react-dragged'
+import arrayMove from 'array-move'
+import SortableList, { SortableItem, SortableKnob } from 'react-easy-sort'
import { colors } from '../../theme'
import { PrimaryButton, IconButton } from '../core/Button'
-import { useState } from 'react'
const Aside = styled.aside`
grid-area: sidebar;
@@ -44,17 +45,14 @@ const DragIconButton = styled(IconButton)`
cursor: ${(props) => (props.disabled ? 'default' : 'grab')};
`
-const staticSectionLinks = [
- { label: 'Templates', section: 'templates' },
- { label: 'Profile', section: 'basics' }
-]
-
-const sortableSectionLinks = [
- { label: 'Education', section: 'education' },
- { label: 'Work Experience', section: 'work' },
- { label: 'Skills', section: 'skills' },
- { label: 'Projects', section: 'projects' },
- { label: 'Awards', section: 'awards' }
+const sections = [
+ { label: 'Templates', section: 'templates', isSortble: false },
+ { label: 'Profile', section: 'basics', isSortble: false },
+ { label: 'Education', section: 'education', isSortble: true },
+ { label: 'Work Experience', section: 'work', isSortble: true },
+ { label: 'Skills', section: 'skills', isSortble: true },
+ { label: 'Projects', section: 'projects', isSortble: true },
+ { label: 'Awards', section: 'awards', isSortble: true }
]
const NavItem = ({
@@ -69,9 +67,11 @@ const NavItem = ({
draggable?: boolean
}) => (
<div key={section} style={{ display: 'flex', gap: 8 }}>
- <DragIconButton type="button" disabled={!Boolean(draggable)}>
- <MdDragIndicator />
- </DragIconButton>
+ <SortableKnob>
+ <DragIconButton type="button" disabled={!Boolean(draggable)}>
+ <MdDragIndicator />
+ </DragIconButton>
+ </SortableKnob>
<StyledLink
href={`/generator?section=${section}`}
$active={section === currSection}
@@ -84,36 +84,30 @@ const NavItem = ({
export function Sidebar() {
const router = useRouter()
const currSection = (router.query.section || 'basics') as string
- const [sections, updateSectionOrder] = useState(sortableSectionLinks)
+ const [sortedSections, updateSectionOrder] = useState(sections)
+
+ const onSortEnd = (oldIndex: number, newIndex: number) => {
+ updateSectionOrder((array) => arrayMove(array, oldIndex, newIndex))
+ }
return (
<Aside>
<NavList>
- <div>
- {staticSectionLinks.map(({ label, section }) => (
- <NavItem
- key={section}
- label={label}
- section={section}
- currSection={currSection}
- />
+ <SortableList lockAxis="y" onSortEnd={onSortEnd}>
+ {sortedSections.map(({ label, section, isSortble }) => (
+ <SortableItem key={section}>
+ <div>
+ <NavItem
+ draggable={isSortble}
+ key={section}
+ label={label}
+ section={section}
+ currSection={currSection}
+ />
+ </div>
+ </SortableItem>
))}
- </div>
- <DragSort
- items={sections}
- onChange={(params) => updateSectionOrder(params)}
- renderItem={({ label, section }) => {
- return (
- <NavItem
- draggable
- key={section}
- label={label}
- section={section}
- currSection={currSection}
- />
- )
- }}
- />
+ </SortableList>
</NavList>
<PrimaryButton form="resume-form">MAKE</PrimaryButton>
</Aside>
From 86bc490361cb1d5be83f492f02ad8707028a469f Mon Sep 17 00:00:00 2001
From: Nishanth Mane <nishath.engg93@gmail.com>
Date: Thu, 8 Feb 2024 00:12:39 +0530
Subject: [PATCH 3/3] fix: remove unnecessary styling
---
src/components/generator/Sidebar.tsx | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/components/generator/Sidebar.tsx b/src/components/generator/Sidebar.tsx
index e11be7b7..b6b4081b 100644
--- a/src/components/generator/Sidebar.tsx
+++ b/src/components/generator/Sidebar.tsx
@@ -18,13 +18,9 @@ const Aside = styled.aside`
// div targets the items inside the drag sort library
const NavList = styled.nav`
display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- gap: 24px;
margin-bottom: 28px;
- > div {
+ .sort-list-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -93,10 +89,14 @@ export function Sidebar() {
return (
<Aside>
<NavList>
- <SortableList lockAxis="y" onSortEnd={onSortEnd}>
+ <SortableList
+ lockAxis="y"
+ onSortEnd={onSortEnd}
+ className="sort-list-wrapper"
+ >
{sortedSections.map(({ label, section, isSortble }) => (
<SortableItem key={section}>
- <div>
+ <div className="sort-item-wrapper">
<NavItem
draggable={isSortble}
key={section}