Switch to parcel and move component files to new components folder

.gitignore

@@ -23,3 +23,5 @@ yarn-debug.log*
 yarn-error.log*
 
 _ignore
+
+.parcel-cache

jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    "\\.(css)$": "identity-obj-proxy",
+    "@/(.*)": "<rootDir>/src/$1"
+  }
+};

package.json

@@ -2,46 +2,43 @@
   "name": "section-view",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "start": "parcel src/index.html --dist-dir build",
+    "build": "parcel build src/index.html --dist-dir build",
+    "test": "jest",
+    "test:ci": "jest --watchAll=false",
+    "lint": "eslint src/**/*.ts src/**/*.tsx",
+    "fix": "npm run lint -- --fix",
+    "check-types": "tsc --noEmit",
+    "ci": "npm run lint && npm run check-types && npm run test:ci && npm run build"
+  },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.5"
+  },
+  "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.94",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.24",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "test:ci": "react-scripts test --watchAll=false",
-    "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.ts*",
-    "fix": "npm run lint -- --fix",
-    "check-types": "tsc --noEmit",
-    "ci": "npm run lint && npm run check-types && npm run test:ci && npm run build"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "eslint": "^8.44.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "parcel": "^2.12.0",
+    "ts-jest": "^29.1.5"
   }
 }

src/App.test.tsx

@@ -1,14 +1,14 @@
 import {render, screen, waitFor} from '@testing-library/react';
 import App from './App';
 import {IClient} from './client/IClient';
-import {ProjectData, CommentData, SectionData, EntityType, FileData} from './types';
+import {ProjectData, CommentData, SectionData, EntityType, FileData} from './types/music_sniper_types';
 import {LocalStorageStore, StoreData} from './store/LocalStorageStore';
 import {MockLocalStorageDependency} from './store/MockLocalStorageDependency';
 import {LocalStorageClient} from './client/LocalStorageClient';
 
 // import * as testData from './sampleData'
 
