Compare since previous compare PR

.github/workflows/ci.yml

@@ -0,0 +1,52 @@
+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

.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

package.json

@@ -25,7 +25,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src/**/*.ts*",
+    "fix": "npm run lint -- --fix",
+    "check-types": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": [

src/App.test.tsx

@@ -1,9 +1,16 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import * as testData from './sampleData'
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
+  render(
+    <App 
+    sectionData={testData.sectionData}
+    chordProgression={testData.currentChordProgression}
+    files={testData.files}
+    comments={testData.comments}
+    />
+  );
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

src/App.tsx

@@ -1,48 +1,36 @@
 import './App.css';
-import './SectionView.css';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';
+import './css_reset.css'
+import './section_view.css';
+import * as types from './types';
+import { Files } from './Files';
+import { ChordProgression } from './ChordProgression';
+import { Comments } from './Comments';
+import { CreateComment } from './CreateComment';
+import { SectionTitle } from './SectionTitle';
+import { useState } from 'react';
+
+
+
+
+type AppProps = {
+  sectionData: types.SectionData,
+  chordProgression: types.ChordProgression,
+  files: types.File[],
+  comments: types.Comment[]
+}
+
+const App:React.FC<AppProps> = ({sectionData, chordProgression, comments, files}) => {
+
+  const [commentsAsState, setCommentsAsState] = useState<types.Comment[]>(comments)
+
 
-function App() {
   return (
-    <div className="parent">
-      <div className="section-title">
-        <div className='text'>
-          <h1> Intro </h1>
-          <p>This intro section consists of a tuba quartet in the style of DJ Templeton & The Windsurfers</p>
-        </div>
-        <div className='buttons'>
-          <button> 42 revisions </button>
-          <button> save revision </button>
-        </div>
-      </div>
-      <div className="chords">
-        <ol>
-          <li>C</li>
-          <li>Dm</li>
-          <li>F</li>
-          <li>G</li>
-        </ol>
-      </div>
-      <div className="files">
-        <span>+ Files</span>
-          <div>Bass.mp3 <br></br> <br></br> 2 Comments</div>
-          <div>Drums.mp3 <br></br> <br></br> 2 Comments</div>
-          <div>Yodeling.mp3 <br></br> <br></br> 2 Comments  </div>
-          <div>Tuba.mp3 <br></br> <br></br> 2 Comments  </div>
-      </div>
-      <div className="comments">
-        <span>3 Comments</span>
-        <div className="display-comments">
-        <p><FontAwesomeIcon icon={faFaceSmile} /> Jerry: My name is Schmoopie and I love this song. It reminds me of my grandpa</p>
-        <p><FontAwesomeIcon icon={faFaceSmile} /> Larry: jokes on you! Im deaf.</p>
-        <p><FontAwesomeIcon icon={faFaceSmile} /> Terry: Notice the tinnitus ringing in your ears, let the hiss from your damaged hearing remind you of peaceful ocean waves...</p>
-        </div>
-      </div>
-      <div className="submit">
-      <textarea placeholder="make a comment"></textarea>
-      <button>Submit</button>
-      </div>
+    <div className="root">
+      <SectionTitle sectionData={sectionData} />
+      <ChordProgression chordProgression={chordProgression}  />
+      <Files files={files}/>
+      <Comments comments={commentsAsState} setComments={setCommentsAsState}/>
+      <CreateComment comments={commentsAsState} setComments={setCommentsAsState}/>
     </div>
   );
 }

src/ChordProgression.tsx

@@ -0,0 +1,16 @@
+import * as types from './types';
+
+type ChordProgressionProps = {
+  chordProgression: types.ChordProgression
+}
+
+
+export const ChordProgression: React.FC<ChordProgressionProps> = ({ chordProgression }) => {
+  return (
+    <div className="chords">
+      <ol>
+        {chordProgression.map((chord, index) => <li>{chord}</li>)}
+      </ol>
+    </div>
+  );
+};

src/Comments.tsx

@@ -0,0 +1,33 @@
+import * as types from './types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';
+import {comments as initialComments}  from './sampleData'
+import { useEffect} from 'react';
+
+
+export const Comments: React.FC<types.commentsProps> = ({ comments = initialComments, setComments }) => {
+
+  useEffect(() => {
+    // Attempt to load comments from localStorage
+    const storedCommentsJSON = localStorage.getItem('comments');
+    const storedComments = storedCommentsJSON ? JSON.parse(storedCommentsJSON) : null;
+
+    // Check if there are stored comments, otherwise use initial comments
+    setComments(storedComments || initialComments);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+
+  return (
+    <div className="comments">
+      <span>{comments.length} Comments</span>
+      <div className="display-comments">
+        {comments.map((comment, index) => {
+          return <>
+            <p><FontAwesomeIcon icon={faFaceSmile} /> {comments[index].name}: {comments[index].commentText}</p>
+          </>;
+        })}
+      </div>
+    </div>
+  );
+};

src/CreateComment.tsx

@@ -0,0 +1,59 @@
+
+import {Comment} from './types';
+import {useState} from 'react';
+
+
+type CreateCommentProps = {
+  comments: Comment[],
+  setComments: (comments: Comment[]) => void;
+}
+
+
+
+export const CreateComment: React.FC<CreateCommentProps> = ({ comments, setComments }) => {
+
+  const [name, setName] = useState('');
+  const [commentText, setCommentText] = useState('');
+
+  const handleAddComment = () => {
+    const newComment = { name, commentText };
+
+    // Fetch existing comments from localStorage
+    const storedComments = localStorage.getItem('comments');
+    const existingComments = storedComments ? JSON.parse(storedComments) : [];
+
+    // Add the new comment to the array
+    const updatedComments = [...existingComments, newComment];
+
+    // Save the updated array back to localStorage
+    localStorage.setItem('comments', JSON.stringify(updatedComments));
+
+    // Update the local state to reflect the new list of comments
+    setComments(updatedComments);
+  }
+
+
+  return (
+    <div>
+      <form onSubmit={(e) => {
+        e.preventDefault();
+        handleAddComment();
+        setCommentText('');
+      }}>
+        <input 
+          type='text'
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder='Enter your name'
+        />
+        <input 
+          type='text'
+          value={commentText}
+          onChange={(e) => setCommentText(e.target.value)}
+          placeholder='Type your thoughts here'
+        />
+        <button type='submit'>Add Comment</button>
+      </form>
+    </div>
+  );
+};

src/Files.tsx

@@ -0,0 +1,20 @@
+import * as types from './types';
+
+type FilesProps = {
+  files: types.File[]
+}
+
+export const Files: React.FC<FilesProps> = ({ files }) => {
+  return (
+    <div className="files">
+      <span>+ Files</span>
+      {files.map((file) => (
+        <div id={file.id}>
+        {file.title}
+        <br></br> <br></br>
+        {file.numComments + ' '}
+        Comments
+      </div>))}
+    </div>
+  );
+};

src/SectionTitle.tsx

@@ -0,0 +1,51 @@
+import * as types from './types';
+import React, { useState, FormEvent } from 'react'
+
+
+
+
+type SectionDataProps = {
+  sectionData: types.SectionData,
+}
+
+export const SectionTitle: React.FC<SectionDataProps> = ({ sectionData }) => {
+  const [showForm, setShowForm] = useState(false);    //shows the form for when you're entering a new title
+  const [currentTitle, setCurrentTitle] = useState(sectionData.name);
+
+  let handleToggleForm = () => {
+      console.log('button clicked');
+      setShowForm(!showForm);
+  };
+
+  // Handle form submission with FormData for TypeScript
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      const formData = new FormData(event.currentTarget); // Using event.currentTarget to reference the form
+      const newName = formData.get('newName') as string; 
+      setCurrentTitle(newName); 
+      setShowForm(false);
+  };
+
+  return (
+      <div className="section-title">
+          <div className='text'>
+              <h1>{currentTitle}</h1>
+              <p>{sectionData.description}</p>
+              <button onClick={handleToggleForm}>
+                  {showForm ? 'Cancel Editing' : 'Rename Section'}
+              </button>
+          </div>
+          {showForm && (
+              <form onSubmit={handleSubmit}>
+                  <label htmlFor="newName">New Name:</label>
+                  <input id="newName" name="newName" type="text" placeholder="Enter new section name" />
+                  <button type="submit">Update Name</button>
+              </form>
+          )}
+          <div className='revisions'>
+              <button>{sectionData.numRevisions} revisions</button>
+              <button>Save revision</button>
+          </div>
+      </div>
+  );
+};