Compare since previous compare PR

src/App.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import * as testData from './testData'
+import * as testData from './sampleData'
 import App from './App';
 
 test('renders learn react link', () => {

src/App.tsx

@@ -1,7 +1,7 @@
 import './App.css';
 import './css_reset.css'
 import './section_view.css';
-import * as Types from './types';
+import * as types from './types';
 import { Files } from './Files';
 import { ChordProgression } from './ChordProgression';
 import { Comments } from './Comments';
@@ -11,16 +11,25 @@ import { useState } from 'react';
 
 
 
-const App:React.FC<Types.appProps> = ({sectionData, chordProgression, comments, files}) => {
 
-  const [commentsAsState, setCommentsAsState] = useState<Types.comment[]>(comments)
+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)
+
 
   return (
     <div className="root">
       <SectionTitle sectionData={sectionData} />
       <ChordProgression chordProgression={chordProgression}  />
       <Files files={files}/>
-      <Comments comments={commentsAsState}/>
+      <Comments comments={commentsAsState} setComments={setCommentsAsState}/>
       <CreateComment comments={commentsAsState} setComments={setCommentsAsState}/>
     </div>
   );

src/ChordProgression.tsx

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

src/Comments.tsx

@@ -1,13 +1,25 @@
-import * as Types from './types';
+import * as types from './types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';
-import {comments as initialComments}  from './testData'
+import {comments as initialComments}  from './sampleData'
+import { useEffect} from 'react';
 
 
-export const Comments: React.FC<Types.commentsProps> = ({ comments = initialComments }) => {
+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);
+  }, []); // Empty dependency array ensures this runs once on mount
+
+
   return (
     <div className="comments">
-      <span>3 Comments</span>
+      <span>{comments.length} Comments</span>
       <div className="display-comments">
         {comments.map((comment, index) => {
           return <>

src/CreateComment.tsx

@@ -1,21 +1,59 @@
 
-import { CreateCommentProps, comment, commentsProps } from './types';
+import {Comment} from './types';
+import {useState} from 'react';
 
-export const CreateComment:React.FC<CreateCommentProps> = ({comments, setComments}) => {
 
+type CreateCommentProps = {
+  comments: Comment[],
+  setComments: (comments: Comment[]) => void;
+}
 
-  const handleAddComment = (newComment:comment) => {
-    let result = [...comments]
-    result.push(newComment)
-    setComments(result)
-    console.log(result)
+
+
+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>
-      <button onClick={() => handleAddComment({name: "New User", commentText: "This is a new comment."})}>
-        Add Comment
-      </button>
+      <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

@@ -1,15 +1,20 @@
-import * as Types from './types';
+import * as types from './types';
 
-export const Files: React.FC<Types.filesProps> = ({ files }) => {
+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}>
+      {files.map((file) => (
+        <div id={file.id}>
         {file.title}
         <br></br> <br></br>
         {file.numComments + ' '}
         Comments
-      </div>)}
+      </div>))}
     </div>
   );
 };

src/SectionTitle.tsx

@@ -1,16 +1,51 @@
-import * as Types from './types';
+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);
+  };
 
-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 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>
-    </div>
   );
 };

src/client.ts

@@ -0,0 +1,10 @@
+
+//To Do for this file:
+
+//1. make all the data exist in localStorage
+
+//1.1 that would be comments, number of comments, chord progression, files, title, and description
+
+//2. type it as asynch even though it's not yet, so it'll be easy to refactor to a backend that isn't localStorage
+
+export default {}

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import * as testData from './testData'
+import * as testData from './sampleData'
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

src/testData.ts → src/sampleData.ts

@@ -1,15 +1,15 @@
 
 import * as Types from './types'
 
-export const sectionData: Types.sectionData = {
+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 currentChordProgression: Types.ChordProgression = ['C', 'Dm', 'F', 'G']
 
-export const files: Types.file[] = [
+export const files: Types.File[] = [
   {
     title: 'Bass.mp3',
     numComments: 2,
@@ -33,17 +33,13 @@ export const files: Types.file[] = [
 ]
 
 
-export const comments: Types.comment[] = [
+export const comments: Types.Comment[] = [
   {
-    name: 'Jerry',
-    commentText: 'My name is Schmoopie and I love this song. It reminds me of my grandpa'
+    name: 'Sample User',
+    commentText: 'Hey! This is a comment'
   },
   {
-    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...'
+    name: 'Sample User',
+    commentText: 'Hey! This is a comment'
   },
 ]

src/section_view.css

@@ -45,7 +45,7 @@ div {
   font-size: 2rem;
 }
 
-.section-title .buttons {
+.section-title .revisions {
 flex-grow: 1;
 display: flex;
   justify-content: center;

src/types.ts

@@ -1,57 +1,29 @@
 
-import React, { Dispatch } from "react"
 
-export type sectionData = {
+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 ChordProgression = string[]
 
 
-
-export type file = {
+export type File = {
     title: string,
     numComments: number,
     id: string,
 }
 
-export type filesProps = {
-    files: file[]
-}
-
 
-export type comment = {
+export type Comment = {
     name: string,
     commentText: string
 }
 
 export type commentsProps = {
-    comments: comment[]
-}
-
-
-
-export type CreateCommentProps = {
-    comments: comment[],
-    setComments: (comments: comment[]) => void;
-}
-
-
-export type appProps = {
-    sectionData: sectionData,
-    chordProgression: chordProgression,
-    files: file[],
-    comments: comment[]
+    comments: Comment[]
+    setComments: (comments: Comment[]) => void;
 }