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,48 +1,27 @@
 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';
+
+
+
+const App:React.FC<Types.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}/>
+      <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/css_reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

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/SectionView.css → src/section_view.css

@@ -1,63 +1,3 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-
-
-
-
-
-
-
-
-/* END OF CSS RESET */
-
-
 
 
 * { 
@@ -67,7 +7,7 @@ table {
 html {font-size: 62.5%;}
 
 
-.parent {
+.root {
   display: flex;
   background-color: rgb(95, 193, 208);
   justify-content: center;

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...'
+  },
+]