Merge branch 'main' into mui-testing

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "rules": {
+        "testing-library/no-container": "off",
+        "testing-library/no-node-access": "off"
+    }
+  }

.github/workflows/ci.yml

@@ -0,0 +1,66 @@
+name: CI
+
+on:
+    push:
+        branches:
+            - main
+    pull_request:
+        branches:
+            - '**'
+    workflow_dispatch:
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 21
+                  cache: 'npm'
+            - name: Install modules
+              run: npm i
+            - name: Build app
+              run: npm run build
+    types:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 21
+                  cache: 'npm'
+            - name: Install modules
+              run: npm i
+            - name: Check Types
+              run: npm run check-types
+
+    lint:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 21
+                  cache: 'npm'
+            - name: Install modules
+              run: npm i
+            - name: Run eslint
+              run: npm run lint
+
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 21
+                  cache: 'npm'
+            - name: Install modules
+              run: npm i
+            - name: Run tests
+              run: npm run test:ci

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+_ignore

.gitpod.yml

@@ -0,0 +1,3 @@
+tasks:
+  - init: npm install && npm run build
+    command: npm run start

README.md

@@ -1,3 +1,19 @@
-# This branch is for reworking the project to use MUI component Library
+## Section-View: a new tool for musical composition
 
-Currently Files.tsx has been reworked
+
+
+### Section view is a collaborative pre-DAW music application
+
+## Tech Used: ![JAVASCRIPT BADGE](https://img.shields.io/static/v1?label=|&message=JAVASCRIPT&color=3c7f5d&style=plastic&logo=javascript) ![React Badge](https://img.shields.io/static/v1?label=|&message=REACT&color=61DAFB&style=plastic&logo=react)![TypeScript Badge](https://img.shields.io/static/v1?label=|&message=TypeScript&color=3178C6&style=plastic&logo=typescript)
+
+
+
+
+
+## Optimizations
+
+This project is constantly improving and growing. We're working on extending the scope of the project as you read this
+
+## Lessons Learned:
+
+Learned quite a bit about managing complexity and writing scalable and maintainable code

package.json