-window.alert = () => {};
+globalThis.alert = () => {};
 
 const makeTestStore = (): StoreData => {
     const initialProjects: ProjectData[] = [

src/App.tsx

@@ -4,9 +4,9 @@ import './App.css';
 import './css_reset.css'
 import './index.css'
 import './section_view.css';
-import * as types from './types';
+import * as types from './types/music_sniper_types';
 import {GlobalStoreProvider} from './hooks/useGlobalStore';
-import SectionPage from './SectionPage';
+import SectionPage from './components/SectionPage';
 import {IClient} from './client/IClient';
 import {ClientProvider} from './hooks/useClient';
 import {useMount} from './hooks/useMount';

src/actions/useActions.ts

@@ -1,6 +1,6 @@
 import {useClient} from '../hooks/useClient';
 import {useGlobalStore} from '../hooks/useGlobalStore';
-import {CommentData, EntityPointer, SectionData} from '../types';
+import {CommentData, EntityPointer, SectionData} from '../types/music_sniper_types';
 
 type UseActionsHookValue = {
     addCommentToEntity(text: string, username: string, entityPointer: EntityPointer): Promise<CommentData>;
@@ -11,7 +11,6 @@ export const useActions = (): UseActionsHookValue => {
     const globalStore = useGlobalStore();
     const client = useClient();
 
-    // TODO: this should be retrieved from globalState
     // const projectId = globalStore.getCurrentProjectId()
     const projectId = 'project-1';
 
@@ -41,4 +40,4 @@ export const useActions = (): UseActionsHookValue => {
         addCommentToEntity,
         updateSection,
     };
-}
+};

src/client/IClient.ts

@@ -1,4 +1,4 @@
-import {CommentData, FullProjectData, SectionData} from '../types';
+import {CommentData, FullProjectData, SectionData} from '../types/music_sniper_types';
 
 export interface IClient {
     fetchFullDataForProject: (projectId: string) => Promise<FullProjectData | Error>;

src/client/LocalStorageClient.ts

@@ -1,5 +1,6 @@
 import {LocalStorageStore} from '../store/LocalStorageStore';
-import {CommentData, FullProjectData, SectionData} from '../types';
+import {CommentData, FullProjectData, SectionData} from '../types/music_sniper_types';
+
 import {IClient} from './IClient';
 
 export class LocalStorageClient implements IClient {
@@ -20,15 +21,15 @@ export class LocalStorageClient implements IClient {
         this.persistentStore.setAllComments(newState);
 
         return newComment;
-    }
+    };
 
     // fetchFullDataForProject uses the local storage store to get all data for a given project
     // it fetches the project data, sections, files, and comments for the given project
     fetchFullDataForProject = async (projectId: string): Promise<FullProjectData | Error> => {
-        const projects = (await this.persistentStore.getAllProjects()).filter(p => p.id === projectId);
-        const sections = (await this.persistentStore.getAllSections()).filter(s => s.projectId === projectId);
-        const files = (await this.persistentStore.getAllFiles()).filter(f => f.projectId === projectId);
-        const comments = (await this.persistentStore.getAllComments()).filter(c => c.projectId === projectId);
+        const projects = (await this.persistentStore.getAllProjects()).filter((p) => p.id === projectId);
+        const sections = (await this.persistentStore.getAllSections()).filter((s) => s.projectId === projectId);
+        const files = (await this.persistentStore.getAllFiles()).filter((f) => f.projectId === projectId);
+        const comments = (await this.persistentStore.getAllComments()).filter((c) => c.projectId === projectId);
 
         if (!projects[0]) {
             return new Error(`Error: No project found for projectId ${projectId}`);
@@ -40,11 +41,11 @@ export class LocalStorageClient implements IClient {
             files,
             sections,
         };
-    }
+    };
 
     updateSection = async (sectionId: string, section: SectionData): Promise<SectionData> => {
         const sections = await this.persistentStore.getAllSections();
-        const newState = sections.map(s => {
+        const newState = sections.map((s) => {
             if (s.id === sectionId) {
                 return section;
             }
@@ -55,5 +56,5 @@ export class LocalStorageClient implements IClient {
         this.persistentStore.setAllSections(newState);
 
         return section;
-    }
+    };
 }

src/components/ChordProgression.tsx

@@ -0,0 +1,18 @@
+import * as types from '@/types/music_sniper_types';
+
+type ChordProgressionProps = {
+    chordProgression: types.ChordProgression;
+}
+
+export const ChordProgression = ({chordProgression}: ChordProgressionProps) => {
+    return (
+        <div className='chords'>
+            <ol>
+                {chordProgression.map((chord, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <li key={index}>{chord}</li>
+                ))}
+            </ol>
+        </div>
+    );
+};

src/Comments.tsx → src/components/Comments.tsx

@@ -1,28 +1,28 @@
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faFaceSmile} from '@fortawesome/free-solid-svg-icons';
 
-import {EntityPointer} from './types';
-import {useGlobalStore} from './hooks/useGlobalStore';
-import {plural} from './utils';
+import {EntityPointer} from '@/types/music_sniper_types';
+import {useGlobalStore} from '@/hooks/useGlobalStore';
+import {plural} from '@/utils';
 
 type CommentsProps = {
     entityPointer: EntityPointer;
 }
 
-export const Comments: React.FC<CommentsProps> = ({entityPointer}) => {
+export const Comments = ({entityPointer}: CommentsProps) => {
     const globalStore = useGlobalStore();
     const comments = globalStore.getCommentsForEntity(entityPointer);
 
     return (
-        <div className="comments">
+        <div className='comments'>
             <span>{comments.length} {plural('Comment', comments.length)}</span>
-            <div className="display-comments">
-                {comments.map(comment => (
+            <div className='display-comments'>
+                {comments.map((comment) => (
                     <p
                         key={comment.id}
                         id={comment.id}
                     >
-                        <FontAwesomeIcon icon={faFaceSmile} />
+                        <FontAwesomeIcon icon={faFaceSmile}/>
                         {comment.username}: {comment.message}
                     </p>
                 ))}

src/CreateComment.tsx → src/components/CreateComment.tsx

@@ -1,13 +1,13 @@
-
-import {useActions} from './actions/useActions';
-import {EntityPointer} from './types';
 import {useState} from 'react';
 
+import {useActions} from '@/actions/useActions';
+import {EntityPointer} from '@/types/music_sniper_types';
+
 type CreateCommentProps = {
     entityPointer: EntityPointer;
 }
 
-export const CreateComment: React.FC<CreateCommentProps> = ({entityPointer}) => {
+export const CreateComment = ({entityPointer}: CreateCommentProps) => {
     const actions = useActions();
 
     const [name, setName] = useState('');
@@ -18,7 +18,7 @@ export const CreateComment: React.FC<CreateCommentProps> = ({entityPointer}) =>
 
         await actions.addCommentToEntity(commentText, name, entityPointer);
         setCommentText('');
-    }
+    };
 
     return (
         <div>
@@ -37,7 +37,7 @@ export const CreateComment: React.FC<CreateCommentProps> = ({entityPointer}) =>
                 />
                 <button
                     type='submit'
-                    disabled={!Boolean(name && commentText)}
+                    disabled={!(name && commentText)}
                 >
                     Add Comment
                 </button>