Rename React components to reflect correct name ("note")

src/Components/SideDrawer.jsx

@@ -109,17 +109,17 @@ export default function SideDrawerWrapper() {
 
 
   useEffect(() => {
-    const issueHash = getHashParams(location, 'i')
-    if (issueHash !== undefined) {
-      const extractedCommentId = issueHash.split(':')[1]
+    const noteHash = getHashParams(location, 'i')
+    if (noteHash !== undefined) {
+      const extractedCommentId = noteHash.split(':')[1]
       setSelectedNoteId(Number(extractedCommentId))
       if (!isDrawerOpen) {
         openDrawer()
         turnCommentsOn()
       }
     }
     // This address bug #314 by clearing selected issue when new model is loaded
-    if (issueHash === undefined && isDrawerOpen) {
+    if (noteHash === undefined && isDrawerOpen) {
       setSelectedNoteId(null)
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps

src/Components/SideDrawerPanels.jsx

@@ -5,8 +5,8 @@ import {makeStyles, useTheme} from '@mui/styles'
 import useStore from '../store/useStore'
 import ItemProperties from './ItemProperties'
 import {TooltipIconButton} from './Buttons'
-import Issues from './issues/Issues'
-import IssuesNavBar from './issues/IssuesNavBar'
+import Notes from './notes/Notes'
+import NotesNavBar from './notes/NotesNavBar'
 import CloseIcon from '../assets/2D_Icons/Close.svg'
 
 
@@ -79,9 +79,9 @@ export const NotesPanel = () => {
   const classes = useStyles(useTheme())
   return (
     <>
-      <IssuesNavBar/>
+      <NotesNavBar/>
       <div className={classes.contentContainerNotes}>
-        <Issues/>
+        <Notes/>
       </div>
     </>
   )

src/Components/issues/IssueCard.jsx → src/Components/notes/NoteCard.jsx

@@ -16,27 +16,27 @@ import {
   removeCameraUrlParams,
 } from '../CameraControl'
 import {useIsMobile} from '../Hooks'
-import {NOTE_PREFIX} from './Issues'
+import {NOTE_PREFIX} from './Notes'
 import CameraIcon from '../../assets/2D_Icons/Camera.svg'
 import ShareIcon from '../../assets/2D_Icons/Share.svg'
 
 
 /**
- * Issue card
+ * Note card
  *
- * @param {number} id issue id
- * @param {number} index issue index
- * @param {string} username username of the issue author
- * @param {string} title issue title
+ * @param {number} id note id
+ * @param {number} index note index
+ * @param {string} username username of the note author
+ * @param {string} title note title
  * @param {string} avatarUrl user avatarUrl
- * @param {string} body issue body
- * @param {string} date issue date
- * @param {number} numberOfComments number of replies to the issue - refered to as comments in GH
+ * @param {string} body note body
+ * @param {string} date note date
+ * @param {number} numberOfComments number of replies to the note - referred to as comments in GH
  * @param {boolean} expandedImage governs the size of the image, small proportions on mobile to start
- * @param {boolean} isComment Comments/replies are formated differently
+ * @param {boolean} isComment Comments/replies are formatted differently
  * @return {object} React component
  */
-export default function IssueCard({
+export default function NoteCard({
   id = null,
   index = null,
   username = '',
@@ -321,7 +321,7 @@ const useStyles = makeStyles((theme) => ({
     'paddingLeft': '5px',
     'fontSize': '1em',
     'lineHeight': '1.3em',
-    // Restore link styling for issues and comments
+    // Restore link styling for notes and comments
     '& a': {
       color: (props) => props.isDay ? 'black' : 'lightGrey',
       textDecoration: 'underline',

src/Components/issues/IssueCard.test.jsx → src/Components/notes/NoteCard.test.jsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import {render, screen, fireEvent} from '@testing-library/react'
 import ShareMock from '../../ShareMock'
-import IssueCard from './IssueCard'
+import NoteCard from './NoteCard'
 
 
-describe('IssueCard', () => {
-  it('IssueCard', () => {
+describe('NoteCard', () => {
+  it('NoteCard', () => {
     const id = 123
     const index = 123
     render(
         <ShareMock>
-          <IssueCard
+          <NoteCard
             id={id}
             date='2000-01-01T00:00:00Z'
             username='bob'
@@ -27,28 +27,28 @@ describe('IssueCard', () => {
     const id = 123
     const index = 123
     const commentCount = 10
-    render(<ShareMock><IssueCard id={id} index={index} numberOfComments={commentCount}/></ShareMock>)
+    render(<ShareMock><NoteCard id={id} index={index} numberOfComments={commentCount}/></ShareMock>)
     expect(screen.getByText(commentCount)).toBeInTheDocument()
   })
 
-  it('Select the issue card', () => {
+  it('Select the note card', () => {
     const id = 123
     const index = 123
     const rendered = render(
         <ShareMock>
-          <IssueCard id={id} index={index} title="Select the issue card - title"/>
+          <NoteCard id={id} index={index} title="Select the note card - title"/>
         </ShareMock>)
     const selectIssueButton = rendered.getByTestId('selectionContainer')
     fireEvent.click(selectIssueButton)
-    expect(screen.getByText('Select the issue card - title')).toBeInTheDocument()
+    expect(screen.getByText('Select the note card - title')).toBeInTheDocument()
   })
 
   it('Camera Position control', () => {
     const id = 123
     const index = 123
     const rendered = render(
         <ShareMock>
-          <IssueCard
+          <NoteCard
             id={id}
             index={index}
             body="Test body [test link](http://localhost:8080/share/v/p/index.ifc#c:-141.9,72.88,21.66,-43.48,15.73,-4.34)"

src/Components/issues/Issues.jsx → src/Components/notes/Notes.jsx

@@ -6,27 +6,27 @@ import useStore from '../../store/useStore'
 import {getIssues, getComments} from '../../utils/GitHub'
 import Loader from '../Loader'
 import NoContent from '../NoContent'
-import IssueCard from './IssueCard'
+import NoteCard from './NoteCard'
 
 /** The prefix to use for the note ID within the URL hash. */
 export const NOTE_PREFIX = 'i'
 
 
-/** @return {object} List of issues and comments as react component. */
-export default function Issues() {
+/** @return {object} List of notes and comments as react component. */
+export default function Notes() {
   const classes = useStyles()
   const selectedNoteId = useStore((state) => state.selectedNoteId)
   const setSelectedNoteId = useStore((state) => state.setSelectedNoteId)
   const notes = useStore((state) => state.notes)
   const setNotes = useStore((state) => state.setNotes)
   const comments = useStore((state) => state.comments)
   const setComments = useStore((state) => state.setComments)
-  const filteredIssue = (notes && selectedNoteId) ?
+  const filteredNote = (notes && selectedNoteId) ?
         notes.filter((issue) => issue.id === selectedNoteId)[0] : null
   const repository = useStore((state) => state.repository)
   useEffect(() => {
     if (!repository) {
-      debug().warn('IssuesControl#Issues: 1, no repo defined')
+      debug().warn('IssuesControl#Notes: 1, no repo defined')
       return
     }
     const fetchNotes = async () => {
@@ -64,7 +64,7 @@ export default function Issues() {
 
   useEffect(() => {
     if (!repository) {
-      debug().warn('IssuesControl#Issues: 2, no repo defined')
+      debug().warn('IssuesControl#Notes: 2, no repo defined')
       return
     }
     const fetchComments = async (selectedNote) => {
@@ -92,16 +92,16 @@ export default function Issues() {
     }
 
     if (selectedNoteId !== null) {
-      fetchComments(filteredIssue)
+      fetchComments(filteredNote)
     }
     // This address bug #314 by clearing selected issue when new model is loaded
-    if (!filteredIssue) {
+    if (!filteredNote) {
       setSelectedNoteId(null)
     }
     // this useEffect runs everytime notes are fetched to enable fetching the comments when the platform is open
     // using the link
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filteredIssue, repository, setComments])
+  }, [filteredNote, repository, setComments])
 
   return (
     <Paper className={classes.commentsContainer} elevation={0}>
@@ -111,7 +111,7 @@ export default function Issues() {
         {notes && !selectedNoteId ?
           notes.map((issue, index) => {
             return (
-              <IssueCard
+              <NoteCard
                 embeddedUrl={issue.embeddedUrl}
                 index={issue.index}
                 id={issue.id}
@@ -127,25 +127,25 @@ export default function Issues() {
             )
           }) :
         <>
-          {filteredIssue ?
-           <IssueCard
-             embeddedUrl={filteredIssue.embeddedUrl}
-             index={filteredIssue.index}
-             id={filteredIssue.id}
-             key={filteredIssue.id}
-             title={filteredIssue.title}
-             date={filteredIssue.date}
-             body={filteredIssue.body}
-             username={filteredIssue.username}
-             numberOfComments={filteredIssue.numberOfComments}
-             avatarUrl={filteredIssue.avatarUrl}
-             imageUrl={filteredIssue.imageUrl}
+          {filteredNote ?
+           <NoteCard
+             embeddedUrl={filteredNote.embeddedUrl}
+             index={filteredNote.index}
+             id={filteredNote.id}
+             key={filteredNote.id}
+             title={filteredNote.title}
+             date={filteredNote.date}
+             body={filteredNote.body}
+             username={filteredNote.username}
+             numberOfComments={filteredNote.numberOfComments}
+             avatarUrl={filteredNote.avatarUrl}
+             imageUrl={filteredNote.imageUrl}
            /> : null
           }
           {comments &&
            comments.map((comment, index) => {
              return (
-               <IssueCard
+               <NoteCard
                  embeddedUrl={comment.embeddedUrl}
                  isComment={true}
                  index=''

src/Components/issues/Issues.test.jsx → src/Components/notes/Notes.test.jsx

@@ -4,7 +4,7 @@ import ShareMock from '../../ShareMock'
 import useStore from '../../store/useStore'
 import {server} from '../../__mocks__/server'
 import {MOCK_ISSUES_EMPTY} from '../../utils/GitHub'
-import Issues from './Issues'
+import Notes from './Notes'
 import {rest} from 'msw'
 
 
@@ -17,9 +17,9 @@ describe('IssueControl', () => {
   })
 
 
-  it('Setting issues in zustand', async () => {
+  it('Setting notes in zustand', async () => {
     const {result} = renderHook(() => useStore((state) => state))
-    const {getByText} = render(<ShareMock><Issues/></ShareMock>)
+    const {getByText} = render(<ShareMock><Notes/></ShareMock>)
     await act(() => {
       result.current.setSelectedNoteId(null)
     })
@@ -34,7 +34,7 @@ describe('IssueControl', () => {
   it('Setting comments in zustand ', async () => {
     const {result} = renderHook(() => useStore((state) => state))
     const testIssueId = 10
-    const {getByText} = render(<ShareMock><Issues/></ShareMock>)
+    const {getByText} = render(<ShareMock><Notes/></ShareMock>)
     await act(() => {
       result.current.setSelectedNoteId(testIssueId)
     })
@@ -48,7 +48,7 @@ describe('IssueControl', () => {
   it('Issue rendered based on selected issue ID', async () => {
     const {result} = renderHook(() => useStore((state) => state))
     const extractedNoteId = '1257156364'
-    const {findByText} = render(<ShareMock><Issues/></ShareMock>)
+    const {findByText} = render(<ShareMock><Notes/></ShareMock>)
 
     await act(() => {
       result.current.setSelectedNoteId(Number(extractedNoteId))
@@ -61,17 +61,17 @@ describe('IssueControl', () => {
   it('Issue rendered based on issue ID in URL', async () => {
     const {findByText} = render(
         <ShareMock initialEntries={['/v/p/index.ifc#i:2::c:-26.91,28.84,112.47,-22,16.21,-3.48']}>
-          <Issues/>
+          <Notes/>
         </ShareMock>)
 
     const expectedText = 'Local issue 2'
     expect(await findByText(expectedText)).toBeVisible()
   })
 
   // XXX: Should this be split into two different tests?
-  describe('when issues are null', () => {
+  describe('when notes are null', () => {
     beforeEach(() => {
-      // Set up handler to return an empty set of issues
+      // Set up handler to return an empty set of notes
       server.use(
           rest.get('https://api.github.com/repos/:org/:repo/issues', (req, res, ctx) => {
             return res(
@@ -82,17 +82,17 @@ describe('IssueControl', () => {
     })
 
     afterEach(() => {
-      // Restore the original set of HTTP handlers that return issues
+      // Restore the original set of HTTP handlers that return notes
       server.restoreHandlers()
     })
 
-    it('progress bar is present during loading of issues', () => {
-      const {getByRole} = render(<ShareMock><Issues/></ShareMock>)
+    it('progress bar is present during loading of notes', () => {
+      const {getByRole} = render(<ShareMock><Notes/></ShareMock>)
       expect(getByRole('progressbar')).toBeInTheDocument()
     })
 
-    it('progress bar is no longer visible when issues are not-null', async () => {
-      const {queryByRole} = render(<ShareMock><Issues/></ShareMock>)
+    it('progress bar is no longer visible when notes are not-null', async () => {
+      const {queryByRole} = render(<ShareMock><Notes/></ShareMock>)
 
       const {result} = renderHook(() => useStore((state) => state))
       await act(() => {

src/Components/issues/IssuesNavBar.jsx → src/Components/notes/NotesNavBar.jsx

@@ -6,15 +6,15 @@ import {addHashParams, removeHashParams} from '../../utils/location'
 import useStore from '../../store/useStore'
 import {TooltipIconButton} from '../Buttons'
 import {setCameraFromParams, addCameraUrlParams, removeCameraUrlParams} from '../CameraControl'
-import {NOTE_PREFIX} from './Issues'
+import {NOTE_PREFIX} from './Notes'
 import BackIcon from '../../assets/2D_Icons/Back.svg'
 import CloseIcon from '../../assets/2D_Icons/Close.svg'
 import NextIcon from '../../assets/2D_Icons/NavNext.svg'
 import PreviousIcon from '../../assets/2D_Icons/NavPrev.svg'
 
 
 /** @return {object} React component. */
-export default function IssuesNavBar() {
+export default function NotesNavBar() {
   const classes = useStyles(useTheme())
   const notes = useStore((state) => state.notes)
   const selectedNoteId = useStore((state) => state.selectedNoteId)

src/Components/issues/IssuesNavBar.test.jsx → src/Components/notes/NotesNavBar.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {act, render, renderHook} from '@testing-library/react'
 import ShareMock from '../../ShareMock'
 import useStore from '../../store/useStore'
-import IssuesNavBar from './IssuesNavBar'
+import NotesNavBar from './NotesNavBar'
 
 
 describe('IssueControl', () => {
@@ -14,16 +14,16 @@ describe('IssueControl', () => {
   })
 
 
-  it('Issues NavBar Issues', () => {
-    const {getByText} = render(<ShareMock><IssuesNavBar/></ShareMock>)
+  it('Notes NavBar Notes', () => {
+    const {getByText} = render(<ShareMock><NotesNavBar/></ShareMock>)
     expect(getByText('Notes')).toBeInTheDocument()
   })
 
 
   it('NavBar changes to back nav when issue selected', async () => {
     const {result} = renderHook(() => useStore((state) => state))
     const testIssueId = 10
-    const {getByTitle} = render(<ShareMock><IssuesNavBar/></ShareMock>)
+    const {getByTitle} = render(<ShareMock><NotesNavBar/></ShareMock>)
     await act(() => {
       result.current.setSelectedNoteId(testIssueId)
     })