split styles into different file for sortable

frontend/src/sortable/components/SortableList.tsx

@@ -1,48 +1,13 @@
-import React, { useState } from 'react'
 import {
   SortableContainer,
   SortableElement,
   SortableHandle
 } from 'react-sortable-hoc'
-import arrayMove from 'array-move'
+import { dragHandle, sortableItem, sortableList } from '../styles'
 
 const DragHandle = SortableHandle(() => (
   <div className='listitem-drag-handle'>
-    <style jsx>{`
-      div {
-        width: 20px;
-        height: 15px;
-        user-select: none;
-        cursor: row-resize;
-        align-items: center;
-        background: linear-gradient(
-          top,
-          #0006,
-          #0006 20%,
-          #fff0 0,
-          #fff0 40%,
-          #0006 0,
-          #0006 60%,
-          #fff0 0,
-          #fff0 80%,
-          #0006 0,
-          #0006
-        );
-        background: -webkit-linear-gradient(
-          top,
-          #0006,
-          #0006 20%,
-          #fff0 0,
-          #fff0 40%,
-          #0006 0,
-          #0006 60%,
-          #fff0 0,
-          #fff0 80%,
-          #0006 0,
-          #0006
-        );
-      }
-    `}</style>
+    <style jsx>{dragHandle}</style>
   </div>
 ))
 
@@ -51,12 +16,7 @@ const SortableItem = SortableElement(({ item }: any) => (
     <DragHandle />
     <div className='listitem-content'>{item}</div>
 
-    <style jsx>{`
-      li {
-        display: grid;
-        grid-template-columns: 30px 1fr;
-      }
-    `}</style>
+    <style jsx>{sortableItem}</style>
   </li>
 ))
 
@@ -66,36 +26,9 @@ const SortableList = SortableContainer(({ items }: { items: any[] }) => {
       {items.map((item: any, index: number) => {
         return <SortableItem key={item.key} index={index} item={item} />
       })}
-      <style jsx>{`
-        ul {
-          padding: 0;
-        }
-      `}</style>
+      <style jsx>{sortableList}</style>
     </ul>
   )
 })
 
-const SortableComponent = ({ items }: { items: any[] }) => {
-  const [state, setState] = useState(items)
-
-  function onSortEnd({
-    oldIndex,
-    newIndex
-  }: {
-    oldIndex: number
-    newIndex: number
-  }) {
-    const a = arrayMove(state, oldIndex, newIndex)
-    setState(a)
-  }
-  return (
-    <SortableList
-      onSortEnd={onSortEnd}
-      items={state}
-      lockAxis='y'
-      useDragHandle={true}
-    />
-  )
-}
-
 export default SortableList

frontend/src/sortable/styles/index.ts

@@ -0,0 +1,50 @@
+import css from 'styled-jsx/css'
+
+export const dragHandle = css`
+  div {
+    width: 20px;
+    height: 15px;
+    user-select: none;
+    cursor: row-resize;
+    align-items: center;
+    background: linear-gradient(
+      top,
+      #0006,
+      #0006 20%,
+      #fff0 0,
+      #fff0 40%,
+      #0006 0,
+      #0006 60%,
+      #fff0 0,
+      #fff0 80%,
+      #0006 0,
+      #0006
+    );
+    background: -webkit-linear-gradient(
+      top,
+      #0006,
+      #0006 20%,
+      #fff0 0,
+      #fff0 40%,
+      #0006 0,
+      #0006 60%,
+      #fff0 0,
+      #fff0 80%,
+      #0006 0,
+      #0006
+    );
+  }
+`
+
+export const sortableItem = css`
+  li {
+    display: grid;
+    grid-template-columns: 30px 1fr;
+  }
+`
+
+export const sortableList = css`
+  ul {
+    padding: 0;
+  }
+`