@@ -29,13 +29,12 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "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": [

src/App.test.tsx

@@ -1,16 +1,201 @@
-import { render, screen } from '@testing-library/react';
-import * as testData from './sampleData'
+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 {LocalStorageStore, StoreData} from './store/LocalStorageStore';
+import {MockLocalStorageDependency} from './store/MockLocalStorageDependency';
+import {LocalStorageClient} from './client/LocalStorageClient';
 
-test('renders learn react link', () => {
-  render(
-    <App 
-    sectionData={testData.sectionData}
-    chordProgression={testData.currentChordProgression}
-    files={testData.files}
-    comments={testData.comments}
-    />
-  );
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+// import * as testData from './sampleData'
+
+window.alert = () => {};
+
+const makeTestStore = (): StoreData => {
+    const initialProjects: ProjectData[] = [
+        {
+            id: 'project-1',
+        },
+        {
+            id: 'project-2',
+        },
+    ];
+
+    const initialSections: SectionData[] = [
+        {
+            id: 'section-1',
+            projectId: 'project-1',
+            chordProgression: ['C', 'Dm', 'F', 'G'],
+            description: 'This is the intro',
+            title: 'Intro',
+            numRevisions: 3,
+        }
+    ];
+
+    const initialFiles: FileData[] = [
+        {
+            id: 'file-1',
+            projectId: 'project-1',
+            entityId: 'section-1',
+            entityType: EntityType.SECTION,
+            title: 'Bass.mp3',
+        },
+        {
+            id: 'file-2',
+            projectId: 'project-1',
+            entityId: 'section-1',
+            entityType: EntityType.SECTION,
+            title: 'Chunky Monkey.mp3',
+        },
+    ];
+
+    const initialComments: CommentData[] = [
+        {
+            id: 'comment-1',
+            projectId: 'project-1',
+            message: 'Hey what\'s up',
+            entityType: EntityType.SECTION,
+            entityId: 'section-1',
+            username: 'username-1',
+        },
+        {
+            id: 'comment-2',
+            projectId: 'project-1',
+            message: 'Yeah',
+            entityType: EntityType.FILE,
+            entityId: 'file-1',
+            username: 'username-1',
+        },
+        {
+            id: 'comment-3',
+            projectId: 'project-1',
+            message: 'Yeah 3',
+            entityType: EntityType.FILE,
+            entityId: 'file-1',
+            username: 'username-1',
+        },
+    ];
+
+    return {
+        projects: initialProjects,
+        sections: initialSections,
+        files: initialFiles,
+        comments: initialComments,
+    };
+};
+
+describe('App', () => {
+    let client: IClient;
+
+    beforeEach(() => {
+        const initialStore = makeTestStore();
+
+        const localStorageDependency = new MockLocalStorageDependency(initialStore);
+        const store = new LocalStorageStore(localStorageDependency);
+        client = new LocalStorageClient(store);
+    });
+
+    describe('initializing', () => {
+        it('should show "Loading"', async () => {
+            // this method is made blocking for this specific test
+            client.fetchFullDataForProject = (() => new Promise(r => setTimeout(r)));
+
+            render(
+                <App
+                    projectId={'project-1'}
+                    sectionId={'section-1'}
+                    client={client}
+                />
+            );
+
+            expect(screen.getByText(/Loading/)).toBeDefined();
+        });
+
+        it('should show client error', async () => {
+            client.fetchFullDataForProject = jest.fn().mockResolvedValue(new Error('Some error'));
+
+            render(
+                <App
+                    projectId={'project-1'}
+                    sectionId={'section-1'}
+                    client={client}
+                />
+            );
+
+            await waitFor(() => {
+                expect(screen.queryByText(/Loading/)).toBeNull();
+            });
+
+            expect(screen.getByText(/Some error/)).toBeDefined();
+        });
+    });
+
+    describe('initialized', () => {
+        it('should show the section title and description', async () => {
+            render(
+                <App
+                    projectId={'project-1'}
+                    sectionId={'section-1'}
+                    client={client}
+                />
+            );
+
+            await waitFor(() => {
+                expect(screen.queryByText(/Loading/)).toBeNull();
+            });
+
+            expect(screen.getByText(/Intro/)).toBeDefined();
+            expect(screen.getByText(/This is the intro/)).toBeDefined();
+        });
+
+        it('should show the chord progression', async () => {
+            const {container} = render(
+                <App
+                    projectId={'project-1'}
+                    sectionId={'section-1'}
+                    client={client}
+                />
+            );
+
+            await waitFor(() => {
+                expect(screen.queryByText(/Loading/)).toBeNull();
+            });
+
+            expect(container.querySelector('.chords')?.textContent).toEqual('CDmFG');
+        });
+
+        it('should show files attached to the section', async () => {
+            const {container} = render(
+                <App
+                    projectId={'project-1'}
+                    sectionId={'section-1'}
+                    client={client}
+                />
+            );
+
+            await waitFor(() => {
+                expect(screen.queryByText(/Loading/)).toBeNull();
+            });
+
+            expect(container.querySelector('.files #file-1')?.textContent).toContain('Bass.mp3');
+            expect(container.querySelector('.files #file-1')?.textContent).toContain('2 Comments');
+        });
+
+        it('should show the comments on the section', async () => {
+            const {container} = render(
+                <App
+                    projectId={'project-1'}
+                    sectionId={'section-1'}
+                    client={client}
+                />
+            );
+
+            await waitFor(() => {
+                expect(screen.queryByText(/Loading/)).toBeNull();
+            });
+
+            expect(container.querySelector('.comments')?.textContent).toContain('1 Comment');
+            expect(container.querySelector('.comments #comment-1')?.textContent).toContain('username-1');
+            expect(container.querySelector('.comments #comment-1')?.textContent).toContain('Hey what\'s up');
+        });
+    });
 });