implement: sorting cards

Author: medyo

package.json

@@ -21,6 +21,7 @@
     "react-contexify": "^5.0.0",
     "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.1",
+    "react-easy-sort": "^1.5.1",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^4.4.0",
     "react-markdown": "^7.0.1",

src/assets/App.css

@@ -251,6 +251,7 @@ a {
   padding-top: 16px;
   padding-bottom: 8px;
   cursor: pointer;
+  position: relative;
 }
 .blockHeader:hover .blockHeaderLink {
   opacity: 1;
@@ -263,6 +264,32 @@ a {
   opacity: 0;
   transition: opacity 0.2s linear;
 }
+.blockHeaderDragButton {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to left, transparent, var(--card-actions-background-shadow));
+  border: none;
+  height: 100%;
+  padding: 0 12px;
+  width: 32%;
+  align-items: center;
+  justify-content: start;
+  z-index: 1;
+  cursor: grab;
+  display: none;
+  color: var(--card-action-button-color);
+  font-size: 24px;
+}
+
+.blockHeader:hover .blockHeaderDragButton {
+  display: flex;
+}
+.draggedBlock .block {
+  transform: rotate(3deg);
+  opacity: 0.5;
+}
+
 .blockHeaderIcon {
   position: relative;
   top: 4px;
@@ -273,7 +300,7 @@ a {
   height: 18px;
 }
 .blockHeaderIcon .rss {
-  color:#ee802f;
+  color: #ee802f;
 }
 .blockRow {
   scroll-snap-align: start;

src/components/Elements/Card/Card.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
+import { isDesktop } from 'react-device-detect'
+import { SortableKnob } from 'react-easy-sort'
 import { BsBoxArrowInUpRight } from 'react-icons/bs'
+import { MdOutlineDragIndicator } from 'react-icons/md'
 import { ref } from 'src/config'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SupportedCardType } from 'src/types'
@@ -23,13 +26,21 @@ export const Card = ({ card, titleComponent, children, fullBlock = false }: Card
   return (
     <div className={'block' + (fullBlock ? ' fullBlock' : '')}>
       <div className="blockHeader">
+        {isDesktop && (
+          <SortableKnob>
+            <button className="blockHeaderDragButton">
+              <MdOutlineDragIndicator />
+            </button>
+          </SortableKnob>
+        )}
         <span className="blockHeaderIcon">{icon}</span> {titleComponent || label}{' '}
         {link && (
           <a className="blockHeaderLink" href={link} onClick={handleHeaderLinkClick}>
             <BsBoxArrowInUpRight />
           </a>
         )}
       </div>
+
       <div className="blockContent scrollable">{children}</div>
     </div>
   )

src/components/Layout/AppContentLayout.tsx

@@ -15,14 +15,15 @@ export const AppContentLayout = ({
 
   return (
     <>
-      <main className="AppContent HorizontalScroll">
+      <main className="AppContent">
         {isDesktop ? (
           <DesktopCards cards={cards} userCustomCards={userCustomCards} />
         ) : (
-          <MobileCards selectedCard={selectedCard} />
+          <div className="HorizontalScroll">
+            <MobileCards selectedCard={selectedCard} />
+          </div>
         )}
       </main>
-
       <BottomNavigation
         selectedCard={selectedCard}
         setSelectedCard={setSelectedCard}

src/components/Layout/DesktopCards.tsx

@@ -1,6 +1,7 @@
-import React from 'react'
+import SortableList, { SortableItem } from 'react-easy-sort'
 import { SUPPORTED_CARDS } from 'src/config'
 import { CustomRssCard } from 'src/features/cards'
+import { useUserPreferences } from 'src/stores/preferences'
 import { SelectedCard, SupportedCardType } from 'src/types'
 
 export const DesktopCards = ({
@@ -11,20 +12,37 @@ export const DesktopCards = ({
   userCustomCards: SupportedCardType[]
 }) => {
   const AVAILABLE_CARDS = [...SUPPORTED_CARDS, ...userCustomCards]
+
+  const { updateCardOrder } = useUserPreferences()
+
+  const onSortEnd = (oldIndex: number, newIndex: number) => {
+    updateCardOrder(oldIndex, newIndex)
+  }
+
   return (
-    <>
-      {cards.map((card, index) => {
-        const constantCard = AVAILABLE_CARDS.find((c) => c.value === card.name)
-        if (!constantCard) {
-          return null
-        }
+    <SortableList
+      as="div"
+      onSortEnd={onSortEnd}
+      className="AppContent HorizontalScroll"
+      draggedItemClassName="draggedBlock">
+      {cards
+        .sort((a, b) => a.id - b.id)
+        .map((card, index) => {
+          const constantCard = AVAILABLE_CARDS.find((c) => c.value === card.name)
+          if (!constantCard) {
+            return null
+          }
+
+          const Component = constantCard?.component || CustomRssCard
 
-        return React.createElement(constantCard?.component || CustomRssCard, {
-          key: card.name,
-          meta: constantCard,
-          withAds: index === 0,
-        })
-      })}
-    </>
+          return (
+            <SortableItem key={card.name}>
+              <div>
+                <Component key={card.name} meta={constantCard} withAds={index === 0} />
+              </div>
+            </SortableItem>
+          )
+        })}
+    </SortableList>
   )
 }

src/components/Layout/ScrollCardsNavigator.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'
 import { maxCardsPerRow } from 'src/config'
-import { useUserPreferences } from 'src/stores/preferences'
 import { trackPageScroll } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
 
 export const ScrollCardsNavigator = () => {
   const { cards } = useUserPreferences()
@@ -31,7 +31,7 @@ export const ScrollCardsNavigator = () => {
   }, [])
 
   useLayoutEffect(() => {
-    scrollBarContainer.current = document.querySelector('.AppContent')
+    scrollBarContainer.current = document.querySelector('.AppContent div')
   }, [])
 
   useEffect(() => {
@@ -55,8 +55,7 @@ export const ScrollCardsNavigator = () => {
     }
     trackPageScroll(direction)
     const { scrollLeft } = scrollBarContainer.current
-    const { offsetWidth } = scrollBarContainer.current?.firstChild as HTMLElement
-
+    const { offsetWidth } = scrollBarContainer.current?.firstChild?.firstChild as HTMLElement
     const position = direction === 'left' ? scrollLeft - offsetWidth : scrollLeft + offsetWidth
 
     scrollBarContainer.current.scrollTo({

src/stores/preferences.ts

@@ -30,6 +30,7 @@ type UserPreferencesStoreActions = {
   setCardSettings: (card: string, settings: CardSettingsType) => void
   markOnboardingAsCompleted: (occupation: Omit<Occupation, 'icon'> | null) => void
   setUserCustomCards: (cards: SupportedCardType[]) => void
+  updateCardOrder: (prevIndex: number, newIndex: number) => void
 }
 
 export const useUserPreferences = create(
@@ -74,6 +75,15 @@ export const useUserPreferences = create(
           onboardingResult: occupation,
         })),
       setUserCustomCards: (cards: SupportedCardType[]) => set({ userCustomCards: cards }),
+      updateCardOrder: (prevIndex: number, newIndex: number) => set((state) => {
+        const newState = state.cards;
+      
+        const temp =  newState[prevIndex].id;
+        newState[prevIndex].id = newState[newIndex].id;
+        newState[newIndex].id = temp;
+
+        return { cards: newState}
+      }),
     }),
     {
       name: 'preferences_storage',

yarn.lock

@@ -3093,6 +3093,11 @@ array-includes@^3.1.4, array-includes@^3.1.5:
     get-intrinsic "^1.1.1"
     is-string "^1.0.7"
 
+array-move@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/array-move/-/array-move-3.0.1.tgz#179645cc0987b65953a4fc06b6df9045e4ba9618"
+  integrity sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg==
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -10626,6 +10631,14 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-easy-sort@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/react-easy-sort/-/react-easy-sort-1.5.1.tgz#9a9ddcaae7571a5ef8baed480b6d8faf5d21ca3b"
+  integrity sha512-VKwFO2pHJgz75zEZkxoZYSr0jvQfbS2BUqCQPR3hCRxUfLl9M7xTrXK4rZeFlA+83RxOQCZnzrqtuX0sbtKKlQ==
+  dependencies:
+    array-move "^3.0.1"
+    tslib "2.0.1"
+
 react-error-boundary@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
@@ -12439,6 +12452,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
+  integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"