Move issues components into sub-directory and move major components t…

…o their own files. (#447)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r501",
+  "version": "1.0.0-r542",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {

src/Components/SideDrawerPanels.jsx

@@ -4,8 +4,9 @@ import Typography from '@mui/material/Typography'
 import {makeStyles, useTheme} from '@mui/styles'
 import useStore from '../store/useStore'
 import ItemProperties from './ItemProperties'
-import {IssuesNavBar, Issues} from './IssuesControl'
 import {TooltipIconButton} from './Buttons'
+import Issues from './issues/Issues'
+import IssuesNavBar from './issues/IssuesNavBar'
 import CloseIcon from '../assets/2D_Icons/Close.svg'
 
 

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

@@ -1,24 +1,24 @@
 import React, {useState, useEffect, useContext} from 'react'
 import ReactMarkdown from 'react-markdown'
 import {makeStyles} from '@mui/styles'
-import {ColorModeContext} from '../Context/ColorMode'
-import useStore from '../store/useStore'
-import {assertDefined} from '../utils/assert'
-import {addHashParams, getHashParamsFromHashStr} from '../utils/location'
-import {isRunningLocally} from '../utils/network'
-import {findUrls} from '../utils/strings'
-import {TooltipIconButton} from './Buttons'
-import {ISSUE_PREFIX} from './IssuesControl'
+import {ColorModeContext} from '../../Context/ColorMode'
+import useStore from '../../store/useStore'
+import {assertDefined} from '../../utils/assert'
+import {addHashParams, getHashParamsFromHashStr} from '../../utils/location'
+import {isRunningLocally} from '../../utils/network'
+import {findUrls} from '../../utils/strings'
+import {TooltipIconButton} from '../Buttons'
 import {
   CAMERA_PREFIX,
   addCameraUrlParams,
   setCameraFromParams,
   parseHashParams,
   removeCameraUrlParams,
-} from './CameraControl'
-import {useIsMobile} from './Hooks'
-import CameraIcon from '../assets/2D_Icons/Camera.svg'
-import ShareIcon from '../assets/2D_Icons/Share.svg'
+} from '../CameraControl'
+import {useIsMobile} from '../Hooks'
+import {ISSUE_PREFIX} from './Issues'
+import CameraIcon from '../../assets/2D_Icons/Camera.svg'
+import ShareIcon from '../../assets/2D_Icons/Share.svg'
 
 
 /**

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import {render, screen, fireEvent} from '@testing-library/react'
-import ShareMock from '../ShareMock'
+import ShareMock from '../../ShareMock'
 import IssueCard from './IssueCard'
 
 

src/Components/IssuesControl.jsx → src/Components/issues/Issues.jsx

@@ -1,114 +1,19 @@
 import React, {useEffect} from 'react'
-import Box from '@mui/material/Box'
 import Paper from '@mui/material/Paper'
-import Typography from '@mui/material/Typography'
-import debug from '../utils/debug'
-import useStore from '../store/useStore'
-import {makeStyles, useTheme} from '@mui/styles'
-import {addHashParams, removeHashParams} from '../utils/location'
-import {getIssues, getComments} from '../utils/GitHub'
+import {makeStyles} from '@mui/styles'
+import debug from '../../utils/debug'
+import useStore from '../../store/useStore'
+import {getIssues, getComments} from '../../utils/GitHub'
+import Loader from '../Loader'
+import NoContent from '../NoContent'
 import IssueCard from './IssueCard'
-import Loader from './Loader'
-import NoContent from './NoContent'
-import {TooltipIconButton} from './Buttons'
-import {setCameraFromParams, addCameraUrlParams, removeCameraUrlParams} from './CameraControl'
-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'
 
 /** The prefix to use for issue id in the Url hash. */
 export const ISSUE_PREFIX = 'i'
 
 
-/** @return {object} React component. */
-export function IssuesNavBar() {
-  const classes = useStyles(useTheme())
-  const issues = useStore((state) => state.issues)
-  const selectedIssueId = useStore((state) => state.selectedIssueId)
-  const setSelectedIssueId = useStore((state) => state.setSelectedIssueId)
-  const selectedIssueIndex = useStore((state) => state.selectedIssueIndex)
-  const setSelectedIssueIndex = useStore((state) => state.setSelectedIssueIndex)
-  const turnCommentsOff = useStore((state) => state.turnCommentsOff)
-
-
-  const selectIssue = (direction) => {
-    const index = direction === 'next' ? selectedIssueIndex + 1 : selectedIssueIndex - 1
-    if (index >= 0 && index < issues.length) {
-      const issue = issues.filter((i) => i.index === index)[0]
-      setSelectedIssueId(issue.id)
-      setSelectedIssueIndex(issue.index)
-      addHashParams(window.location, ISSUE_PREFIX, {id: issue.id})
-      if (issue.url) {
-        setCameraFromParams(issue.url)
-        addCameraUrlParams()
-      } else {
-        removeCameraUrlParams()
-      }
-    }
-  }
-
-
-  return (
-    <div className={classes.titleContainer}>
-      <div className={classes.leftGroup}>
-        <Typography variant='h2'>
-          {!selectedIssueId && 'Notes' }
-        </Typography>
-
-        {selectedIssueId ?
-          <Box>
-            <TooltipIconButton
-              title='Back to the list'
-              placement='bottom'
-              onClick={() => {
-                removeHashParams(window.location, ISSUE_PREFIX)
-                setSelectedIssueId(null)
-              }}
-              icon={<div className={classes.iconContainer}><BackIcon/></div>}
-            />
-          </Box> : null
-        }
-      </div>
-
-      <div className={classes.middleGroup} >
-        {(issues && selectedIssueId) && issues.length > 1 &&
-          <>
-            <TooltipIconButton
-              title='Previous Note'
-              placement='bottom'
-              size='small'
-              onClick={() => selectIssue('previous')}
-              icon={<PreviousIcon/>}
-            />
-            <TooltipIconButton
-              title='Next Note'
-              size='small'
-              placement='bottom'
-              onClick={() => selectIssue('next')}
-              icon={<NextIcon/>}
-            />
-          </>
-        }
-      </div>
-
-      <div className={classes.rightGroup}>
-        <div>
-          <TooltipIconButton
-            title='Close Comments'
-            placement='bottom'
-            onClick={turnCommentsOff}
-            icon={<div className={classes.iconContainerClose}><CloseIcon/></div>}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-
 /** @return {object} List of issues and comments as react component. */
-export function Issues() {
+export default function Issues() {
   const classes = useStyles()
   const selectedIssueId = useStore((state) => state.selectedIssueId)
   const setSelectedIssueId = useStore((state) => state.setSelectedIssueId)
@@ -268,35 +173,6 @@ const useStyles = makeStyles((theme) => ({
   commentsContainer: {
     width: '100%',
   },
-  titleContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderRadius: '2px',
-  },
-  rightGroup: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  middleGroup: {
-    width: '400px',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  leftGroup: {
-    'display': 'flex',
-    'flexDirection': 'row',
-    'justifyContent': 'center',
-    'alignItems': 'center',
-    '@media (max-width: 900px)': {
-      paddingLeft: '12px',
-    },
-  },
   cardsContainer: {
     'display': 'flex',
     'flexDirection': 'column',
@@ -309,18 +185,4 @@ const useStyles = makeStyles((theme) => ({
       paddingTop: '0px',
     },
   },
-  iconContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '14px',
-    height: '14px',
-  },
-  iconContainerClose: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '14px',
-    height: '14px',
-  },
 }))

src/Components/IssuesControl.test.jsx → src/Components/issues/Issues.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import {act, render, renderHook} from '@testing-library/react'
-import ShareMock from '../ShareMock'
-import useStore from '../store/useStore'
-import {IssuesNavBar, Issues} from './IssuesControl'
-import {server} from '../__mocks__/server'
-import {MOCK_ISSUES_EMPTY} from '../utils/GitHub'
+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 {rest} from 'msw'
 
 
@@ -17,23 +17,6 @@ describe('IssueControl', () => {
   })
 
 
-  it('Issues NavBar Issues', () => {
-    const {getByText} = render(<ShareMock><IssuesNavBar/></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>)
-    await act(() => {
-      result.current.setSelectedIssueId(testIssueId)
-    })
-    expect(await getByTitle('Back to the list')).toBeInTheDocument()
-  })
-
-
   it('Setting issues in zustand', async () => {
     const {result} = renderHook(() => useStore((state) => state))
     const {getByText} = render(<ShareMock><Issues/></ShareMock>)