Finish fixing types

Author: RobbieTheWagner

app/components/colors-list.ts

@@ -9,6 +9,7 @@ import { fadeOut } from 'ember-animated/motions/opacity';
 import type { Store } from 'ember-orbit';
 
 import type { RecordOperationTerm } from '@orbit/records';
+import { TrackedArray } from 'tracked-built-ins';
 
 import 'swach/components/color-row';
 import type ColorModel from 'swach/data-models/color';
@@ -31,9 +32,12 @@ export default class ColorsListComponent extends Component<ColorsListSignature>
 
     if (!palette.$isDisconnected) {
       if (palette.isColorHistory) {
-        return palette.colors.sortBy('createdAt').reverse();
+        return palette.colors.sort(
+          (a, b) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        );
       } else {
-        return palette.colorOrder.map((color: ColorModel) => {
+        return palette.colorOrder.map((color: { type: string; id: string }) => {
           return palette.colors.find((c) => c.id === color.id);
         });
       }
@@ -73,14 +77,16 @@ export default class ColorsListComponent extends Component<ColorsListSignature>
     const { palette } = this.args;
 
     if (color && palette && !palette.isLocked) {
-      const colorsList = palette.colors.map((color) => {
-        return { type: 'color', id: color.id };
-      });
+      const colorsList = new TrackedArray<{ type: string; id: string }>(
+        palette.colors.map((color) => {
+          return { type: 'color', id: color.id };
+        }),
+      );
 
       const colorToRemove = colorsList.find((c) => c.id === color.id);
 
       if (colorToRemove) {
-        colorsList.removeObject(colorToRemove);
+        colorsList.splice(colorsList.indexOf(colorToRemove), 1);
 
         await this.store.update((t) => {
           const operations: RecordOperationTerm[] = [

app/components/kuler.ts

@@ -86,7 +86,7 @@ export default class KulerComponent extends Component<KulerSignature> {
           async (_event: unknown, color) => {
             await this._onColorChange(color);
             this.colorPicker.setColors(
-              this.selectedPalette.colors.mapBy('hex'),
+              this.selectedPalette.colors.map((color: ColorModel) => color.hex),
               this.selectedPalette.selectedColorIndex,
             );
           },
@@ -137,8 +137,9 @@ export default class KulerComponent extends Component<KulerSignature> {
 
   @action
   setColorAsBase(): Promise<void> {
-    this.baseColor =
-      this.selectedPalette.colors[this.selectedPalette.selectedColorIndex];
+    this.baseColor = this.selectedPalette.colors[
+      this.selectedPalette.selectedColorIndex
+    ] as ColorModel;
 
     return this.baseColorChanged(
       this.palettes.indexOf(this.selectedPalette),
@@ -165,7 +166,7 @@ export default class KulerComponent extends Component<KulerSignature> {
   @action
   setSelectedPalette(event: InputEvent): void {
     const paletteName = (<HTMLInputElement>event.target).value;
-    const palette = this.palettes.findBy('name', paletteName);
+    const palette = this.palettes.find((p: Palette) => p.name === paletteName);
 
     if (palette) {
       this.selectedPalette = palette;
@@ -189,13 +190,15 @@ export default class KulerComponent extends Component<KulerSignature> {
       color instanceof iro.Color ? color.rgba : color,
     );
 
-    this.selectedPalette.colors.replace(selectedColorIndex, 1, [
-      newColor.attributes,
-    ]);
+    this.selectedPalette.colors.splice(
+      selectedColorIndex,
+      1,
+      ...[newColor.attributes as unknown as ColorModel],
+    );
 
     if (selectedColorIndex === 0) {
       this.baseColor =
-        this.selectedPalette.colors[this.selectedPalette.selectedColorIndex];
+        this.selectedPalette.colors[this.selectedPalette.selectedColorIndex] as ColorModel;
       await this.setColorAsBase();
     }
 
@@ -219,7 +222,9 @@ export default class KulerComponent extends Component<KulerSignature> {
     this.colorPicker = (iro.ColorPicker as any)(
       '#kuler-color-picker-container',
       {
-        colors: this.selectedPalette.colors.map((color: ColorModel) => color.hex),
+        colors: this.selectedPalette.colors.map(
+          (color: ColorModel) => color.hex,
+        ),
         layoutDirection: 'horizontal',
         layout: [
           {

app/components/palettes-list.ts

@@ -63,8 +63,8 @@ export default class PalettesListComponent extends Component<PalettesListSignatu
 
     const movedItem = sourceList[sourceIndex] as PaletteModel;
 
-    sourceList.removeAt(sourceIndex);
-    targetList.insertAt(targetIndex, movedItem);
+    sourceList.splice(sourceIndex, 1);
+    targetList.splice(targetIndex, 0, movedItem);
 
     await this.store.update((t) => {
       const operations: RecordOperationTerm[] = [];

app/controllers/palettes.ts

@@ -34,8 +34,10 @@ export default class PalettesController extends Controller {
     if (colorHistory) {
       return colorHistory.colors
         .slice()
-        .sortBy('createdAt')
-        .reverse()
+        .sort(
+          (a, b) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        )
         .slice(0, 16);
     } else {
       return [];
@@ -175,7 +177,7 @@ export default class PalettesController extends Controller {
         const colorToRemove = colorsList.find((c) => c.id === existingColor.id);
 
         if (colorToRemove) {
-          colorsList.removeObject(colorToRemove);
+          colorsList.splice(colorsList.indexOf(colorToRemove), 1);
         }
       }
 
@@ -215,7 +217,7 @@ export default class PalettesController extends Controller {
     const colorToMove = sourceColorList.find((c) => c.id === sourceColor.id);
 
     if (colorToMove) {
-      sourceColorList.removeObject(colorToMove);
+      sourceColorList.splice(sourceColorList.indexOf(colorToMove), 1);
       sourceColorList.splice(targetIndex, 0, colorToMove);
 
       await this.store.update((t) =>
@@ -235,11 +237,13 @@ export default class PalettesController extends Controller {
     targetIndex: number,
     targetPalette: PaletteModel,
   ): Promise<void> {
-    const sourceColorOrder = sourceList.map((c) => c.$identity);
+    const sourceColorOrder = new TrackedArray(
+      sourceList.map((c) => c.$identity),
+    );
     const colorToRemove = sourceColorOrder.find((c) => c.id === sourceColor.id);
 
     if (colorToRemove) {
-      sourceColorOrder.removeObject(colorToRemove);
+      sourceColorOrder.splice(sourceColorOrder.indexOf(colorToRemove), 1);
 
       await this.store.update((t) => {
         const operations: RecordOperationTerm[] = [
@@ -271,7 +275,10 @@ export default class PalettesController extends Controller {
                 insertIndex--;
               }
 
-              targetColorOrder.removeObject(colorToRemove);
+              targetColorOrder.splice(
+                targetColorOrder.indexOf(colorToRemove),
+                1,
+              );
             }
 
             t.removeFromRelatedRecords(targetPalette, 'colors', existingColor);