fix message

Author: Francesca-Bit

packages/tdb-dashboard/src/components/DataProductActivityStatus.js

@@ -7,7 +7,7 @@ import {
     Legend,
     ResponsiveContainer,
     AreaChart, Area } from 'recharts'
-import {TimeTravelControl} from "../hooks/TimeTravelControl"
+import {useTimeTravel} from "../hooks/useTimeTravel"
 import {printtsDate, printtsTime} from "./utils"
 import {Loading} from "./Loading"
 import {PROGRESS_BAR_COMPONENT} from "./constants"
@@ -16,7 +16,7 @@ import {Col} from "react-bootstrap"
 export const DataProductActivityStatus = ()=>{
     const {
         dataProvider
-    } = TimeTravelControl(50)
+    } = useTimeTravel(50)
 
     return  <React.Fragment>
                 <Col md={12}>

packages/tdb-dashboard/src/components/DatePicker.js

@@ -11,6 +11,10 @@ export const DatePickerComponent = ({currentDay, setStartTime}) => {
         // convert to ISO timeStamp 
       if(setStartTime)setStartTime(data)
     }
+
+    useEffect(()=>{
+      setCurrentDate(currentDay)
+    },[currentDay])
 
     return <DatePicker onChange={handleOnChange} 
             value={selected} 

packages/tdb-dashboard/src/components/Messages.js

