DAW#89 Fix useSortable for tracks

artiphishle · Nov 2, 2023 · 640a53a · 640a53a
1 parent d96ce70
commit 640a53a
Show file tree

Hide file tree

Showing 22 changed files with 380 additions and 242 deletions.
diff --git a/src/app/_common/styles.ts b/src/app/_common/styles.ts
@@ -15,6 +15,11 @@ const styles = {
   /*** @components */
   arranger: {
     main: 'flex flex-1 relative bg-zinc-900/80',
+    ol: 'flex-1',
+    innerBack: {
+      main: 'grid absolute top-[32px] right-0',
+      item: 'item: h-[40px] mb-[4px] border-l border-l-white',
+    },
     inner: 'flex-1',
   },
   avatar: {
@@ -60,6 +65,12 @@ const styles = {
   notes: {
     main: 'flex flex-1 justify-center items-center text-center cursor-pointer text-[0.5rem] bg-blue-900 text-zinc-200 border border-zinc-700',
   },
+  progression: {
+    tr: 'border border-b-zinc-100',
+    td1: 'h-[40px] mb-[4px] border-l border-l-white',
+    td2: 'p-1',
+    td3: 'p-1 bg-zinc-200',
+  },
   time: {
     main: 'flex w-full text-zinc-500 text-xs',
     col1: 'w-[179px|',

diff --git a/src/app/_common/types/arranger.types.ts b/src/app/_common/types/arranger.types.ts
@@ -5,7 +5,6 @@ import { IProject } from './project.types';
 interface IArranger {
   readonly project: IProject;
   readonly tracks: ITrack[];
-  readonly children: ReactNode;
   readonly className?: string;
 }
 

diff --git a/src/app/_common/types/project.types.ts b/src/app/_common/types/project.types.ts
@@ -12,6 +12,7 @@ export enum ETransportState {
 export enum EPortal {
   Instruments = 'portal-instruments',
 }
+
 export interface ISong {
   children: ReactNode;
   className?: string;
@@ -34,7 +35,11 @@ export interface IProject {
   swing: number;
   swingSubdivision: Subdivision;
 }
-
+export interface IData {
+  channels: IChannel[];
+  project: IProject;
+  tracks: ITrack[];
+}
 export interface ISignalFlow {
   in: UniqueIdentifier;
   out: UniqueIdentifier;

diff --git a/src/app/_common/utils.ts b/src/app/_common/utils.ts
@@ -0,0 +1,2 @@
+export const ROMAN_NUMS = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii'];
+export const isRomanNum = (s: string) => ROMAN_NUMS.includes(s.toLowerCase());
diff --git a/src/app/_components/App.tsx b/src/app/_components/App.tsx
@@ -1,12 +1,14 @@
 'use client';
 import _ from 'lodash/fp';
+import usePortal from 'react-useportal';
 
 import t from '@/core/i18n';
+import { patchProject } from '@/api/project/_presets/DefaultPreset';
 import {
   Arranger,
   Footer,
-  Instrument,
   Header,
+  Instrument,
   Mixer,
   Song,
   Track,
@@ -16,27 +18,15 @@ import { useSelector } from '@/core/hooks/useSelector';
 import { useToneJs } from '@/core/hooks/useToneJs';
 
 import { EButtonType, ESize, EVariant } from '@/pfui/constants';
-import type { IChannel } from '@/common/types/channel.types';
-import type { ITrack } from '@/common/types/track.types';
-import type { IProject } from '@/common/types/project.types';
-
+import type { IData, IProject } from '@/common/types/project.types';
 import $ from '@/common/styles';
-import usePortal from 'react-useportal';
-import { patchProject } from '@/api/project/_presets/DefaultPreset';
-
-interface IData {
-  channels: IChannel[];
-  project: IProject;
-  tracks: ITrack[];
-}
 
 export function App({ channels: _channels, project, tracks: _tracks }: IData) {
   const { Portal, isOpen, open, close } = usePortal();
   const { init, toneReady } = useToneJs();
   const { deselectChannels, selectChannels, deselectTracks, selectTracks } =
     useSelector();
-  const _patchProject = (patch: any) => {
-    console.log('patch', patch);
+  const _patchProject = (patch: Partial<IProject>) => {
     patchProject(patch);
   };
 
@@ -178,8 +168,8 @@ export function App({ channels: _channels, project, tracks: _tracks }: IData) {
     {
       children: (
         <div className="flex">
-          <CogIcon className="w-[24px] h-[24px]" />
-          <span className="hidden">Settings</span>
+          <CogIcon className={styles.icon.md} />
+          <span className="hidden">{$('settings')}</span>
         </div>
       ),
       id: 'tabs-settings',
@@ -191,8 +181,8 @@ export function App({ channels: _channels, project, tracks: _tracks }: IData) {
     {
       children: (
         <div className="flex">
-          <InfinityIcon className="w-[24px] h-[24px]" />
-          <span className="hidden">Tests</span>
+          <InfinityIcon className={styles.icon.md} />
+          <span className="hidden">{t('tests')}</span>
         </div>
       ),
       id: 'tabs-test',
@@ -224,7 +214,7 @@ export function App({ channels: _channels, project, tracks: _tracks }: IData) {
           </section>
         </Droppable>
       ),
-      title: 'Testing',
+      title: t('testing'),
     },
   ];
   */
@@ -247,19 +237,7 @@ export function App({ channels: _channels, project, tracks: _tracks }: IData) {
         <main className={$.main}>
           <Song grow={true}>
             <Flex grow={true} vertical={true}>
-              <Arranger project={project} tracks={tracks}>
-                {tracks.map((track) => (
-                  <Track
-                    patch={patchProject}
-                    key={track.id}
-                    track={{
-                      ...track,
-                      isActive: project.activeTrackId === track.id,
-                    }}
-                    project={project}
-                  />
-                ))}
-              </Arranger>
+              <Arranger project={project} tracks={tracks} />
               <Mixer
                 activeTrackId={project.activeTrackId}
                 channels={channels}

diff --git a/src/app/_components/Arranger.tsx b/src/app/_components/Arranger.tsx
@@ -15,20 +15,25 @@ import {
 } from '@dnd-kit/sortable';
 
 import styles from '@/common/styles';
-import { Locator, Time } from '@/components';
+import { Locator, Time, Track } from '@/components';
 
 import type { IArranger } from '@/common/types/arranger.types';
 import { Flex, Grid } from '@/pfui';
 import { useState } from 'react';
 import useTransport from '@/core/hooks/useTransport';
+import { patchTrack, patchTracks } from '@/api/project/_presets/DefaultPreset';
 
 export default function Arranger({
-  project,
-  tracks,
-  children,
+  project: initialProject,
+  tracks: initialTracks,
   className = '',
 }: IArranger) {
   const [position, setPosition] = useState<string>('0:0:0.000');
+  const [tracks, setTracks] = useState(initialTracks);
+  const [project, setProject] = useState(initialProject);
+  const [activeTrackId, setActiveTrackId] = useState(
+    initialProject.activeTrackId,
+  );
   const loopFn = setPosition;
   const { loop } = useTransport({ loopFn });
   const { measureCount, quantization, offsetLeft } = project;
@@ -37,33 +42,26 @@ export default function Arranger({
   const $ = styles.arranger;
 
   const events = {
-    dragEnd: (event: DragEndEvent) => {
-      const { active, over } = event;
+    dragEnd: ({ active, over }: DragEndEvent) => {
       if (active.id === over?.id) return;
 
       const oldIndex = tracks.findIndex(({ id }) => id === active.id);
       const newIndex = tracks.findIndex(({ id }) => id === over?.id);
       const sortedTracks = arrayMove(tracks, oldIndex, newIndex);
-      // await patchProjectContext({ tracks: sortedTracks });
-      // mutate(EEndpoint.ProjectSettings);
+      setTracks(sortedTracks);
+      patchTracks(sortedTracks);
     },
   };
 
-  function dragEnd({ active, delta }: DragEndEvent) {
-    console.log('active/moved x/y', active, delta.x, '/', delta.y);
-  }
-
   return (
-    <DndContext onDragEnd={dragEnd} sensors={sensors}>
+    <DndContext onDragEnd={events.dragEnd} sensors={sensors}>
       <section className={classNames($.main, className)}>
         <Grid
-          className={'grid absolute top-[32px] right-0'}
+          className={$.innerBack.main}
           cols={tracks.length * measureCount * quantization}
           rows={tracks.length}
-          style={{
-            left: offsetLeft,
-          }}
-          classNameItem="h-[40px] mb-[4px] border-l border-l-white"
+          style={{ left: offsetLeft }}
+          classNameItem={$.innerBack.item}
         />
         <section className={$.main}>
           <DndContext
@@ -77,7 +75,21 @@ export default function Arranger({
             >
               <Flex grow vertical>
                 <Time />
-                <ol className="flex-1">{children}</ol>
+                <ol className={$.ol}>
+                  {tracks.map((track) => (
+                    <Track
+                      patchProject={patchTrack}
+                      patchTrack={patchTrack}
+                      key={track.id}
+                      project={project}
+                      setActiveTrackId={setActiveTrackId}
+                      track={{
+                        ...track,
+                        isActive: activeTrackId === track.id,
+                      }}
+                    />
+                  ))}
+                </ol>
               </Flex>
             </SortableContext>
           </DndContext>

diff --git a/src/app/_components/PianoRoll.tsx b/src/app/_components/PianoRoll.tsx
@@ -1,4 +1,3 @@
-'use client';
 import _ from 'lodash/fp';
 import { Scale } from 'tonal';
 
@@ -14,10 +13,11 @@ const $ = {
   inner: 'flex flex-cols text-xs',
 };
 
-export default function PianoRoll() {
+export default async function PianoRoll() {
   // Const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const { activeTrackId, clef, measureCount, quantization } = fetchProject();
-  const tracks = fetchTracks();
+  const { activeTrackId, clef, measureCount, quantization } =
+    await fetchProject();
+  const tracks = await fetchTracks();
   const activeTrack = tracks.find(({ id }) => id === activeTrackId);
   activeTrack || console.warn('[PianoRoll] No active track');
 

diff --git a/src/app/_components/Progression.tsx b/src/app/_components/Progression.tsx
@@ -1,40 +1,39 @@
 import _ from 'lodash/fp';
-import { useMemo } from 'react';
+import React from 'react';
 
-import { PROGRESSION } from 'app/_common/constants';
-import useAudioTheory from 'app/_core/hooks/audio/useAudioTheory';
+import { PROGRESSION } from '@/common/constants';
+import t from '@/core/i18n';
+import useAudioTheory from '@/core/hooks/audio/useAudioTheory';
 
 import type { Note as TNote } from 'tone/build/esm/core/type/NoteUnits';
-import t from 'app/_core/i18n';
-import { fetchProject } from '@/api/project/_presets/DefaultPreset';
+
+import styles from '@/common/styles';
+const $ = styles.progression;
 
 interface IProgression {
-  tonic: TNote;
+  clef: string;
+  tonic: TNote; // clef[0] I assume
 }
-export default function Progression({ tonic }: IProgression) {
-  const { clef } = fetchProject();
+export default function Progression({ clef, tonic }: IProgression) {
   const [, progression] = PROGRESSION;
   const { getChordsByProgression } = useAudioTheory({ tonic });
   const chords = getChordsByProgression(progression);
 
-  const memoProgressions = useMemo(
+  const memoProgressions = React.useMemo(
     () => PROGRESSION.map((p) => getChordsByProgression(p).join(' ')),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [tonic],
   );
 
   return (
     <section>
-      <h3 className="py-4">
-        Calculate progression (try to change &apos;clef&apos; on top)
-      </h3>
       <table>
         <thead>
           <tr>
-            <th>Roman numerals</th>
+            <th>{t('romanNumerals')}</th>
           </tr>
           <tr>
-            <th>Tonic</th>
+            <th>{t('tonic')}</th>
           </tr>
           <tr>
             <th>{_.upperFirst(t('progression'))}</th>
@@ -45,21 +44,18 @@ export default function Progression({ tonic }: IProgression) {
             return (
               <tr
                 key={`testing-progression-${progressionIndex}`}
-                className="border border-b-gray-100"
+                className={$.tr}
               >
-                <td className="p-1 border border-r-gray-100">
+                <td className={$.td1}>
                   <b>{PROGRESSION[progressionIndex]}</b>
                 </td>
-                <td className="p-1">{clef}</td>
-                <td className="p-1 bg-gray-200">{memoProgression}</td>
+                <td className={$.td2}>{clef}</td>
+                <td className={$.td3}>{memoProgression}</td>
               </tr>
             );
           })}
         </tbody>
       </table>
-      <small>
-        Try to change the &apos;clef&apos; in the transporter on top
-      </small>
     </section>
   );
 }
diff --git a/src/app/_components/SignalFlow.tsx b/src/app/_components/SignalFlow.tsx
@@ -1,22 +1,17 @@
 'use client';
 import React from 'react';
 import ReactFlow from 'reactflow';
+import 'reactflow/dist/style.css';
+
 import { useWindowWidth } from '@react-hook/window-size';
 
-import 'reactflow/dist/style.css';
+import type { IData } from '@/common/types/project.types';
+
 import styles from 'app/_common/styles';
-import {
-  fetchChannels,
-  fetchProject,
-  fetchTracks,
-} from '@/api/project/_presets/DefaultPreset';
 
-export default function Dsp() {
-  const channels = fetchChannels();
-  const { bpm } = fetchProject();
-  const tracks = fetchTracks();
+export default function Dsp({ channels, project, tracks }: IData) {
+  const { bpm } = project;
   const windowWidth = useWindowWidth();
-
   const channelNodes = channels.map(({ id, label }, channelIndex) => {
     const channelNode = {
       id: id as string,

diff --git a/src/app/_components/Toolbar.tsx b/src/app/_components/Toolbar.tsx