add timeline commit nodes

src/Components/Timeline.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-magic-numbers */
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
 import Paper from '@mui/material/Paper'
@@ -15,16 +15,38 @@ import Typography from '@mui/material/Typography'
 import ArchitectureIcon from '@mui/icons-material/Architecture'
 import EngineeringIcon from '@mui/icons-material/Engineering'
 import CloseIcon from '@mui/icons-material/Close'
-
+import useStore from '../store/useStore'
+import {getCommitsForBranch} from '../utils/GitHub'
 
 /**
  * Verison history timeline component
  *
  * @property {Array<object>} versionHistory object containing versions information
  * @return {React.Component}
  */
-export default function VersionsTimeline({versionHistory}) {
+export default function VersionsTimeline({versionHistory, branch}) {
   const [active, setActive] = useState(0)
+  const [commitData, setCommitData] = useState([])
+  const accessToken = useStore((state) => state.accessToken)
+  const repository = useStore((state) => state.repository)
+
+  useEffect(() => {
+    const fetchCommits = async () => {
+      const commits = await getCommitsForBranch(repository, branch, accessToken)
+      const versionsInfo = commits.map((entry) => {
+        const extractedData = {
+          authorName: entry.commit.author.name,
+          commitMessage: entry.commit.message,
+          commitDate: entry.commit.author.date,
+        }
+        return extractedData
+      })
+      setCommitData(versionsInfo)
+    }
+    fetchCommits()
+  }, [repository, branch, accessToken])
+
+  // console.log('commitData', commitData)
   return (
     <Paper
       sx={{
@@ -46,19 +68,26 @@ export default function VersionsTimeline({versionHistory}) {
         </Box>
       </Stack>
       <Timeline>
-        {versionHistory.map((version, i) => {
+        {commitData.map((version, i) => {
           return (
             <TimelineItem key={i} onClick={() => setActive(i)} sx={{cursor: 'pointer'}}>
               <TimelineOppositeContent
                 sx={{m: 'auto 0'}}
                 align="center"
                 color={active === i ? 'text.primary' : 'text.secondary'}
               >
-                <Typography variant="body2" >
-                  {version.name}
+                <Typography variant="body2"
+                  sx={{
+                    wordBreak: 'break-word', // This will break onto the next line at any character if necessary
+                    width: '80px',
+                    whiteSpace: 'normal', // Allow text to wrap onto the next line
+                    overflowWrap: 'break-word', // In case 'wordBreak' doesn't work, this is a backup
+                  }}
+                >
+                  {version.authorName}
                 </Typography>
                 <Typography variant="caption" >
-                  {version.date}
+                  {version.commitDate}
                 </Typography>
               </TimelineOppositeContent>
               <TimelineSeparator>
@@ -73,20 +102,26 @@ export default function VersionsTimeline({versionHistory}) {
                 </TimelineDot>
                 <TimelineConnector/>
               </TimelineSeparator>
-              <TimelineContent sx={{py: '12px', px: 2, lineHeight: '1em'}} >
+              <TimelineContent sx={{width: '40px', py: '12px', px: 2, lineHeight: '1em'}}>
                 <Paper
                   variant='background'
                   elevation={active === i ? 4 : 1}
-                  sx={{padding: '10px'}}
+                  sx={{padding: '10px', overflow: 'hidden'}}
                 >
                   <Typography
                     variant="caption"
-                    sx={{wordBreak: 'normal'}}
+                    sx={{
+                      wordBreak: 'break-word', // This will break onto the next line at any character if necessary
+                      width: '40px',
+                      whiteSpace: 'normal', // Allow text to wrap onto the next line
+                      overflowWrap: 'break-word', // In case 'wordBreak' doesn't work, this is a backup
+                    }}
                   >
-                    {version.description}
+                    {version.commitMessage}
                   </Typography>
                 </Paper>
               </TimelineContent>
+
             </TimelineItem>
           )
         })

src/Containers/CadView.jsx

@@ -678,7 +678,7 @@ export default function CadView({
             modelPath.repo !== undefined &&
             <>
               <BranchesControl location={location}/>
-              <Timeline versionHistory={versions}/>
+              <Timeline versionHistory={versions} branch={modelPath.branch}/>
             </>
           }
           {isNavPanelOpen &&

src/utils/GitHub.js

@@ -3,17 +3,16 @@ import debug from './debug'
 import PkgJson from '../../package.json'
 import {assertDefined} from './assert'
 
-// /**
-//  * @param {object} repository
-//  * @param {string} accessToken
-//  * @return {Array}
-//  */
-// export async function getCommits(repository, accessToken) {
-//   const res = await getGitHub(repository, 'issues', {}, accessToken)
-//   const issueArr = res.data
-//   debug().log('GitHub#getIssues: issueArr: ', issueArr)
-//   return commits
-// }
+/**
+ * @param {object} repository
+ * @param {string} accessToken
+ * @return {Array}
+ */
+export async function getCommitsForBranch(repository, branch, accessToken = '') {
+  const res = await getGitHub(repository, `commits?sha=${branch}`, {}, accessToken)
+  const commitsArr = res.data
+  return commitsArr
+}
 
 
 /**