@@ -51,15 +51,15 @@ export const MessageBox = ({ setMessage, message }) => {
 // displays textarea to write comments  & button to save comments
 export const MessageComponent = ({setKey}) => {
     const { currentCRObject, setCurrentCRObject }= WOQLClientObj()
-    const { updateChangeRequestStatus, loading } = ChangeRequest()
+    const { addNewMessage, loading } = ChangeRequest()
     const [comment, setComment]=useState("")
     const { id } = useParams()
 
     /** handle Message */
     async function handleMessage(comment) {
         let id=extractID(currentCRObject["@id"])
         // this call return the changeRequestObj Updated
-        let res=await updateChangeRequestStatus(comment, currentCRObject.status, id)
+        let res=await addNewMessage(comment,id)
         // we'll see if add need rebase check every time
         res.needRebase = currentCRObject.needRebase
         setCurrentCRObject(res)

packages/tdb-dashboard/src/components/QueryPane.js

@@ -112,6 +112,7 @@ export const QueryPane = ({queryObj}) => {
                                 <Col md={size}> 
                                 <div className="editor-pallet">
                                 <WOQLEditor
+                                    language={queryObj.editorObj.language}
                                     editorObject={queryObj.editorObj}
                                     editable={true}
                                     theme="dark"/>

packages/tdb-dashboard/src/components/TimeTravel.js

@@ -1,12 +1,10 @@
 import React, {useState, useEffect, useRef} from "react"
 import {BiTimer, BiTime, BiMessageAltDetail} from "react-icons/bi"
-import {BsFillCircleFill, BsCalendar} from"react-icons/bs"
+import {BsFillCircleFill} from"react-icons/bs"
 import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component'
 import 'react-vertical-timeline-component/style.min.css'
-import {TimeTravelControl} from "../hooks/TimeTravelControl"
+import {useTimeTravel} from "../hooks/useTimeTravel"
 import {Button, Card, Row, Col} from "react-bootstrap"
-import {TERMINUS_SUCCESS} from "./constants"
-import {Alerts} from "./Alerts"
 import {AiOutlineUser} from "react-icons/ai"
 import {printtsDate, printtsTime} from "./utils"
 import {WOQLClientObj} from '../init-woql-client'
@@ -16,31 +14,30 @@ import {PROGRESS_BAR_COMPONENT} from "./constants"
 import {DatePickerComponent} from "./DatePicker"
 import {FaInfoCircle} from "react-icons/fa"
 
-
-export const TimeTravel = ({show}) => {
- 
+export const TimeTravel = ({refreshTime}) => {
     let cardColor = "#303030", transparantColor = "transparent", activeColor = "#00bc8c"
-    const  {branch, chosenCommit,setHead, currentChangeRequest} = WOQLClientObj()
-  
-    const {currentItem, 
+    const {setHead,chosenCommit,branch} = WOQLClientObj()
+    const {
         dataProvider, 
-        //setSelectedValue, 
-        setCurrentDay,
         loadNextPage,
         olderCommit, 
-        loadPreviousPage,
-        setReloadQuery,
         currentDay,
         setStartTime,
         loading,
         setLoading,
-        } = TimeTravelControl() 
+        } = useTimeTravel() 
 
     useEffect(() => { // when new commit logs are loaded on click of previous or next 
         if(dataProvider.length > 0) {
             setLoading(false)
         }
     }, [dataProvider])
+
+    useEffect(()=>{
+      if(refreshTime){
+        setStartTime(refreshTime,true)
+      }
+    },[refreshTime])
 
     //const [reportAlert, setReportAlert] = useState(false)
 
@@ -53,20 +50,6 @@ export const TimeTravel = ({show}) => {
          }
     }
 
-   /* useEffect(() => {
-        if(chosenCommit && setHead){
-            setHead(branch, chosenCommit)
-            let message = `The state of data product has been set to date ${chosenCommit.label}`
-            setReportAlert(<Alerts message={message} type={TERMINUS_SUCCESS} onCancel={setReportAlert}/>)
-         }
-    }, [chosenCommit])*/
-
-    // useEffect(() => {
-    //     if(show){
-    //         setReloadQuery(Date.now())
-    //     }
-    // }, [show])
-
 
     const TimelineElements = () => {
         if(!dataProvider) return <div/>

packages/tdb-dashboard/src/components/TimeTravelContainer.js

@@ -1,14 +1,15 @@
-import React from "react"
+import React, {useState} from "react"
 import {Card, Button} from "react-bootstrap"
 import {WOQLClientObj} from '../init-woql-client'
 import {AiOutlineClose, AiOutlineRollback} from "react-icons/ai"
 import {TimeTravel} from "./TimeTravel"
 
 export const TimeTravelContainer = ({show, setShowTimeTravel}) => { 
     const {branch,setHead}=WOQLClientObj()
-
+    const [needRefresh,setNeedrefresh] = useState(false)
     const goToLatestCommit = () => {
-      setHead("main", { commit: false, time: false });
+      setHead(branch, { commit: false, time: false });
+      setNeedrefresh(Date.now())
     };
 
     let sliderClass = 'time-travel-slider'
@@ -21,7 +22,7 @@ export const TimeTravelContainer = ({show, setShowTimeTravel}) => {
                 <Card.Header className="d-flex">
                     <h6 className="mr-4 mt-2 w-100 float-left">Time travel on branch  -  <strong className="text-success">{branch}</strong></h6>
                     <div className="float-right w-100 text-right">
-                        <Button variant="light" className="mr-3" title={"Go to the latest commit of main branch"} onClick={(e) => goToLatestCommit()}>
+                        <Button variant="light" className="mr-3" title={`Go to the latest commit of ${branch} branch`} onClick={(e) => goToLatestCommit()}>
                             <AiOutlineRollback />
                         </Button>
                         <Button variant="light" className="mr-3" title={"Close Time Travel View"} onClick={(e) => setShowTimeTravel(false)}>
@@ -30,7 +31,7 @@ export const TimeTravelContainer = ({show, setShowTimeTravel}) => {
                     </div>
                 </Card.Header>
                 <Card.Body>
-                   {show && <TimeTravel show={show}/>}
+                   {show && <TimeTravel refreshTime={needRefresh}/>}
                 </Card.Body>
         </Card>
     </div>

packages/tdb-dashboard/src/components/layout/TDBToggleButtonGroup.js

@@ -14,7 +14,7 @@ export const TDBToggleButtonGroup = (props) => {
 
     return <ToggleButtonGroup type="radio" name="options" value={props.selected} >
             {config.buttons.map((item) => 
-                  <ToggleButton key={`item__${item.id}`} value={item.id} key={item.id}
+                  <ToggleButton key={`item__${item.id}`} value={item.id}
                     id={item.id} className="btn-light btn-sm mt-1" onClick={(e)=>handleOnClick(item.id)} >
                     {item.icon && <i className={item.icon}/>}
                     {item.label}

packages/tdb-dashboard/src/components/utils.js

@@ -303,8 +303,11 @@ export const status = {
 
 /** just get change request ID, remove "Changerequest/" from ID */
 export function extractID(id) {
-    let str= id.split("/") 
-    return str[1]
+    if(typeof id === "string"){
+        let str= id.split("/") 
+        return str[1]
+    }
+    return ""
 }
 
 /** sorts alphabetically  */

packages/tdb-dashboard/src/hooks/ChangeRequest.js

@@ -37,6 +37,22 @@ export function ChangeRequest(){
         }
     }
 
+    const addNewMessage = async(message, crID = false) =>{
+        try{
+            setLoading(true)
+            const payload = {message}
+            const currentCR = crID 
+            const changeRequestDoc = await woqlClient.sendCustomRequest("POST", `${getUrl()}/${currentCR}/messages`,payload)
+            return changeRequestDoc
+        }catch(err){ 
+            const errMessage = formatErrorMessage(err)
+            setError(errMessage)
+            return false
+        }finally{
+            setLoading(false)
+        }  
+    }
+
     const updateChangeRequestStatus = async(message, status="Submitted", crID = false) =>{
         try{
             setLoading(true)
@@ -113,6 +129,7 @@ export function ChangeRequest(){
     return {
         loading,
         setError,
+        addNewMessage,
         errorMessage,
         changeRequestList,
         createChangeRequest,

packages/tdb-dashboard/src/hooks/TimeTravelControl.js renamed to packages/tdb-dashboard/src/hooks/useTimeTravel.js

@@ -10,19 +10,22 @@ const QUERY_TYPE_LOAD = 'QUERY_TYPE_LOAD';
 const QUERY_TYPE_PREVIOUS = 'QUERY_TYPE_PREVIOUS';
 const QUERY_TYPE_NEXT = 'QUERY_TYPE_NEXT';
 
-export const TimeTravelControl = (limit=5) => {
+export const useTimeTravel = (limit=5) => {
     const {woqlClient, branch, chosenCommit,setHead} = WOQLClientObj()
     if(!woqlClient) return ""
      const dataProduct = woqlClient.db()
 
     const [report, setError] = useState(false)
     // type Date 
-    const currentDay =  new Date()
-    if(chosenCommit && chosenCommit.time)currentDay.setTime(chosenCommit.time*1000) 
+    const startcurrentDay =  new Date()
+    // If there is a commit selected I add 6 second to the time
+    // because the query is less then or he not get the selected one
+    if(chosenCommit && chosenCommit.time)startcurrentDay.setTime((chosenCommit.time*1000)+6000)
    //Unix timestamp (in seconds)
-    const currentStartTime = Math.floor(+currentDay/1000) //currentDay.unix();
+    const currentStartTime = Math.floor(+startcurrentDay/1000)
     const [olderCommit,setOlderCommit] = useState(true);
     const [currentPage, setCurrentPage] = useState(0);
+    const [currentDay, setUpdateCurrentDay] = useState(startcurrentDay);
     const [startTime, setUpdateStartTime] = useState(currentStartTime);
     const [gotoPosition,setGotoPosition] = useState(null);
     const [reloadQuery,setReloadQuery] = useState(0);
@@ -87,6 +90,8 @@ export const TimeTravelControl = (limit=5) => {
                     else queryObj = WOQL.lib().commits(branch, limit,currentPage);
             } 
             const tmpWoqlClient =  woqlClient.copy()
+            // I should reset the commit or I see only a subset of commits 
+            tmpWoqlClient.ref(null)
 
             tmpWoqlClient.query(queryObj).then((result) => {
                 if (result.bindings) {
@@ -214,16 +219,21 @@ export const TimeTravelControl = (limit=5) => {
     //    setReloadQuery(Date.now());
     }
 
-    const setStartTime=(date)=>{
+    const setStartTime=(date,resetday)=>{
         setCurrentPage(0);
         setGotoPosition(null)
         //setCurrentCommit(null)
-        const unixTime = (Math.floor(+date/1000)+86400) //time.add(1,'day').unix();
+        const unixTime = (Math.floor(+date/1000)+86400)
         if(unixTime !==startTime) setDataProviderValues({dataProvider:[],selectedValue:0});
         if(chosenCommit && chosenCommit.time){
             //reset the commit
             setHead(branch, {})
         }
+        if(resetday){
+            const tmpCurrentDay = new Date()
+            tmpCurrentDay.setTime(date)
+            setUpdateCurrentDay(tmpCurrentDay+6000)
+        }
         setUpdateStartTime(unixTime)
     }