Compare since previous compare PR

src/App.test.tsx

@@ -1,9 +1,16 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import * as testData from './testData'
 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,122 +1,27 @@
 import './App.css';
 import './css_reset.css'
 import './section_view.css';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';
+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';
 
-function App() {
 
 
+const App:React.FC<Types.appProps> = ({sectionData, chordProgression, comments, files}) => {
 
-  const sectionData = {
-    name: 'Intro',
-    description: 'This intro section consists of a tuba quartet in the style of DJ Templeton & The Windsurfers',
-    numRevisions: 42,
-  };
-
-  const currentChordProgression = ['C', 'Dm', 'F', 'G']
-
-  const files = [
-    {
-      title: 'Bass.mp3',
-      numComments: 2,
-    },
-    {
-      title: 'Drums.mp3',
-      numComments: 2,
-    },
-    {
-      title: 'Yodeling.mp3',
-      numComments: 2,
-    },
-    {
-      title: 'Tuba.mp3',
-      numComments: 2,
-    },
-  ]
-
-
-  const comments = [
-    {
-      name: 'Jerry',
-      commentText: 'My name is Schmoopie and I love this song. It reminds me of my grandpa'
-    },
-    {
-      name: 'Lerry',
-      commentText: 'jokes on you! Im deaf.'
-    },
-    {
-      name: 'Jerry',
-      commentText: 'Notice the tinnitus ringing in your ears, let the hiss from your damaged hearing remind you of peaceful ocean waves...'
-    },
-  ]
-
-
-  // Components
-
-  function Files() {
-    return <div className="files">
-      <span>+ Files</span>
-      {files.map((file) =>
-        <div>
-          {file.title}
-          <br></br> <br></br>
-          {file.numComments + ' '}
-          Comments
-        </div>)}
-    </div>
-  }
-
-
-  function ChordProgression() {
-    return <div className="chords">
-      <ol>
-        {currentChordProgression.map((chord, index) => <li>{chord}</li>)}
-      </ol>
-    </div>
-  }
-
-
-  function Comments() {
-    return <div className="comments">
-      <span>3 Comments</span>
-      <div className="display-comments">
-        {comments.map((comment, index) => {
-          return <>
-            <p><FontAwesomeIcon icon={faFaceSmile} /> {comments[index].name}: {comments[index].commentText}</p>
-          </>
-        })}
-      </div>
-    </div>
-  }
-
-  function Submit() {
-    return <div className="submit">
-      <textarea placeholder="make a comment"></textarea>
-      <button>Submit</button>
-    </div>
-  }
-
-  function SectionTitle() {
-    return <div className="section-title">
-      <div className='text'>
-        <h1> {sectionData.name} </h1>
-        <p>{sectionData.description}</p>
-      </div>
-      <div className='buttons'>
-        <button> {sectionData.numRevisions} revisions </button>
-        <button> Save revision </button>
-      </div>
-    </div>
-  }
+  const [commentsAsState, setCommentsAsState] = useState<Types.comment[]>(comments)
 
   return (
     <div className="root">
-      <SectionTitle />
-      <ChordProgression />
-      <Files />
-      <Comments />
-      <Submit />
+      <SectionTitle sectionData={sectionData} />
+      <ChordProgression chordProgression={chordProgression}  />
+      <Files files={files}/>
+      <Comments comments={commentsAsState}/>
+      <CreateComment comments={commentsAsState} setComments={setCommentsAsState}/>
     </div>
   );
 }

src/ChordProgression.tsx

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

src/Comments.tsx

@@ -0,0 +1,30 @@
+import * as Types from './types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';
+import {useState} from 'react'
+import {comments as initialComments}  from './testData'
+import { comment } from './types';
+
+export const Comments: React.FC<Types.commentsProps> = ({ comments }) => {
+  return (
+    <div className="comments">
+      <span>3 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,21 @@
+import {useState} from 'react'
+import {comments as initialComments}  from './testData'
+import { CreateCommentProps, comment, commentsProps } from './types';
+
+export const CreateComment:React.FC<CreateCommentProps> = ({comments, setComments}) => {
+ // const [comments, setComment] = useState(initialComments)
+
+  const handleAddComment = (newComment:comment) => {
+    setComments(
+      comments => [...comments, newComment]
+    )
+  }
+
+  return (
+    <div>
+      <button onClick={() => handleAddComment({name: "New User", commentText: "This is a new comment."})}>
+        Add Comment
+      </button>
+    </div>
+  );
+};

src/Files.tsx

@@ -0,0 +1,15 @@
+import * as Types from './types';
+
+export const Files: React.FC<Types.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,16 @@
+import * as Types from './types';
+
+export const SectionTitle: React.FC<Types.sectionDataProps> = ({ sectionData }) => {
+  return (
+    <div className="section-title">
+      <div className='text'>
+        <h1> {sectionData.name} </h1>
+        <p>{sectionData.description}</p>
+      </div>
+      <div className='buttons'>
+        <button> {sectionData.numRevisions} revisions </button>
+        <button> Save revision </button>
+      </div>
+    </div>
+  );
+};

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import * as testData from './testData'
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
@@ -9,7 +10,12 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <App 
+    sectionData={testData.sectionData}
+    chordProgression={testData.currentChordProgression}
+    files={testData.files}
+    comments={testData.comments}
+    />
   </React.StrictMode>
 );
 

src/testData.ts

@@ -0,0 +1,49 @@
+
+import * as Types from './types'
+
+export const sectionData: Types.sectionData = {
+  name: 'Intro',
+  description: 'This intro section consists of a tuba quartet in the style of DJ Templeton & The Windsurfers',
+  numRevisions: 42,
+};
+
+export const currentChordProgression: Types.chordProgression = ['C', 'Dm', 'F', 'G']
+
+export const files: Types.file[] = [
+  {
+    title: 'Bass.mp3',
+    numComments: 2,
+    id: 'change me to something better 0 '
+  },
+  {
+    title: 'Drums.mp3',
+    numComments: 2,
+    id: 'change me to something better 1'
+  },
+  {
+    title: 'Yodeling.mp3',
+    numComments: 2,
+    id: 'change me to something better 2'
+  },
+  {
+    title: 'Tuba.mp3',
+    numComments: 2,
+    id: 'change me to something better 3'
+  },
+]
+
+
+export const comments: Types.comment[] = [
+  {
+    name: 'Jerry',
+    commentText: 'My name is Schmoopie and I love this song. It reminds me of my grandpa'
+  },
+  {
+    name: 'Lerry',
+    commentText: 'jokes on you! Im deaf.'
+  },
+  {
+    name: 'Jerry',
+    commentText: 'Notice the tinnitus ringing in your ears, let the hiss from your damaged hearing remind you of peaceful ocean waves...'
+  },
+]

src/types.ts

@@ -0,0 +1,57 @@
+
+import React, { Dispatch } from "react"
+
+export type sectionData = {
+    name: string,
+    description: string,
+    numRevisions: number
+}
+
+export type sectionDataProps = {
+    sectionData: sectionData
+}
+
+
+
+export type chordProgression = string[]
+
+export type chordProgressionProps = {
+    chordProgression: chordProgression
+}
+
+
+
+export type file = {
+    title: string,
+    numComments: number,
+    id: string,
+}
+
+export type filesProps = {
+    files: file[]
+}
+
+
+export type comment = {
+    name: string,
+    commentText: string
+}
+
+export type commentsProps = {
+    comments: comment[]
+}
+
+
+
+export type CreateCommentProps = {
+    comments: comment[],
+    setComments: React.Dispatch<(comments: comment[]) => comment[]>
+}
+
+
+export type appProps = {
+    sectionData: sectionData,
+    chordProgression: chordProgression,
+    files: file[],
+    comments: comment[]
+}