From 1143c9317422cc6022401c3d8e1e74f071574c23 Mon Sep 17 00:00:00 2001 From: Michael Kochell <6913320+mickmister@users.noreply.github.com> Date: Sun, 19 May 2024 22:34:11 -0400 Subject: [PATCH 1/6] initial take on refactoring to store and client --- src/App.test.tsx | 11 ++--- src/App.tsx | 33 +++++++------ src/Comments.tsx | 51 ++++++++++----------- src/CreateComment.tsx | 79 +++++++++++++------------------- src/Files.tsx | 31 +++++++------ src/actions/useActions.ts | 35 ++++++++++++++ src/client/IClient.ts | 8 ++++ src/client/LocalStorageClient.ts | 45 ++++++++++++++++++ src/hooks/useClient.tsx | 21 +++++++++ src/hooks/useGlobalStore.tsx | 64 ++++++++++++++++++++++++++ src/index.tsx | 50 ++++++++++++++------ src/sampleData.ts | 45 ------------------ src/store/IStore.ts | 8 ++++ src/store/LocalStorageStore.ts | 64 ++++++++++++++++++++++++++ src/types.ts | 58 ++++++++++++++--------- src/utils.ts | 5 ++ 16 files changed, 418 insertions(+), 190 deletions(-) create mode 100644 src/actions/useActions.ts create mode 100644 src/client/IClient.ts create mode 100644 src/client/LocalStorageClient.ts create mode 100644 src/hooks/useClient.tsx create mode 100644 src/hooks/useGlobalStore.tsx delete mode 100644 src/sampleData.ts create mode 100644 src/store/IStore.ts create mode 100644 src/store/LocalStorageStore.ts create mode 100644 src/utils.ts diff --git a/src/App.test.tsx b/src/App.test.tsx index af186ec..f8bf295 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,14 +1,13 @@ import { render, screen } from '@testing-library/react'; -import * as testData from './sampleData' import App from './App'; +// import * as testData from './sampleData' + test('renders learn react link', () => { render( - ); const linkElement = screen.getByText(/learn react/i); diff --git a/src/App.tsx b/src/App.tsx index e33fe37..e82d2e0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,30 +7,33 @@ import { ChordProgression } from './ChordProgression'; import { Comments } from './Comments'; import { CreateComment } from './CreateComment'; import { SectionTitle } from './SectionTitle'; -import { useState } from 'react'; - - - +import {useGlobalStore} from './hooks/useGlobalStore'; type AppProps = { - sectionData: types.SectionData, - chordProgression: types.ChordProgression, - files: types.File[], - comments: types.Comment[] + projectId: string; + sectionId: string; } -const App:React.FC = ({sectionData, chordProgression, comments, files}) => { +const App: React.FC = ({projectId, sectionId}) => { + const globalStore = useGlobalStore(); + const section = globalStore.getSection(sectionId); + // const comments = globalStore.getCommentsForSection(sectionId); + const files = globalStore.getFilesForSection(sectionId); + + // const [commentsAsState, setCommentsAsState] = useState(comments) - const [commentsAsState, setCommentsAsState] = useState(comments) - + const sectionPointer: types.EntityPointer = { + entityId: sectionId, + entityType: types.EntityType.SECTION, + }; return (
- - + + - - + +
); } diff --git a/src/Comments.tsx b/src/Comments.tsx index 1823f5a..674f236 100644 --- a/src/Comments.tsx +++ b/src/Comments.tsx @@ -1,33 +1,28 @@ -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'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import {faFaceSmile} from '@fortawesome/free-solid-svg-icons'; +import {EntityPointer} from './types'; +import {useGlobalStore} from './hooks/useGlobalStore'; -export const Comments: React.FC = ({ comments = initialComments, setComments }) => { +type CommentsProps = { + entityPointer: EntityPointer; +} - useEffect(() => { - // Attempt to load comments from localStorage - const storedCommentsJSON = localStorage.getItem('comments'); - const storedComments = storedCommentsJSON ? JSON.parse(storedCommentsJSON) : null; +export const Comments: React.FC = ({entityPointer}) => { + const globalStore = useGlobalStore(); + const comments = globalStore.getCommentsForEntity(entityPointer); - // Check if there are stored comments, otherwise use initial comments - setComments(storedComments || initialComments); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - - return ( -
- {comments.length} Comments -
- {comments.map((comment, index) => { - return <> -

{comments[index].name}: {comments[index].commentText}

- ; - })} -
-
- ); + return ( +
+ {comments.length} Comments +
+ {comments.map(comment => ( +

+ + {comment.username}: {comment.message} +

+ ))} +
+
+ ); }; diff --git a/src/CreateComment.tsx b/src/CreateComment.tsx index 49947f9..b101632 100644 --- a/src/CreateComment.tsx +++ b/src/CreateComment.tsx @@ -1,59 +1,44 @@ -import {Comment} from './types'; +import {useActions} from './actions/useActions'; +import {CommentData, EntityPointer} from './types'; import {useState} from 'react'; type CreateCommentProps = { - comments: Comment[], - setComments: (comments: Comment[]) => void; + entityPointer: EntityPointer; } -export const CreateComment: React.FC = ({ 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 ( -
-
{ +export const CreateComment: React.FC = ({entityPointer}) => { + const actions = useActions(); + + // const [name, setName] = useState(''); + const [commentText, setCommentText] = useState(''); + + const handleAddComment = (e: React.FormEvent) => { e.preventDefault(); - handleAddComment(); + actions.addCommentToEntity(commentText, entityPointer); setCommentText(''); - }}> - setName(e.target.value)} - placeholder='Enter your name' - /> - setCommentText(e.target.value)} - placeholder='Type your thoughts here' - /> - - -
- ); + } + + return ( +
+
+ {/* setName(e.target.value)} + placeholder='Enter your name' + /> */} + setCommentText(e.target.value)} + placeholder='Type your thoughts here' + /> + +
+
+ ); }; diff --git a/src/Files.tsx b/src/Files.tsx index d9673d5..c3abc02 100644 --- a/src/Files.tsx +++ b/src/Files.tsx @@ -1,20 +1,23 @@ +import {useGlobalStore} from './hooks/useGlobalStore'; import * as types from './types'; type FilesProps = { - files: types.File[] + files: types.FileData[] } -export const Files: React.FC = ({ files }) => { - return ( -
- + Files - {files.map((file) => ( -
- {file.title} -



- {file.numComments + ' '} - Comments -
))} -
- ); +export const Files: React.FC = ({files}) => { + const globalStore = useGlobalStore(); + + return ( +
+ + Files + {files.map((file) => ( +
+ {file.title} +



+ {globalStore.getCommentsForFile(file.id).length + ' '} + Comments +
))} +
+ ); }; diff --git a/src/actions/useActions.ts b/src/actions/useActions.ts new file mode 100644 index 0000000..958145e --- /dev/null +++ b/src/actions/useActions.ts @@ -0,0 +1,35 @@ +import {useClient} from '../hooks/useClient'; +import {useGlobalStore} from '../hooks/useGlobalStore'; +import {CommentData, EntityPointer} from '../types'; + +type UseActionsHookValue = { + addCommentToEntity(text: string, entityPointer: EntityPointer): Promise; +} + +export const useActions = (): UseActionsHookValue => { + const globalStore = useGlobalStore(); + const client = useClient(); + + // TODO: this should be retrieved from globalState + // const projectId = globalStore.getCurrentProjectId() + const projectId = 'project-1'; + + const addCommentToEntity = async (message: string, entityPointer: EntityPointer) => { + const commentPayload: Omit = { + entityType: entityPointer.entityType, + entityId: entityPointer.entityId, + message, + projectId, + username: 'mickmister', + }; + + const comment = await client.addComment(commentPayload); + globalStore.addComment(comment); + + return comment; + }; + + return { + addCommentToEntity, + }; +} diff --git a/src/client/IClient.ts b/src/client/IClient.ts new file mode 100644 index 0000000..6bee056 --- /dev/null +++ b/src/client/IClient.ts @@ -0,0 +1,8 @@ +import {CommentData, FullProjectData, ProjectData} from '../types'; + +export interface IClient { + fetchFullProjectData: (projectId: string) => Promise; + fetchAllProjects: () => Promise; + + addComment(comment: Omit): Promise; +} diff --git a/src/client/LocalStorageClient.ts b/src/client/LocalStorageClient.ts new file mode 100644 index 0000000..3925d8b --- /dev/null +++ b/src/client/LocalStorageClient.ts @@ -0,0 +1,45 @@ +import {IStore} from '../store/IStore'; +import {CommentData, FullProjectData, ProjectData} from '../types'; +import {IClient} from './IClient'; + +export class LocalStorageClient implements IClient { + private persistentStore: IStore; + + constructor(persistentStore: IStore) { + this.persistentStore = persistentStore; + } + + addComment = async (comment: Omit): Promise => { + const newComment: CommentData = { + ...comment, + id: Math.random().toString().slice(2), + }; + + // TODO: persist to local storage + + return newComment; + } + + fetchFullProjectData = async (projectId: string): Promise => { + const projects = (await this.persistentStore.getAllProjects()).filter(p => p.id === projectId); + const sections = (await this.persistentStore.getAllSections()).filter(s => s.projectId === projectId); + const files = (await this.persistentStore.getAllFiles()).filter(f => f.projectId === projectId); + const comments = (await this.persistentStore.getAllComments()).filter(c => c.projectId === projectId); + + if (!projects[0]) { + return `New project found for projectId ${projectId}`; + } + + return { + project: projects[0], + comments, + files, + sections, + }; + } + + fetchAllProjects = async (): Promise => { + const projects = await this.persistentStore.getAllProjects(); + return projects; + } +} diff --git a/src/hooks/useClient.tsx b/src/hooks/useClient.tsx new file mode 100644 index 0000000..5dc6b4e --- /dev/null +++ b/src/hooks/useClient.tsx @@ -0,0 +1,21 @@ +import {createContext, useContext} from 'react'; +import {IClient} from '../client/IClient'; + +const clientContext = createContext(null); + +type ClientProviderProps = React.PropsWithChildren<{ + client: IClient; +}>; + +export const useClient = (): IClient => { + const client = useContext(clientContext)!; + return client; +}; + +export const ClientProvider = (props: ClientProviderProps) => { + return ( + + {props.children} + + ); +}; diff --git a/src/hooks/useGlobalStore.tsx b/src/hooks/useGlobalStore.tsx new file mode 100644 index 0000000..f6af838 --- /dev/null +++ b/src/hooks/useGlobalStore.tsx @@ -0,0 +1,64 @@ +import {createContext, useCallback, useContext, useMemo, useState} from 'react'; +import {CommentData, EntityPointer, EntityType, FileData, FullProjectData, SectionData} from '../types'; +import {matchesEntityPointer} from '../utils'; + +type GlobalStoreContextValue = { + getFullProjectData(): FullProjectData; + setFullProjectData(project: FullProjectData): void; +} + +const globalStoreContext = createContext(null); + +type GlobalStoreProviderProps = React.PropsWithChildren<{ + initialProjectData: FullProjectData; +}>; + +type UseGlobalStoreHookValue = { + getCommentsForSection(sectionId: string): CommentData[]; + getCommentsForFile(fileId: string): CommentData[]; + getFilesForSection(sectionId: string): FileData[]; + getCommentsForEntity(entityPointer: EntityPointer): CommentData[]; + getSection(sectionId: string): SectionData; + + addComment(comment: CommentData): void; +} + +export const useGlobalStore = (): UseGlobalStoreHookValue => { + const globalStore = useContext(globalStoreContext)!; + const projectData = globalStore.getFullProjectData(); + + return useMemo(() => ({ + getCommentsForFile: (fileId) => projectData.comments.filter(c => matchesEntityPointer(c, EntityType.FILE, fileId)), + getCommentsForSection: (sectionId) => projectData.comments.filter(c => matchesEntityPointer(c, EntityType.SECTION, sectionId)), + getFilesForSection: (sectionId) => projectData.files.filter(f => matchesEntityPointer(f, EntityType.SECTION, sectionId)), + getCommentsForEntity: (entityPointer: EntityPointer) => projectData.comments.filter(c => matchesEntityPointer(c, entityPointer.entityType, entityPointer.entityId)), + + // error-prone how we assume the section exists + getSection: (sectionId) => projectData.sections.find(s => s.id === sectionId)!, + + addComment: (comment) => { + const state = globalStore.getFullProjectData(); + const newState: FullProjectData = { + ...state, + comments: [ + ...state.comments, + comment, + ], + }; + + globalStore.setFullProjectData(newState); + }, + }), [projectData, globalStore]); +}; + +export const GlobalStoreProvider = (props: GlobalStoreProviderProps) => { + const [fullProjectData, setFullProjectData] = useState(props.initialProjectData); + + const getFullProjectData = useCallback(() => fullProjectData, [fullProjectData]); + + return ( + + {props.children} + + ); +}; diff --git a/src/index.tsx b/src/index.tsx index 14bf9ac..3163cd0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,23 +1,45 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import * as testData from './sampleData' import App from './App'; import reportWebVitals from './reportWebVitals'; +import {LocalStorageStore} from './store/LocalStorageStore'; +import {LocalStorageClient} from './client/LocalStorageClient'; +import {ClientProvider} from './hooks/useClient'; +import {GlobalStoreProvider} from './hooks/useGlobalStore'; -const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement -); -root.render( - - - -); +window.addEventListener('load', async () => { + const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ); + + const localStore = new LocalStorageStore(localStorage); + const localClient = new LocalStorageClient(localStore); + + const projectId = 'project-1'; + const sectionId = 'section-1'; + + // this should really be done in a useEffect in App probably + const projectData = await localClient.fetchFullProjectData(projectId); + + if (typeof projectData === 'string') { + alert(projectData); + return; + } + + root.render( + + + + + + + + ); +}); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) diff --git a/src/sampleData.ts b/src/sampleData.ts deleted file mode 100644 index 1a438b8..0000000 --- a/src/sampleData.ts +++ /dev/null @@ -1,45 +0,0 @@ - -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: 'Sample User', - commentText: 'Hey! This is a comment' - }, - { - name: 'Sample User', - commentText: 'Hey! This is a comment' - }, -] diff --git a/src/store/IStore.ts b/src/store/IStore.ts new file mode 100644 index 0000000..c0242b9 --- /dev/null +++ b/src/store/IStore.ts @@ -0,0 +1,8 @@ +import {CommentData, FileData, ProjectData, SectionData} from '../types'; + +export interface IStore { + getAllProjects(): Promise; + getAllSections(): Promise; + getAllFiles(): Promise; + getAllComments(): Promise; +} diff --git a/src/store/LocalStorageStore.ts b/src/store/LocalStorageStore.ts new file mode 100644 index 0000000..a588715 --- /dev/null +++ b/src/store/LocalStorageStore.ts @@ -0,0 +1,64 @@ +import {CommentData, EntityType, FileData, ProjectData, SectionData} from '../types'; +import {IStore} from './IStore'; + +export interface LocalStorageDependency { + getItem(key: string): string | null; + setItem(key: string, value: string): void; +} + +export class LocalStorageStore implements IStore { + private ls: LocalStorageDependency; + + constructor(ls: LocalStorageDependency) { + this.ls = ls; + } + + getAllProjects = async (): Promise => { + return [ + { + id: 'project-1', + }, + { + id: 'project-2', + }, + ]; + }; + + getAllSections = async (): Promise => { + return [ + { + id: 'section-1', + projectId: 'project-1', + chordProgression: ['C', 'Dm', 'F', 'G'], + description: 'This is the intro', + name: 'Intro', + numRevisions: 3, + } + ]; + }; + + getAllFiles = async (): Promise => { + return [ + { + id: 'file-1', + projectId: 'project-1', + entityId: 'section-1', + entityType: EntityType.SECTION, + title: 'Bass.mp3', + }, + ]; + } + + getAllComments = async (): Promise => { + return [ + { + id: 'comment-1', + projectId: 'project-1', + message: '', + entityType: EntityType.SECTION, + entityId: 'section-1', + username: 'username-1', + }, + ]; + }; +} diff --git a/src/types.ts b/src/types.ts index 9be5636..56d0e01 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,29 +1,45 @@ - - -export type SectionData = { - name: string, - description: string, - numRevisions: number +export type ProjectData = { + id: string; } - - -export type ChordProgression = string[] - - -export type File = { - title: string, - numComments: number, - id: string, +export enum EntityType { + PROJECT = 'project', + SECTION = 'section', + FILE = 'file', } +export type EntityPointer = { + entityType: EntityType; + entityId: string; +} -export type Comment = { - name: string, - commentText: string +export type SectionData = { + id: string; + projectId: string; + name: string; + description: string; + numRevisions: number; + chordProgression: ChordProgression; } -export type commentsProps = { - comments: Comment[] - setComments: (comments: Comment[]) => void; +export type ChordProgression = string[] + +export type FileData = { + projectId: string; + id: string; + title: string; +} & EntityPointer; + +export type CommentData = { + projectId: string; + id: string; + username: string; + message: string; +} & EntityPointer; + +export type FullProjectData = { + project: ProjectData; + sections: SectionData[]; + comments: CommentData[]; + files: FileData[]; } diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..5f02588 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,5 @@ +import {EntityPointer, EntityType} from './types'; + +export const matchesEntityPointer = (entityPointer: EntityPointer, entityType: EntityType, entityId: string): boolean => { + return entityPointer.entityType === entityType && entityPointer.entityId === entityId; +} From 860f64c87bbafbdb6a63751e896689f500742084 Mon Sep 17 00:00:00 2001 From: Michael Kochell <6913320+mickmister@users.noreply.github.com> Date: Sun, 19 May 2024 23:02:51 -0400 Subject: [PATCH 2/6] connect section title to store --- package.json | 3 +- src/App.tsx | 49 +++++++------- src/Comments.tsx | 3 +- src/Files.tsx | 21 ++++-- src/SectionTitle.tsx | 109 ++++++++++++++++++------------- src/actions/useActions.ts | 11 +++- src/client/IClient.ts | 3 +- src/client/LocalStorageClient.ts | 6 +- src/hooks/useGlobalStore.tsx | 29 +++++++- src/store/LocalStorageStore.ts | 27 +++++++- src/types.ts | 2 +- src/utils.ts | 8 +++ 12 files changed, 182 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index 6b7bebc..50412b0 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "eject": "react-scripts eject", "lint": "eslint src/**/*.ts*", "fix": "npm run lint -- --fix", - "check-types": "tsc --noEmit" + "check-types": "tsc --noEmit", + "ci": "npm run lint && npm run check-types && npm run build" }, "eslintConfig": { "extends": [ diff --git a/src/App.tsx b/src/App.tsx index e82d2e0..9dcc81d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,40 +2,37 @@ import './App.css'; 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 {Files} from './Files'; +import {ChordProgression} from './ChordProgression'; +import {Comments} from './Comments'; +import {CreateComment} from './CreateComment'; +import {SectionTitle} from './SectionTitle'; import {useGlobalStore} from './hooks/useGlobalStore'; type AppProps = { - projectId: string; - sectionId: string; + projectId: string; + sectionId: string; } const App: React.FC = ({projectId, sectionId}) => { - const globalStore = useGlobalStore(); - const section = globalStore.getSection(sectionId); - // const comments = globalStore.getCommentsForSection(sectionId); - const files = globalStore.getFilesForSection(sectionId); + const globalStore = useGlobalStore(); + const section = globalStore.getSection(sectionId); + const files = globalStore.getFilesForSection(sectionId); - // const [commentsAsState, setCommentsAsState] = useState(comments) + const sectionPointer: types.EntityPointer = { + entityId: sectionId, + entityType: types.EntityType.SECTION, + }; - const sectionPointer: types.EntityPointer = { - entityId: sectionId, - entityType: types.EntityType.SECTION, - }; - - return ( -
- - - - - -
- ); + return ( +
+ + + + + +
+ ); } export default App; diff --git a/src/Comments.tsx b/src/Comments.tsx index 674f236..1d2e95d 100644 --- a/src/Comments.tsx +++ b/src/Comments.tsx @@ -3,6 +3,7 @@ import {faFaceSmile} from '@fortawesome/free-solid-svg-icons'; import {EntityPointer} from './types'; import {useGlobalStore} from './hooks/useGlobalStore'; +import {plural} from './utils'; type CommentsProps = { entityPointer: EntityPointer; @@ -14,7 +15,7 @@ export const Comments: React.FC = ({entityPointer}) => { return (
- {comments.length} Comments + {comments.length} {plural('Comment', comments.length)}
{comments.map(comment => (

diff --git a/src/Files.tsx b/src/Files.tsx index c3abc02..748c5be 100644 --- a/src/Files.tsx +++ b/src/Files.tsx @@ -1,5 +1,6 @@ import {useGlobalStore} from './hooks/useGlobalStore'; import * as types from './types'; +import {plural} from './utils'; type FilesProps = { files: types.FileData[] @@ -11,13 +12,19 @@ export const Files: React.FC = ({files}) => { return (

+ Files - {files.map((file) => ( -
- {file.title} -



- {globalStore.getCommentsForFile(file.id).length + ' '} - Comments -
))} + {files.map((file) => { + const numComments = globalStore.getCommentsForFile(file.id).length; + + return ( +
+ {file.title} +



+ {numComments} + {' '} + {plural('Comment', numComments)} +
+ ); + })}
); }; diff --git a/src/SectionTitle.tsx b/src/SectionTitle.tsx index 588fe6a..b810bff 100644 --- a/src/SectionTitle.tsx +++ b/src/SectionTitle.tsx @@ -1,51 +1,70 @@ -import * as types from './types'; -import React, { useState, FormEvent } from 'react' +import {useActions} from './actions/useActions'; +import {useGlobalStore} from './hooks/useGlobalStore'; +import React, {useState, FormEvent} from 'react'; +import {SectionData} from './types'; +type SectionDataProps = { + sectionId: string; +} +export const SectionTitle: React.FC = ({sectionId}) => { + const actions = useActions(); + const globalStore = useGlobalStore(); + const section = globalStore.getSection(sectionId); -type SectionDataProps = { - sectionData: types.SectionData, -} + const [isEditingTitle, setIsEditingTitle] = useState(false); + const [draftTitle, setDraftTitle] = useState(section.title); + + const handleDraftTitleChange = (e: React.ChangeEvent) => { + setDraftTitle(e.target.value); + }; + + const handleToggleForm = () => { + console.log('button clicked'); + setIsEditingTitle(!isEditingTitle); + }; + + const handleSubmit = (event: FormEvent) => { + event.preventDefault(); + const newTitle = draftTitle; + const newSection: SectionData = { + ...section, + title: newTitle, + } + + actions.updateSection(sectionId, newSection); + // setDraftTitle(newTitle); + setIsEditingTitle(false); + }; -export const SectionTitle: React.FC = ({ 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) => { - 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 ( -
-
-

{currentTitle}

-

{sectionData.description}

- -
- {showForm && ( -
- - - -
- )} -
- - -
-
- ); + return ( +
+
+

{section.title}

+

{section.description}

+ +
+ {isEditingTitle && ( +
+ + + +
+ )} +
+ + +
+
+ ); }; diff --git a/src/actions/useActions.ts b/src/actions/useActions.ts index 958145e..59264eb 100644 --- a/src/actions/useActions.ts +++ b/src/actions/useActions.ts @@ -1,9 +1,10 @@ import {useClient} from '../hooks/useClient'; import {useGlobalStore} from '../hooks/useGlobalStore'; -import {CommentData, EntityPointer} from '../types'; +import {CommentData, EntityPointer, SectionData} from '../types'; type UseActionsHookValue = { addCommentToEntity(text: string, entityPointer: EntityPointer): Promise; + updateSection(sectionId: string, section: SectionData): Promise; } export const useActions = (): UseActionsHookValue => { @@ -29,7 +30,15 @@ export const useActions = (): UseActionsHookValue => { return comment; }; + const updateSection = async (sectionId: string, section: SectionData) => { + const newSection = await client.updateSection(sectionId, section); + globalStore.updateSection(sectionId, newSection); + + return section; + }; + return { addCommentToEntity, + updateSection, }; } diff --git a/src/client/IClient.ts b/src/client/IClient.ts index 6bee056..2302632 100644 --- a/src/client/IClient.ts +++ b/src/client/IClient.ts @@ -1,8 +1,9 @@ -import {CommentData, FullProjectData, ProjectData} from '../types'; +import {CommentData, FullProjectData, ProjectData, SectionData} from '../types'; export interface IClient { fetchFullProjectData: (projectId: string) => Promise; fetchAllProjects: () => Promise; addComment(comment: Omit): Promise; + updateSection(sectionId: string, section: SectionData): Promise; } diff --git a/src/client/LocalStorageClient.ts b/src/client/LocalStorageClient.ts index 3925d8b..4cd19d7 100644 --- a/src/client/LocalStorageClient.ts +++ b/src/client/LocalStorageClient.ts @@ -1,5 +1,5 @@ import {IStore} from '../store/IStore'; -import {CommentData, FullProjectData, ProjectData} from '../types'; +import {CommentData, FullProjectData, ProjectData, SectionData} from '../types'; import {IClient} from './IClient'; export class LocalStorageClient implements IClient { @@ -42,4 +42,8 @@ export class LocalStorageClient implements IClient { const projects = await this.persistentStore.getAllProjects(); return projects; } + + updateSection = async (sectionId: string, section: SectionData): Promise => { + return section; + } } diff --git a/src/hooks/useGlobalStore.tsx b/src/hooks/useGlobalStore.tsx index f6af838..4a2e9a7 100644 --- a/src/hooks/useGlobalStore.tsx +++ b/src/hooks/useGlobalStore.tsx @@ -1,4 +1,4 @@ -import {createContext, useCallback, useContext, useMemo, useState} from 'react'; +import {createContext, useContext, useMemo, useState} from 'react'; import {CommentData, EntityPointer, EntityType, FileData, FullProjectData, SectionData} from '../types'; import {matchesEntityPointer} from '../utils'; @@ -21,6 +21,7 @@ type UseGlobalStoreHookValue = { getSection(sectionId: string): SectionData; addComment(comment: CommentData): void; + updateSection(sectionId: string, section: SectionData): void; } export const useGlobalStore = (): UseGlobalStoreHookValue => { @@ -48,16 +49,38 @@ export const useGlobalStore = (): UseGlobalStoreHookValue => { globalStore.setFullProjectData(newState); }, + + updateSection: (sectionId, updatedSection) => { + const state = globalStore.getFullProjectData(); + + const sections = state.sections.map(existingSection => { + if (existingSection.id === sectionId) { + return updatedSection; + } + + return existingSection; + }); + + const newState: FullProjectData = { + ...state, + sections, + }; + + globalStore.setFullProjectData(newState); + } }), [projectData, globalStore]); }; export const GlobalStoreProvider = (props: GlobalStoreProviderProps) => { const [fullProjectData, setFullProjectData] = useState(props.initialProjectData); - const getFullProjectData = useCallback(() => fullProjectData, [fullProjectData]); + const value = useMemo(() => ({ + getFullProjectData: () => fullProjectData, + setFullProjectData, + }), [fullProjectData, setFullProjectData]); return ( - + {props.children} ); diff --git a/src/store/LocalStorageStore.ts b/src/store/LocalStorageStore.ts index a588715..af27878 100644 --- a/src/store/LocalStorageStore.ts +++ b/src/store/LocalStorageStore.ts @@ -31,7 +31,7 @@ export class LocalStorageStore implements IStore { projectId: 'project-1', chordProgression: ['C', 'Dm', 'F', 'G'], description: 'This is the intro', - name: 'Intro', + title: 'Intro', numRevisions: 3, } ]; @@ -46,6 +46,13 @@ export class LocalStorageStore implements IStore { entityType: EntityType.SECTION, title: 'Bass.mp3', }, + { + id: 'file-2', + projectId: 'project-1', + entityId: 'section-1', + entityType: EntityType.SECTION, + title: 'Chunky Monkey.mp3', + }, ]; } @@ -54,11 +61,27 @@ export class LocalStorageStore implements IStore { { id: 'comment-1', projectId: 'project-1', - message: '', + 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', + }, ]; }; } diff --git a/src/types.ts b/src/types.ts index 56d0e01..d70c88f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -16,7 +16,7 @@ export type EntityPointer = { export type SectionData = { id: string; projectId: string; - name: string; + title: string; description: string; numRevisions: number; chordProgression: ChordProgression; diff --git a/src/utils.ts b/src/utils.ts index 5f02588..a2b81aa 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -3,3 +3,11 @@ import {EntityPointer, EntityType} from './types'; export const matchesEntityPointer = (entityPointer: EntityPointer, entityType: EntityType, entityId: string): boolean => { return entityPointer.entityType === entityType && entityPointer.entityId === entityId; } + +export const plural = (name: string, numItems: number) => { + if (numItems === 1) { + return name; + } + + return name + 's'; +}; From 827f22baf29da5f952fa6214f024ffe0a88ee5ba Mon Sep 17 00:00:00 2001 From: Michael Kochell <6913320+mickmister@users.noreply.github.com> Date: Tue, 21 May 2024 23:22:30 -0400 Subject: [PATCH 3/6] make the app use localStorage --- .eslintrc.json | 10 ++ .github/workflows/ci.yml | 14 ++ package.json | 6 - src/App.test.tsx | 182 +++++++++++++++++++++-- src/App.tsx | 72 ++++++--- src/Comments.tsx | 5 +- src/CreateComment.tsx | 23 +-- src/SectionPage.tsx | 38 +++++ src/client/IClient.ts | 3 +- src/client/LocalStorageClient.ts | 34 +++-- src/hooks/useMount.ts | 9 ++ src/index.tsx | 23 +-- src/logo.svg | 1 - src/store/LocalStorageStore.ts | 243 +++++++++++++++++++++++-------- src/store/MockLocalStorage.ts | 24 +++ {src => tests}/setupTests.ts | 0 16 files changed, 545 insertions(+), 142 deletions(-) create mode 100644 .eslintrc.json create mode 100644 src/SectionPage.tsx create mode 100644 src/hooks/useMount.ts delete mode 100644 src/logo.svg create mode 100644 src/store/MockLocalStorage.ts rename {src => tests}/setupTests.ts (100%) diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..21ae569 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,10 @@ +{ + "extends": [ + "react-app", + "react-app/jest" + ], + "rules": { + "testing-library/no-container": "off", + "testing-library/no-node-access": "off" + } + } diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 8b8f453..f836200 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -50,3 +50,17 @@ jobs: 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 test diff --git a/package.json b/package.json index 50412b0..e319fca 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,6 @@ "check-types": "tsc --noEmit", "ci": "npm run lint && npm run check-types && npm run build" }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, "browserslist": { "production": [ ">0.2%", diff --git a/src/App.test.tsx b/src/App.test.tsx index f8bf295..af01cf3 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,15 +1,177 @@ -import { render, screen } from '@testing-library/react'; +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 {MockLocalStorage} from './store/MockLocalStorage'; +import {LocalStorageClient} from './client/LocalStorageClient'; // import * as testData from './sampleData' -test('renders learn react link', () => { - render( - - ); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); +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 MockLocalStorage(initialStore); + const store = new LocalStorageStore(localStorageDependency); + client = new LocalStorageClient(store); + }); + + it('initializing', () => { + it('show "Loading"', async () => { + render( + + ); + }); + expect(screen.getByText(/Loading/)).toBeDefined(); + }); + + it('initialized', () => { + it('should show the section title and description', async () => { + render( + + ); + + 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( + + ); + + 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( + + ); + + 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( + + ); + + 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'); + }); + }); }); diff --git a/src/App.tsx b/src/App.tsx index 9dcc81d..c662307 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,37 +1,67 @@ +import {useState} from 'react'; + import './App.css'; 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 {useGlobalStore} from './hooks/useGlobalStore'; +import {GlobalStoreProvider} from './hooks/useGlobalStore'; +import SectionPage from './SectionPage'; +import {IClient} from './client/IClient'; +import {ClientProvider} from './hooks/useClient'; +import {useMount} from './hooks/useMount'; type AppProps = { projectId: string; sectionId: string; + + client: IClient; } -const App: React.FC = ({projectId, sectionId}) => { - const globalStore = useGlobalStore(); - const section = globalStore.getSection(sectionId); - const files = globalStore.getFilesForSection(sectionId); +const App: React.FC = ({projectId, sectionId, client}) => { + const [initialProjectData, setInitialProjectData] = useState(null); + const [error, setError] = useState(''); + + useMount(async () => { + const projectDataOrError = await client.fetchFullDataForProject(projectId); + + if (projectDataOrError instanceof Error) { + alert(projectDataOrError.message); + setError(projectDataOrError.message); + return; + } - const sectionPointer: types.EntityPointer = { - entityId: sectionId, - entityType: types.EntityType.SECTION, - }; + setInitialProjectData(projectDataOrError); + }); + + if (error) { + return ( +

+ {error} +

+ ); + } + + if (!initialProjectData) { + return ( +

+ Loading +

+ ); + } + + const pageContent = ( + + ); return ( -
- - - - - -
+ + + {pageContent} + + ); } diff --git a/src/Comments.tsx b/src/Comments.tsx index 1d2e95d..3a3a91a 100644 --- a/src/Comments.tsx +++ b/src/Comments.tsx @@ -18,7 +18,10 @@ export const Comments: React.FC = ({entityPointer}) => { {comments.length} {plural('Comment', comments.length)}
{comments.map(comment => ( -

+

{comment.username}: {comment.message}

diff --git a/src/CreateComment.tsx b/src/CreateComment.tsx index b101632..8b6fc10 100644 --- a/src/CreateComment.tsx +++ b/src/CreateComment.tsx @@ -1,43 +1,46 @@ import {useActions} from './actions/useActions'; -import {CommentData, EntityPointer} from './types'; +import {EntityPointer} from './types'; import {useState} from 'react'; - type CreateCommentProps = { entityPointer: EntityPointer; } - - export const CreateComment: React.FC = ({entityPointer}) => { const actions = useActions(); - // const [name, setName] = useState(''); + const [name, setName] = useState(''); const [commentText, setCommentText] = useState(''); - const handleAddComment = (e: React.FormEvent) => { + const handleAddComment = async (e: React.FormEvent) => { e.preventDefault(); - actions.addCommentToEntity(commentText, entityPointer); + + await actions.addCommentToEntity(commentText, entityPointer); setCommentText(''); } return (
- {/* setName(e.target.value)} placeholder='Enter your name' - /> */} + /> setCommentText(e.target.value)} placeholder='Type your thoughts here' /> - +
); diff --git a/src/SectionPage.tsx b/src/SectionPage.tsx new file mode 100644 index 0000000..2c7ed78 --- /dev/null +++ b/src/SectionPage.tsx @@ -0,0 +1,38 @@ +import './App.css'; +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 {useGlobalStore} from './hooks/useGlobalStore'; + +type SectionPageProps = { + projectId: string; + sectionId: string; +} + +const SectionPage: React.FC = ({projectId, sectionId}) => { + const globalStore = useGlobalStore(); + const section = globalStore.getSection(sectionId); + const files = globalStore.getFilesForSection(sectionId); + + const sectionPointer: types.EntityPointer = { + entityId: sectionId, + entityType: types.EntityType.SECTION, + }; + + return ( +
+ + + + + +
+ ); +} + +export default SectionPage; diff --git a/src/client/IClient.ts b/src/client/IClient.ts index 2302632..eb7694d 100644 --- a/src/client/IClient.ts +++ b/src/client/IClient.ts @@ -1,8 +1,7 @@ import {CommentData, FullProjectData, ProjectData, SectionData} from '../types'; export interface IClient { - fetchFullProjectData: (projectId: string) => Promise; - fetchAllProjects: () => Promise; + fetchFullDataForProject: (projectId: string) => Promise; addComment(comment: Omit): Promise; updateSection(sectionId: string, section: SectionData): Promise; diff --git a/src/client/LocalStorageClient.ts b/src/client/LocalStorageClient.ts index 4cd19d7..a1eca7e 100644 --- a/src/client/LocalStorageClient.ts +++ b/src/client/LocalStorageClient.ts @@ -1,11 +1,11 @@ -import {IStore} from '../store/IStore'; -import {CommentData, FullProjectData, ProjectData, SectionData} from '../types'; +import {LocalStorageStore} from '../store/LocalStorageStore'; +import {CommentData, FullProjectData, SectionData} from '../types'; import {IClient} from './IClient'; export class LocalStorageClient implements IClient { - private persistentStore: IStore; + private persistentStore: LocalStorageStore; - constructor(persistentStore: IStore) { + constructor(persistentStore: LocalStorageStore) { this.persistentStore = persistentStore; } @@ -15,19 +15,23 @@ export class LocalStorageClient implements IClient { id: Math.random().toString().slice(2), }; - // TODO: persist to local storage + const comments = await this.persistentStore.getAllComments(); + const newState = [...comments, newComment]; + this.persistentStore.setAllComments(newState); return newComment; } - fetchFullProjectData = async (projectId: string): Promise => { + // fetchFullDataForProject uses the local storage store to get all data for a given project + // it fetches the project data, sections, files, and comments for the given project + fetchFullDataForProject = async (projectId: string): Promise => { const projects = (await this.persistentStore.getAllProjects()).filter(p => p.id === projectId); const sections = (await this.persistentStore.getAllSections()).filter(s => s.projectId === projectId); const files = (await this.persistentStore.getAllFiles()).filter(f => f.projectId === projectId); const comments = (await this.persistentStore.getAllComments()).filter(c => c.projectId === projectId); if (!projects[0]) { - return `New project found for projectId ${projectId}`; + return new Error(`Error: No project found for projectId ${projectId}`); } return { @@ -38,12 +42,18 @@ export class LocalStorageClient implements IClient { }; } - fetchAllProjects = async (): Promise => { - const projects = await this.persistentStore.getAllProjects(); - return projects; - } - updateSection = async (sectionId: string, section: SectionData): Promise => { + const sections = await this.persistentStore.getAllSections(); + const newState = sections.map(s => { + if (s.id === sectionId) { + return section; + } + + return s; + }); + + this.persistentStore.setAllSections(newState); + return section; } } diff --git a/src/hooks/useMount.ts b/src/hooks/useMount.ts new file mode 100644 index 0000000..7ae5596 --- /dev/null +++ b/src/hooks/useMount.ts @@ -0,0 +1,9 @@ +import {useEffect} from 'react' + +export const useMount = (callback: () => void) => { + useEffect(() => { + callback(); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); +} diff --git a/src/index.tsx b/src/index.tsx index 3163cd0..7b20240 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,8 +5,6 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; import {LocalStorageStore} from './store/LocalStorageStore'; import {LocalStorageClient} from './client/LocalStorageClient'; -import {ClientProvider} from './hooks/useClient'; -import {GlobalStoreProvider} from './hooks/useGlobalStore'; window.addEventListener('load', async () => { const root = ReactDOM.createRoot( @@ -19,24 +17,13 @@ window.addEventListener('load', async () => { const projectId = 'project-1'; const sectionId = 'section-1'; - // this should really be done in a useEffect in App probably - const projectData = await localClient.fetchFullProjectData(projectId); - - if (typeof projectData === 'string') { - alert(projectData); - return; - } - root.render( - - - - - + ); }); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/store/LocalStorageStore.ts b/src/store/LocalStorageStore.ts index af27878..c5bdb9f 100644 --- a/src/store/LocalStorageStore.ts +++ b/src/store/LocalStorageStore.ts @@ -4,84 +4,205 @@ import {IStore} from './IStore'; export interface LocalStorageDependency { getItem(key: string): string | null; setItem(key: string, value: string): void; + clear(): void; +} + +// TODO: versioning of the store allows for migrations +// const LOCAL_STORAGE_KEY_VERSION = 'version'; + +const LOCAL_STORAGE_KEY_PROJECTS = 'projects'; +const LOCAL_STORAGE_KEY_SECTIONS = 'sections'; +const LOCAL_STORAGE_KEY_FILES = 'files'; +const LOCAL_STORAGE_KEY_COMMENTS = 'comments'; + +export type StoreData = { + projects: ProjectData[]; + sections: SectionData[]; + files: FileData[]; + comments: CommentData[]; } export class LocalStorageStore implements IStore { private ls: LocalStorageDependency; + private currentData: StoreData; + constructor(ls: LocalStorageDependency) { this.ls = ls; + this.currentData = this.migrateLocalStorageStore(); + + if (!this.currentData.projects.length) { + this.initializeWithSampleData(); + } + + // this.clear(); + } + + clear = () => { + this.ls.clear(); + this.currentData = this.migrateLocalStorageStore(); + } + + initializeWithSampleData = () => { + this.clear(); + this.setAllProjects(initialProjects); + this.setAllSections(initialSections); + this.setAllFiles(initialFiles); + this.setAllComments(initialComments); } getAllProjects = async (): Promise => { - return [ - { - id: 'project-1', - }, - { - id: 'project-2', - }, - ]; + return this.currentData.projects; + }; + + setAllProjects = async (allProjects: ProjectData[]): Promise => { + this.currentData = { + ...this.currentData, + projects: allProjects, + }; + + this.ls.setItem(LOCAL_STORAGE_KEY_PROJECTS, JSON.stringify(allProjects)); }; getAllSections = async (): Promise => { - return [ - { - id: 'section-1', - projectId: 'project-1', - chordProgression: ['C', 'Dm', 'F', 'G'], - description: 'This is the intro', - title: 'Intro', - numRevisions: 3, - } - ]; + return this.currentData.sections; + }; + + setAllSections = async (allSections: SectionData[]): Promise => { + this.currentData = { + ...this.currentData, + sections: allSections, + }; + + this.ls.setItem(LOCAL_STORAGE_KEY_SECTIONS, JSON.stringify(allSections)); }; getAllFiles = async (): Promise => { - return [ - { - 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', - }, - ]; - } + return this.currentData.files; + }; + + setAllFiles = async (allFiles: FileData[]): Promise => { + this.currentData = { + ...this.currentData, + files: allFiles, + }; + + this.ls.setItem(LOCAL_STORAGE_KEY_FILES, JSON.stringify(allFiles)); + }; getAllComments = async (): Promise => { - return [ - { - 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 this.currentData.comments; }; + + setAllComments = async (allComments: CommentData[]): Promise => { + this.currentData = { + ...this.currentData, + comments: allComments, + }; + + this.ls.setItem(LOCAL_STORAGE_KEY_COMMENTS, JSON.stringify(allComments)); + }; + + private migrateLocalStorageStore = (): StoreData => { + const store: StoreData = { + projects: [], + sections: [], + files: [], + comments: [], + }; + + const projectsStr = this.ls.getItem(LOCAL_STORAGE_KEY_PROJECTS); + if (projectsStr) { + store.projects = JSON.parse(projectsStr); + } else { + this.ls.setItem(LOCAL_STORAGE_KEY_PROJECTS, JSON.stringify(store.projects)); + } + + const sectionsStr = this.ls.getItem(LOCAL_STORAGE_KEY_SECTIONS); + if (sectionsStr) { + store.sections = JSON.parse(sectionsStr); + } else { + this.ls.setItem(LOCAL_STORAGE_KEY_SECTIONS, JSON.stringify(store.sections)); + } + + const filesStr = this.ls.getItem(LOCAL_STORAGE_KEY_FILES); + if (filesStr) { + store.files = JSON.parse(filesStr); + } else { + this.ls.setItem(LOCAL_STORAGE_KEY_FILES, JSON.stringify(store.files)); + } + + const commentsStr = this.ls.getItem(LOCAL_STORAGE_KEY_COMMENTS); + if (commentsStr) { + store.comments = JSON.parse(commentsStr); + } else { + this.ls.setItem(LOCAL_STORAGE_KEY_COMMENTS, JSON.stringify(store.comments)); + } + + return store; + } } + +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', + }, +]; diff --git a/src/store/MockLocalStorage.ts b/src/store/MockLocalStorage.ts new file mode 100644 index 0000000..a1329c7 --- /dev/null +++ b/src/store/MockLocalStorage.ts @@ -0,0 +1,24 @@ +import {LocalStorageDependency} from './LocalStorageStore'; + +export class MockLocalStorage> implements LocalStorageDependency { + public currentData: T; + + constructor(data: T) { + this.currentData = data; + } + + getItem(key: string): string | null { + if (this.currentData[key]) { + return JSON.stringify(this.currentData[key]); + } + + return null; + } + + setItem(key: string, value: string): void { + this.currentData[key as keyof T] = JSON.parse(value); + } + clear(): void { + this.currentData = {} as T; + } +} diff --git a/src/setupTests.ts b/tests/setupTests.ts similarity index 100% rename from src/setupTests.ts rename to tests/setupTests.ts From 687bd5ea95e0eb3b61e4a6177c88e6a32ca5a37b Mon Sep 17 00:00:00 2001 From: Michael Kochell <6913320+mickmister@users.noreply.github.com> Date: Tue, 21 May 2024 23:49:53 -0400 Subject: [PATCH 4/6] remote IStore interface to simplify. fix workflow test command --- .github/workflows/ci.yml | 2 +- package.json | 3 +- src/App.test.tsx | 36 +++++++++++++++---- src/ChordProgression.tsx | 2 +- src/Files.tsx | 5 ++- src/client/IClient.ts | 2 +- src/store/IStore.ts | 8 ----- src/store/LocalStorageStore.ts | 3 +- ...orage.ts => MockLocalStorageDependency.ts} | 2 +- 9 files changed, 41 insertions(+), 22 deletions(-) delete mode 100644 src/store/IStore.ts rename src/store/{MockLocalStorage.ts => MockLocalStorageDependency.ts} (82%) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f836200..db1b606 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -63,4 +63,4 @@ jobs: - name: Install modules run: npm i - name: Run tests - run: npm test + run: npm run test:ci diff --git a/package.json b/package.json index e319fca..c2058f8 100644 --- a/package.json +++ b/package.json @@ -25,11 +25,12 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", + "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 build" + "ci": "npm run lint && npm run check-types && npm run test:ci && npm run build" }, "browserslist": { "production": [ diff --git a/src/App.test.tsx b/src/App.test.tsx index af01cf3..8e27742 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -3,11 +3,13 @@ import App from './App'; import {IClient} from './client/IClient'; import {ProjectData, CommentData, SectionData, EntityType, FileData} from './types'; import {LocalStorageStore, StoreData} from './store/LocalStorageStore'; -import {MockLocalStorage} from './store/MockLocalStorage'; +import {MockLocalStorageDependency} from './store/MockLocalStorageDependency'; import {LocalStorageClient} from './client/LocalStorageClient'; // import * as testData from './sampleData' +window.alert = () => {}; + const makeTestStore = (): StoreData => { const initialProjects: ProjectData[] = [ { @@ -87,13 +89,30 @@ describe('App', () => { beforeEach(() => { const initialStore = makeTestStore(); - const localStorageDependency = new MockLocalStorage(initialStore); + const localStorageDependency = new MockLocalStorageDependency(initialStore); const store = new LocalStorageStore(localStorageDependency); client = new LocalStorageClient(store); }); - it('initializing', () => { - it('show "Loading"', async () => { + describe('initializing', () => { + it('should show "Loading"', async () => { + // this method is made blocking for this specific test + client.fetchFullDataForProject = (() => new Promise(r => setTimeout(r))); + + render( + + ); + + expect(screen.getByText(/Loading/)).toBeDefined(); + }); + + it('should show client error', async () => { + client.fetchFullDataForProject = jest.fn().mockResolvedValue(new Error('Some error')); + render( { client={client} /> ); + + await waitFor(() => { + expect(screen.queryByText(/Loading/)).toBeNull(); + }); + + expect(screen.getByText(/Some error/)).toBeDefined(); }); - expect(screen.getByText(/Loading/)).toBeDefined(); }); - it('initialized', () => { + describe('initialized', () => { it('should show the section title and description', async () => { render( = ({ chordProgres return (
    - {chordProgression.map((chord, index) =>
  1. {chord}
    2. )} + {chordProgression.map((chord, index) =>
  2. {chord}
    3. )}
); diff --git a/src/Files.tsx b/src/Files.tsx index 748c5be..c87b9f7 100644 --- a/src/Files.tsx +++ b/src/Files.tsx @@ -16,7 +16,10 @@ export const Files: React.FC = ({files}) => { const numComments = globalStore.getCommentsForFile(file.id).length; return ( -
+
{file.title}



{numComments} diff --git a/src/client/IClient.ts b/src/client/IClient.ts index eb7694d..1b7e669 100644 --- a/src/client/IClient.ts +++ b/src/client/IClient.ts @@ -1,4 +1,4 @@ -import {CommentData, FullProjectData, ProjectData, SectionData} from '../types'; +import {CommentData, FullProjectData, SectionData} from '../types'; export interface IClient { fetchFullDataForProject: (projectId: string) => Promise; diff --git a/src/store/IStore.ts b/src/store/IStore.ts deleted file mode 100644 index c0242b9..0000000 --- a/src/store/IStore.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {CommentData, FileData, ProjectData, SectionData} from '../types'; - -export interface IStore { - getAllProjects(): Promise; - getAllSections(): Promise; - getAllFiles(): Promise; - getAllComments(): Promise; -} diff --git a/src/store/LocalStorageStore.ts b/src/store/LocalStorageStore.ts index c5bdb9f..5908afc 100644 --- a/src/store/LocalStorageStore.ts +++ b/src/store/LocalStorageStore.ts @@ -1,5 +1,4 @@ import {CommentData, EntityType, FileData, ProjectData, SectionData} from '../types'; -import {IStore} from './IStore'; export interface LocalStorageDependency { getItem(key: string): string | null; @@ -22,7 +21,7 @@ export type StoreData = { comments: CommentData[]; } -export class LocalStorageStore implements IStore { +export class LocalStorageStore { private ls: LocalStorageDependency; private currentData: StoreData; diff --git a/src/store/MockLocalStorage.ts b/src/store/MockLocalStorageDependency.ts similarity index 82% rename from src/store/MockLocalStorage.ts rename to src/store/MockLocalStorageDependency.ts index a1329c7..cfc9890 100644 --- a/src/store/MockLocalStorage.ts +++ b/src/store/MockLocalStorageDependency.ts @@ -1,6 +1,6 @@ import {LocalStorageDependency} from './LocalStorageStore'; -export class MockLocalStorage> implements LocalStorageDependency { +export class MockLocalStorageDependency> implements LocalStorageDependency { public currentData: T; constructor(data: T) { From 70e958da5a5de629fa93e8370d25c2aadb18a5f4 Mon Sep 17 00:00:00 2001 From: Michael Kochell <6913320+mickmister@users.noreply.github.com> Date: Wed, 22 May 2024 00:41:42 -0400 Subject: [PATCH 5/6] use typed in username for comments --- src/CreateComment.tsx | 2 +- src/actions/useActions.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/CreateComment.tsx b/src/CreateComment.tsx index 8b6fc10..8a0fb9a 100644 --- a/src/CreateComment.tsx +++ b/src/CreateComment.tsx @@ -16,7 +16,7 @@ export const CreateComment: React.FC = ({entityPointer}) => const handleAddComment = async (e: React.FormEvent) => { e.preventDefault(); - await actions.addCommentToEntity(commentText, entityPointer); + await actions.addCommentToEntity(commentText, name, entityPointer); setCommentText(''); } diff --git a/src/actions/useActions.ts b/src/actions/useActions.ts index 59264eb..21f3ccb 100644 --- a/src/actions/useActions.ts +++ b/src/actions/useActions.ts @@ -3,7 +3,7 @@ import {useGlobalStore} from '../hooks/useGlobalStore'; import {CommentData, EntityPointer, SectionData} from '../types'; type UseActionsHookValue = { - addCommentToEntity(text: string, entityPointer: EntityPointer): Promise; + addCommentToEntity(text: string, username: string, entityPointer: EntityPointer): Promise; updateSection(sectionId: string, section: SectionData): Promise; } @@ -15,13 +15,13 @@ export const useActions = (): UseActionsHookValue => { // const projectId = globalStore.getCurrentProjectId() const projectId = 'project-1'; - const addCommentToEntity = async (message: string, entityPointer: EntityPointer) => { + const addCommentToEntity = async (message: string, username: string, entityPointer: EntityPointer) => { const commentPayload: Omit = { entityType: entityPointer.entityType, entityId: entityPointer.entityId, message, projectId, - username: 'mickmister', + username, }; const comment = await client.addComment(commentPayload); From a8695351f49f09a84aaaf252c5e039a1d8c52bf1 Mon Sep 17 00:00:00 2001 From: Michael Kochell <6913320+mickmister@users.noreply.github.com> Date: Wed, 22 May 2024 00:45:08 -0400 Subject: [PATCH 6/6] add import for index.css --- src/App.tsx | 1 + src/SectionPage.tsx | 3 --- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c662307..df11b80 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import {useState} from 'react'; import './App.css'; import './css_reset.css' +import './index.css' import './section_view.css'; import * as types from './types'; import {GlobalStoreProvider} from './hooks/useGlobalStore'; diff --git a/src/SectionPage.tsx b/src/SectionPage.tsx index 2c7ed78..b3a5b5e 100644 --- a/src/SectionPage.tsx +++ b/src/SectionPage.tsx @@ -1,6 +1,3 @@ -import './App.css'; -import './css_reset.css' -import './section_view.css'; import * as types from './types'; import {Files} from './Files'; import {ChordProgression} from './ChordProgression';