From dc952750864ec90357cdd3c3c0157a17ab32dd7a Mon Sep 17 00:00:00 2001
From: Matthew Cardarelli <solutions@matthewcardarelli.com>
Date: Tue, 6 Aug 2024 17:49:02 -0700
Subject: [PATCH] Fix issue with item name generation

---
 package.json                                  |  6 +++---
 .../AnimatedListDemo.tsx                      | 19 ++++++++++++-------
 index.tsx => src/index.tsx                    |  0
 .../useAnimatedListItems.ts                   |  0
 tsconfig.json                                 |  8 +++++++-
 5 files changed, 22 insertions(+), 11 deletions(-)
 rename AnimatedListDemo.tsx => src/AnimatedListDemo.tsx (89%)
 rename index.tsx => src/index.tsx (100%)
 rename useAnimatedListItems.ts => src/useAnimatedListItems.ts (100%)

diff --git a/package.json b/package.json
index 75152a9..c3a567e 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,10 @@
   "name": "demo-react-animated-list",
   "version": "1.0.0",
   "description": "A demo of an implementation of an animated list in React Typescript.",
-  "main": "index.tsx",
+  "main": "src/index.tsx",
   "scripts": {
-    "build": "esbuild index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js",
-    "dev": "esbuild index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public",
+    "build": "esbuild ./src/index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js",
+    "dev": "esbuild ./src/index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
diff --git a/AnimatedListDemo.tsx b/src/AnimatedListDemo.tsx
similarity index 89%
rename from AnimatedListDemo.tsx
rename to src/AnimatedListDemo.tsx
index c9466dc..00101e8 100644
--- a/AnimatedListDemo.tsx
+++ b/src/AnimatedListDemo.tsx
@@ -3,6 +3,16 @@ import { useAnimatedListItems } from './useAnimatedListItems';
 
 type Mutation = 'reverse' | 'randomize' | 'insert' | 'remove';
 
+function getRandomChar(): string {
+  return String.fromCharCode(98 + Math.floor(Math.random() * 25));
+}
+function getRandomItemName(): string {
+  return `Serial Number - ${new Array(16)
+    .fill('')
+    .map(() => getRandomChar())
+    .join('')}`;
+}
+
 /**
  * Randomizer function shamelessly copied unmodified from https://stackoverflow.com/a/12646864
  *
@@ -21,7 +31,7 @@ function shuffleArray(array) {
 
 function insertRandomlyIntoArray(array: string[]): string[] {
   const insertBefore = Math.floor(Math.random() * (array.length + 1));
-  const newItem = `Serial Number ${crypto.randomUUID()}`;
+  const newItem = getRandomItemName();
   if (insertBefore === 0) {
     return [newItem, ...array];
   }
@@ -65,12 +75,7 @@ export const AnimatedListDemo = () => {
       }
       return newState;
     },
-    [
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-    ],
+    new Array(4).fill('').map(() => getRandomItemName()),
   );
 
   const { updateItemRef, updateItemPositions, itemStyles } =
diff --git a/index.tsx b/src/index.tsx
similarity index 100%
rename from index.tsx
rename to src/index.tsx
diff --git a/useAnimatedListItems.ts b/src/useAnimatedListItems.ts
similarity index 100%
rename from useAnimatedListItems.ts
rename to src/useAnimatedListItems.ts
diff --git a/tsconfig.json b/tsconfig.json
index a601514..00f9571 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,5 +8,11 @@
     "noEmit": true,
     "alwaysStrict": true
   },
-  "include": ["*.ts", "*.tsx"]
+  "include": [
+    "*.ts",
+    "*.tsx",
+    "src/index.tsx",
+    "src/AnimatedListDemo.tsx",
+    "src/useAnimatedListItems.ts"
+  ]
 }