\n \n \n \n
\n \r\n {comment.length}/{MAX_CHARS}\r\n
\r\n }\r\n \r\n );\r\n\r\n}","import React, { useEffect } from 'react';\r\n\r\nconst NoPrintPage = () => {\r\n useEffect(() => {\r\n const mediaQueryList = window.matchMedia('print');\r\n let styleTag;\r\n\r\n function changePrintStyles(mql) {\r\n if(mql.matches) {\r\n styleTag = document.createElement('style');\r\n styleTag.innerHTML = 'body * { display: none; }';\r\n document.head.appendChild(styleTag);\r\n } else {\r\n styleTag && document.head.removeChild(styleTag);\r\n }\r\n }\r\n\r\n // Using addEventListener instead of deprecated addListener\r\n mediaQueryList.addEventListener('change', changePrintStyles);\r\n\r\n return () => {\r\n // Using removeEventListener instead of deprecated removeListener\r\n mediaQueryList.removeEventListener('change', changePrintStyles);\r\n }\r\n }, []);\r\n\r\n return \r\n}\r\n\r\nexport default NoPrintPage;","import React, { useState } from 'react';\r\nimport './RevisionScheduler.css'\r\n\r\nexport default function RevisionSchedulerButtonsAndTextBox({OnRevisionScheduleEvent, revisionSchedule})\r\n{\r\n const initialOffset = revisionSchedule ? revisionSchedule.PreviousOffset : 0;\r\n const [selectedOffset, setSelectedOffset] = useState(null);\r\n function OnButtonClick(offset)\r\n {\r\n setSelectedOffset(prevOffset => {\r\n var nextRevisionDate = new Date();\r\n if(prevOffset === offset)\r\n {\r\n // revert\r\n let revertdate = new Date(revisionSchedule.PreviousDateOfRevision);\r\n revertdate.setDate(revertdate.getDate() + initialOffset);\r\n OnRevisionScheduleEvent(revertdate, initialOffset, true);\r\n return null;\r\n }\r\n nextRevisionDate.setDate(new Date().getDate() + offset);\r\n OnRevisionScheduleEvent(nextRevisionDate, offset, false);\r\n return offset;\r\n })\r\n }\r\n function onCustomInput(Offset)\r\n {\r\n let offset = parseInt(Offset);\r\n if(isNaN(offset) || offset<=0)\r\n offset=0;\r\n // At least once a year you should see the topic\r\n if(offset>=365)\r\n offset=365\r\n var nextRevisionDate = new Date();\r\n nextRevisionDate.setDate(new Date().getDate() + offset)\r\n OnRevisionScheduleEvent(nextRevisionDate, offset);\r\n setSelectedOffset(null);\r\n }\r\n const buttonValues = [1, 3, 7, 14, 30, 60, 90];\r\n\r\n return(\r\n \r\n \r\n
\r\n );\r\n\r\n}","import React, { useRef } from 'react'\r\nimport {useState, useEffect} from \"react\";\r\nimport axios from 'axios';\r\nimport { ApiKey, dataUrl, stylesFS, HighlightSvg, CommentSvg} from '../config.js'\r\nimport CommentBox from './CommentBox.js';\r\nimport Subscribe from './Subscribe';\r\nimport NoPrintPage from './NoPrint'\r\nimport Spinner from './Spinner';\r\nimport ReactQuill from 'react-quill';\r\nimport 'react-quill/dist/quill.snow.css';\r\nimport './ContentPage.css'\r\nimport PanZoom from 'react-image-pan-zoom-rotate';\r\nimport ContentProtect from './ContentProtect.js';\r\nimport RevisionSchedulerButtonsAndTextBox from './RevisionScheduler.js';\r\nvar selectionmodifstate = {\r\n highlight: 1,\r\n comment: 2,\r\n removehighlight: 4,\r\n removecomment: 8\r\n}\r\n\r\n\r\nexport default function ContentPage({ backToLogin, subject, tK, topic, type, saveState, TopicsList, LoadContentPage, revisions, onRevisionsUpdate, navigationParams}) {\r\n const [contenthtml, setContentHtml] = useState(null);\r\n const [nextTopic, setNextTopic] = useState(null);\r\n const [prevTopic, setPrevTopic] = useState(null);\r\n const [fromSearchPagethenscrollto, setfromSearchPagethenscrollto] = useState(null);\r\n\r\n\r\n useEffect(()=>{\r\n if(TopicsList!==null)\r\n for (var i = 0; i < TopicsList.length; i++) {\r\n if(topic===TopicsList[i].Topic)\r\n {\r\n if(i!==0)\r\n setPrevTopic(TopicsList[i-1].Topic);\r\n if(i!==TopicsList.length-1)\r\n setNextTopic(TopicsList[i+1].Topic);\r\n break;\r\n }\r\n }\r\n var req = {\r\n email: localStorage.getItem('user'),\r\n method: 'GetContent',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n //var data = JSON.parse(resp.data);\r\n //todo:: redirect to payment page.\r\n setContentHtml(resp.data);\r\n }).catch(err => backToLogin());\r\n }, []);\r\n\r\n\r\n function ScrollToBasedOnNavigationParams()\r\n { \r\n const paragraphs = document.getElementsByTagName('span');\r\n\r\n // Iterate over each paragraph and find the first match\r\n for ( let i = 0; i< paragraphs.length; i++) {\r\n if (paragraphs[i].textContent.toLowerCase().includes(navigationParams)) {\r\n let id = paragraphs[i].id;\r\n // Calculate position to scroll to\r\n setfromSearchPagethenscrollto(id);\r\n break;\r\n }\r\n }\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if(!navigationParams)\r\n return;\r\n // required for safari.\r\n const timer = setTimeout(() => {\r\n ScrollToBasedOnNavigationParams();\r\n }, 500);\r\n // Cleanup timeout\r\n return () => {\r\n clearTimeout(timer);\r\n };\r\n }, [contenthtml]);\r\n\r\n useEffect(() => {\r\n if(fromSearchPagethenscrollto!=null)\r\n {\r\n document.getElementById(fromSearchPagethenscrollto).classList.add('SearchHighlight');\r\n document.getElementById(fromSearchPagethenscrollto).scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center'});\r\n const timer = setTimeout(() => {\r\n document.getElementById(fromSearchPagethenscrollto).classList.remove('SearchHighlight'); \r\n }, 3000);\r\n return () => clearTimeout(timer);\r\n } \r\n }, [fromSearchPagethenscrollto]);\r\n\r\n return (\r\n //\r\n \r\n {buttonValues.map(value => (\r\n \r\n ))}\r\n
\r\n {revisionSchedule && parseInt(revisionSchedule.RevisionCounter)>1 && onCustomInput(e.target.value)}>\r\n \r\n
\r\n ( Revised for {(parseInt(revisionSchedule.RevisionCounter) - 1).toString()} time(s) and last revised on {new Date (revisionSchedule.PreviousDateOfRevision).toLocaleDateString('en-GB')})
}\r\n {revisionSchedule && revisionSchedule.NextRevisionDate && ( Revision scheduled for {new Date (revisionSchedule.NextRevisionDate).toLocaleDateString('en-GB')})
}\r\n \r\n \r\n
\r\n \r\n
\r\n Beginner
\r\n Expert
\r\n \r\n {contenthtml ? (contenthtml.Locked ? {onCPMenuItem(index)}} >{heading.innerText.trim()} ));\r\n }\r\n function GetRevisionNotesAndShowThem()\r\n {\r\n var req = {\r\n email: saveemail.current,\r\n method: 'GetRevisionNotes',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic,\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n setValue(resp.data);\r\n }).catch(err => console.log(err));\r\n }\r\n function GetHighlightsRevisionScheduleCommentsAndShowThem()\r\n {\r\n var req = {\r\n email: localStorage.getItem('user'),\r\n method: 'GetHighlights',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic,\r\n Type: type\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n // Highlight is just a string object while comment is [string, string] object\r\n // so in merged list we have highlight stored as [string, null]\r\n let highlightCommentMergedList = [];\r\n function highlightCommentsort(item1, item2)\r\n {\r\n const highlight1 = item1[0].split(',');\r\n const highlight2 = item2[0].split(',');\r\n for (let i = 0; i < 4; i++) {\r\n if(Number(highlight2[i])!==Number(highlight1[i]))\r\n return Number(highlight2[i]) - Number(highlight1[i]);\r\n }\r\n }\r\n const highlightsres = axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n setrevisionSchedule(resp.data.RevisionSchedule ? {NextRevisionDate: resp.data.RevisionSchedule.NextRevisionDate, PreviousOffset: resp.data.RevisionSchedule.Offset, RevisionCounter : resp.data.RevisionSchedule.RevisionCounter, PreviousDateOfRevision: resp.data.RevisionSchedule.PreviousDateOfRevision }: null);\r\n resp.data.result.map((item) => highlightCommentMergedList.push([item, null]));\r\n }).catch(err => console.log(err));\r\n var commentreq = {\r\n email: localStorage.getItem('user'),\r\n method: 'GetComments',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic,\r\n }\r\n };\r\n const commentsres = axios.post(dataUrl, commentreq, { withCredentials: true, headers:headers}).then(resp => {\r\n resp.data.map((item) => highlightCommentMergedList.push([item[0], item[1]]));\r\n\r\n }).catch(err => console.log(err));\r\n Promise.all([highlightsres, commentsres])\r\n .then(() => {\r\n highlightCommentMergedList.sort(highlightCommentsort);\r\n highlightCommentMergedList.map((item) => ShowHighlightOrComment(item[0], item[1]));\r\n });\r\n\r\n }\r\n function ShowHighlightOrComment(valuelocal, comment=null)\r\n {\r\n var newRangeObjectLocal = document.createRange();\r\n const highlight = valuelocal.split(',');\r\n try{\r\n newRangeObjectLocal.setStart(document.getElementById(Number(highlight[0])).firstChild, Number(highlight[2]));\r\n newRangeObjectLocal.setEnd(document.getElementById(Number(highlight[1])).firstChild, Number(highlight[3]));\r\n }\r\n catch{\r\n return;\r\n }\r\n var startNode = newRangeObjectLocal.startContainer;\r\n var endNode = newRangeObjectLocal.endContainer;\r\n var startIndex = newRangeObjectLocal.startOffset;\r\n var endIndex = newRangeObjectLocal.endOffset;\r\n\r\n if(startNode.isSameNode(endNode))\r\n {\r\n var spanHighlight = document.createElement('span');\r\n var newRangeObjectLocal2 = document.createRange();\r\n spanHighlight.className = comment!=null ? \"Comment showcommentpin\" : 'Highlight';;\r\n var index = SelectionToSaveintoList(startNode, endNode, startIndex, endIndex, newRangeObjectLocal);\r\n spanHighlight.setAttribute(comment!=null ? \"commentreference\" :\"highlightreference\", index.toString());\r\n // already highlighted cannot be highlighted again since no selection can be made.\r\n newRangeObjectLocal.surroundContents(spanHighlight);\r\n newRangeObjectLocal2.setStart(spanHighlight.firstChild, 0);\r\n newRangeObjectLocal2.setEnd(spanHighlight.firstChild, spanHighlight.firstChild.nodeValue.length);\r\n if(comment!=null)\r\n commentsToBeSavedtoDB.current.set(index.toString() , {range: newRangeObjectLocal2, comment: comment });\r\n else\r\n highlightsToBeSavedtoDB.current.set(index.toString() , newRangeObjectLocal2);\r\n return;\r\n }\r\n\r\n var _iterator = document.createNodeIterator(\r\n newRangeObjectLocal.commonAncestorContainer,\r\n NodeFilter.SHOW_ALL, // pre-filter\r\n {\r\n // custom filter\r\n // Already selected then no reselection and overlap is treated as two objects.\r\n acceptNode: function (node) {\r\n return newRangeObjectLocal.intersectsNode(node) && node.nodeValue!= null && node.nodeValue.trim()!=='' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;\r\n }\r\n }\r\n );\r\n var _nodes = [];\r\n // If there is already a highlight and we select over it then we should not allow.\r\n // We cannot delete the existing highlight that will take user by surprise.\r\n while (_iterator.nextNode()) {\r\n if (_nodes.length === 0 && _iterator.referenceNode !== startNode)\r\n {\r\n continue;\r\n }\r\n // Already highlighted node.\r\n _nodes.push(_iterator.referenceNode);\r\n if (_iterator.referenceNode === endNode) \r\n {\r\n break;\r\n }\r\n }\r\n let newRangeObjectMultiLocal = document.createRange();\r\n let indexMultiLocal = SelectionToSaveintoList(startNode, \r\n endNode, \r\n startIndex, \r\n endIndex, newRangeObjectLocal);\r\n for(var i = 0; i<_nodes.length; i++)\r\n {\r\n let rangeLocal = document.createRange();\r\n let spanHighlightLocal = document.createElement('span');\r\n spanHighlightLocal.className = comment!=null ? 'Comment' : 'Highlight';\r\n if(i===0)\r\n {\r\n if( comment!=null )\r\n spanHighlightLocal.className += ' showcommentpin';\r\n rangeLocal.setStart(startNode, startIndex);\r\n rangeLocal.setEnd(startNode, startNode.nodeValue.length);\r\n }\r\n else if(i===_nodes.length-1)\r\n {\r\n rangeLocal.setStart(endNode, 0);\r\n rangeLocal.setEnd(endNode, endIndex);\r\n }\r\n else\r\n {\r\n if(_nodes[i].nodeType===document.TEXT_NODE)\r\n {\r\n rangeLocal.setStart(_nodes[i], 0);\r\n rangeLocal.setEnd(_nodes[i], _nodes[i].nodeValue.length);\r\n }\r\n else if(_nodes[i].nodeType===document.ELEMENT_NODE)\r\n {\r\n\r\n _nodes[i].parentNode.insertBefore(spanHighlightLocal, _nodes[i]);\r\n spanHighlightLocal.appendChild(_nodes[i]);\r\n for(var childMulti=spanHighlight.firstChild; childMulti!==null; childMulti=childMulti.nextSibling) {\r\n newRangeObjectMultiLocal.selectNode(childMulti);\r\n } \r\n\r\n continue;\r\n }\r\n }\r\n rangeLocal.surroundContents(spanHighlightLocal);\r\n if(i===0)\r\n {\r\n newRangeObjectMultiLocal.setStart(spanHighlightLocal.firstChild, 0);\r\n }\r\n if(i===_nodes.length-1)\r\n {\r\n newRangeObjectMultiLocal.setEnd(spanHighlightLocal.firstChild, spanHighlightLocal.firstChild.nodeValue.length);\r\n }\r\n spanHighlightLocal.setAttribute(comment!=null ? 'commentreference' : 'highlightreference', indexMultiLocal); \r\n /*for(let childMulti=spanHighlightLocal.firstChild; childMulti!==null; childMulti=childMulti.nextSibling) {\r\n newRangeObjectMultiLocal.selectNode(childMulti);\r\n }*/ \r\n }\r\n if(comment!==null)\r\n commentsToBeSavedtoDB.current.set(indexMultiLocal.toString() , {range: newRangeObjectMultiLocal, comment: comment});\r\n else\r\n highlightsToBeSavedtoDB.current.set(indexMultiLocal.toString() , newRangeObjectMultiLocal);\r\n highlightsToBeSavedtoDB.current.set(indexMultiLocal.toString() , newRangeObjectMultiLocal);\r\n return;\r\n \r\n }\r\n function SaveRevisionNotesToDB()\r\n {\r\n if(bRevisionNotesChanged.current===false)\r\n return Promise.resolve();;\r\n var req = {\r\n email: saveemail.current,\r\n method: 'SaveRevisionNotes',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic,\r\n RevisionNotes: RNValue.current\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n return axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n //var data = JSON.parse(resp.data);\r\n //todo:: redirect to payment page.\r\n bRevisionNotesChanged.current = false;\r\n console.log(req);\r\n }).catch(err => console.log(err));\r\n \r\n }\r\n function SaveRevisionSchedule()\r\n {\r\n if(bRevisionScheduleChanged.current===false)\r\n return Promise.resolve();\r\n let separator = '^';\r\n var req = {\r\n email: saveemail.current,\r\n method: 'SaveRevisionSchedule',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic,\r\n Type: type,\r\n NextRevisionDate: revisionScheduleref.current.NextRevisionDate,\r\n Offset: revisionScheduleref.current.Offset\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n return axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n //var data = JSON.parse(resp.data);\r\n //todo:: redirect to payment page.\r\n bRevisionScheduleChanged.current = false;\r\n let newState = [...revisions];\r\n\r\n // Update the specific index with the new value\r\n const revisionpage = subject + separator + tK.toLowerCase() + separator + topic + separator + type;\r\n let foundIndex = newState.findIndex(map => map['Navigation'] === revisionpage);\r\n if(foundIndex===-1)\r\n newState.push({Navigation: revisionpage, NextRevisionDate: new Date(revisionScheduleref.current.NextRevisionDate).toISOString(), Offset: revisionScheduleref.current.Offset, PreviousDateOfRevision: new Date().toISOString(), RevisionCounter: 1});\r\n else{\r\n newState[foundIndex].NextRevisionDate = new Date(revisionScheduleref.current.NextRevisionDate).toISOString();\r\n newState[foundIndex].Offset = revisionScheduleref.current.Offset;\r\n newState[foundIndex].PreviousDateOfRevision = new Date().toISOString();\r\n newState[foundIndex].RevisionCounter = (parseInt(newState[foundIndex].RevisionCounter)+1).toString();\r\n }\r\n // Update the state with the new state\r\n onRevisionsUpdate(newState);\r\n }).catch(err => console.log(err));\r\n }\r\n function SaveHighlgihtsToDB()\r\n {\r\n if(bHighlightsChanged.current===false)\r\n return Promise.resolve();;\r\n //Update all the highlights in DB\r\n let highlightList = [];\r\n highlightsToBeSavedtoDB.current.forEach(function(valuelocal, key) {highlightList.push(key);});\r\n var req = {\r\n email: saveemail.current,\r\n method: 'SaveHighlights',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic,\r\n Highlights: highlightList\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n return axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n //var data = JSON.parse(resp.data);\r\n //todo:: redirect to payment page.\r\n bHighlightsChanged.current = false;\r\n console.log(req);\r\n }).catch(err => console.log(err));\r\n }\r\n function SaveCommentsToDB()\r\n {\r\n if(bCommentsChanged.current===false)\r\n return Promise.resolve();\r\n //Update all the highlights in DB\r\n let commentList = [];\r\n commentsToBeSavedtoDB.current.forEach(function(valuelocal, key) {commentList.push([key, valuelocal.comment]);});\r\n var req = {\r\n email: saveemail.current,\r\n method: 'SaveComments',\r\n subject: subject,\r\n params: {\r\n TK: tK,\r\n Topic: topic,\r\n Comments: commentList\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n return axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n //var data = JSON.parse(resp.data);\r\n //todo:: redirect to payment page.\r\n bCommentsChanged.current = false;\r\n //console.log(req);\r\n }).catch(err => console.log(err));\r\n }\r\n const OnPageScroll = () => {\r\n if (window.getSelection) {window.getSelection().removeAllRanges();}\r\n else if (document.selection) {document.selection.empty();}\r\n setContentContextMenu({visible:false, type: {highlightstate: 0, highlightreference: null, commentstate:0, commentreference: null}});\r\n };\r\n useEffect(()=> {\r\n if (screenOrientationWarningTimerId) {\r\n clearTimeout(screenOrientationWarningTimerId); // Clear any existing timer\r\n }\r\n if(screenOrientation===\"landscape\")\r\n {\r\n document.documentElement.style.marginRight = \"25%\";\r\n setImageSrc(null);\r\n setOpenMenu(true);\r\n setScreenOrientationWarning(false);\r\n }\r\n else\r\n {\r\n setScreenOrientationWarning(true);\r\n document.documentElement.style.marginRight = \"0%\";\r\n const newTimerId = setTimeout(() => {setScreenOrientationWarning(false)}, 7000);\r\n setScreenOrientationWarningTimerId(newTimerId);\r\n }\r\n\r\n }, [screenOrientation] );\r\n\r\n const handleImgClick = event => {\r\n if(screenOrientation===\"portrait\")\r\n return;\r\n if(event.target.tagName === 'IMG') {\r\n setImageSrc(event.target.src);\r\n }\r\n }\r\n\r\n const closeImageViewer = () => {\r\n setImageSrc(null);\r\n }\r\n const saveToDb = async () => {\r\n console.log(\"saving data\");\r\n await SaveRevisionNotesToDB();\r\n await SaveHighlgihtsToDB();\r\n await SaveRevisionSchedule();\r\n await SaveCommentsToDB();\r\n };\r\n\r\n\r\n\r\n\r\n\r\n useEffect(() => {\r\n\r\n const checkOrientation = () => {\r\n setScreenOrientation(window.innerHeight > window.innerWidth ? 'portrait' : 'landscape');\r\n };\r\n window.addEventListener('resize', checkOrientation);\r\n \r\n const handleBlur = () => {\r\n // we can do it with state vars but want to make it with JS for better protection.\r\n setShowContentProtection(true);\r\n }\r\n const handleFocus = () => \r\n {\r\n setShowContentProtection(false);\r\n\r\n }\r\n\r\n window.addEventListener('blur', handleBlur);\r\n window.addEventListener('focus', handleFocus);\r\n checkOrientation();\r\n var head = document.head;\r\n var link = document.createElement(\"link\");\r\n\r\n link.type = \"text/css\";\r\n link.rel = \"stylesheet\";\r\n link.href = stylePath.current + \"?version=\" + Math.floor(Math.random()*999999999).toString();\r\n link.async = true;\r\n\r\n head.appendChild(link);\r\n var menulist = [...document.querySelectorAll('h1[class^=CivilsCode], p span[class^=CivilsCodeHeading1Char], h2[class^=CivilsCode], p span[class^=CivilsCodeHeading2Char]')];\r\n if(menulist.length!==0)\r\n setnavmenu(HtmlList(menulist));\r\n else // select only revision notes.\r\n setContentSBTabState(2)\r\n GetHighlightsRevisionScheduleCommentsAndShowThem();\r\n GetRevisionNotesAndShowThem();\r\n window.addEventListener(\"scroll\", OnPageScroll);\r\n // Todo:: one call instead four calls.\r\n const CleanUp = (event) => {\r\n if(!isSaving)\r\n {\r\n event.preventDefault();\r\n console.log(\"saving data in cleanup\");\r\n setIsSaving(true);\r\n saveToDb().then(() => setIsSaving(false))\r\n event.returnValue = '';\r\n }\r\n }\r\n \r\n window.addEventListener('beforeunload', CleanUp);\r\n if(type!=='PDF2HTML')\r\n {\r\n window.addEventListener('click', handleImgClick);\r\n window.addEventListener('touchstart', handleImgClick);\r\n }\r\n\r\n // Get user information from the server and display.\r\n\r\n return () => { \r\n window.removeEventListener('blur', handleBlur);\r\n window.removeEventListener('focus', handleFocus);\r\n window.removeEventListener('beforeunload', CleanUp);\r\n window.removeEventListener('resize', checkOrientation)\r\n if (!isSaving) {\r\n console.log(\"saving data\");\r\n setIsSaving(true);\r\n saveToDb() // Function to save data to DB\r\n .then(() => setIsSaving(false));\r\n }\r\n head.removeChild(link); \r\n document.documentElement.style.marginRight = \"0%\";\r\n window.removeEventListener(\"scroll\", OnPageScroll);\r\n window.removeEventListener('blur', handleBlur);\r\n window.removeEventListener('focus', handleFocus);\r\n if(type!=='PDF2HTML')\r\n {\r\n window.removeEventListener('click', handleImgClick);\r\n window.removeEventListener('touchstart', handleImgClick);\r\n }\r\n }\r\n\r\n }, []);\r\n\r\n\r\n function SelectionToSaveintoList(startingNode, endingNode, startingOffset, endingOffset, rangeobject)\r\n {\r\n var start_parent = (() => {\r\n var parent = startingNode.parentElement;\r\n for(; !parent.hasAttribute(\"id\") ; )\r\n {\r\n parent = parent.parentElement;\r\n }\r\n return parent;\r\n })();\r\n var end_parent = (() => {\r\n var parent = endingNode.parentElement;\r\n for(; !parent.hasAttribute(\"id\") ; )\r\n {\r\n parent = parent.parentElement;\r\n }\r\n return parent;\r\n })();\r\n // https://stackoverflow.com/questions/4811822/get-a-ranges-start-and-end-offsets-relative-to-its-parent-container\r\n var preCaretRange = rangeobject.cloneRange();\r\n preCaretRange.selectNodeContents(start_parent);\r\n preCaretRange.setEnd(startingNode, startingOffset);\r\n let start = preCaretRange.toString().length;\r\n preCaretRange = rangeobject.cloneRange();\r\n preCaretRange.selectNodeContents(end_parent);\r\n preCaretRange.setEnd(endingNode, endingOffset);\r\n let end = preCaretRange.toString().length;\r\n var arraylist = [start_parent.getAttribute(\"id\"), end_parent.getAttribute(\"id\"), start, end];\r\n return arraylist.join();\r\n }\r\n function DoneWithContextMenu()\r\n {\r\n setContentContextMenu(prevState => {\r\n return {\r\n visible: false,\r\n type:{\r\n commentstate:0, commentreference:null,\r\n highlightstate:0, highlightreference:null\r\n }\r\n }\r\n }\r\n);\r\n }\r\n\r\n // Todo:: merge highlights and comments so there are no multiple calls to DB. Get in one call and put in one call.\r\n function PerformAction(actionId, type)\r\n {\r\n // Highlight given text\r\n if(actionId===selectionmodifstate.highlight || actionId===selectionmodifstate.comment)\r\n {\r\n if(window.getSelection().toString().trim()==='')\r\n return;\r\n var range = window.getSelection().getRangeAt(0);\r\n var startNode = range.startContainer;\r\n var endNode = range.endContainer;\r\n var startIndex = range.startOffset;\r\n var endIndex = range.endOffset;\r\n if(startNode.isSameNode(endNode))\r\n {\r\n // index correction approach\r\n if(startNode.parentElement.hasAttribute('commentreference') || startNode.parentElement.hasAttribute('highlightreference'))\r\n {\r\n DoneWithContextMenu();\r\n return;\r\n }\r\n var spanHighlight = document.createElement('span');\r\n var newRangeObjectLocal = document.createRange();\r\n spanHighlight.className = actionId===selectionmodifstate.comment ? \"Comment showcommentpin\" : 'Highlight';\r\n var index = SelectionToSaveintoList(startNode, endNode, startIndex, endIndex, range);\r\n spanHighlight.setAttribute(actionId===selectionmodifstate.comment ? 'commentreference': 'highlightreference', index.toString());\r\n // already highlighted cannot be highlighted again since no selection can be made.\r\n range.surroundContents(spanHighlight);\r\n newRangeObjectLocal.setStart(spanHighlight.firstChild, 0);\r\n newRangeObjectLocal.setEnd(spanHighlight.firstChild, spanHighlight.firstChild.nodeValue.length);\r\n if(actionId===selectionmodifstate.comment)\r\n {\r\n bCommentsChanged.current = true;\r\n commentsToBeSavedtoDB.current.set(index.toString() , {range: newRangeObjectLocal, comment: '' });\r\n }\r\n else\r\n {\r\n bHighlightsChanged.current = true;\r\n highlightsToBeSavedtoDB.current.set(index.toString() , newRangeObjectLocal);\r\n }\r\n window.getSelection().removeAllRanges();\r\n if (actionId===selectionmodifstate.comment)\r\n {\r\n setShowCommentBox({rangeofselection: newRangeObjectLocal, CommentBoxShow: true, reference: index.toString(), comment:''});\r\n }\r\n \r\n DoneWithContextMenu();\r\n return;\r\n }\r\n \r\n \r\n // If start and end nodes are the same\r\n // Each Node will be three nodes 1. textnode before start index 2. highlight span 3. text node after end index.\r\n // start Node.\r\n // Todo:: merge contiguious and have one onClick.\r\n var _iterator = document.createNodeIterator(\r\n range.commonAncestorContainer,\r\n NodeFilter.SHOW_ALL, // pre-filter\r\n {\r\n // custom filter\r\n // Already selected then no reselection and overlap is treated as two objects.\r\n acceptNode: function (node) {\r\n return range.intersectsNode(node) && node.nodeValue!= null && node.nodeValue.trim()!=='' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;\r\n }\r\n }\r\n );\r\n var _nodes = [];\r\n // If there is already a highlight and we select over it then we should not allow.\r\n // We cannot delete the existing highlight that will take user by surprise.\r\n while (_iterator.nextNode()) {\r\n if (_nodes.length === 0 && _iterator.referenceNode !== startNode)\r\n {\r\n continue;\r\n }\r\n // Already highlighted node.\r\n if((((_iterator.referenceNode.nodeType===document.ELEMENT_NODE) && (_iterator.referenceNode.hasAttribute('highlightreference'))) || \r\n ((_iterator.referenceNode.nodeType===document.TEXT_NODE) && (_iterator.referenceNode.parentElement.hasAttribute('highlightreference')))) || \r\n (((_iterator.referenceNode.nodeType===document.ELEMENT_NODE) && (_iterator.referenceNode.hasAttribute('commentreference'))) || \r\n ((_iterator.referenceNode.nodeType===document.TEXT_NODE) && (_iterator.referenceNode.parentElement.hasAttribute('commentreference')))))\r\n {\r\n if(actionId===selectionmodifstate.comment)\r\n {\r\n alert(\"Selection or Part of selection is already highlighted or commented\");\r\n DoneWithContextMenu();\r\n }\r\n else\r\n {\r\n alert(\"Selection or Part of selection is already highlighted or commented\");\r\n DoneWithContextMenu();\r\n }\r\n return;\r\n }\r\n _nodes.push(_iterator.referenceNode);\r\n if (_iterator.referenceNode === endNode) \r\n {\r\n break;\r\n }\r\n }\r\n \r\n // Loop on each of the list of Nodes.\r\n let newRangeObjectMultiLocal = document.createRange();\r\n let indexMultiLocal = SelectionToSaveintoList(startNode, \r\n endNode, \r\n startIndex, \r\n endIndex, range);\r\n for(var i = 0; i<_nodes.length; i++)\r\n {\r\n let rangeLocal = document.createRange();\r\n let spanHighlightLocal = document.createElement('span');\r\n spanHighlightLocal.className = actionId===selectionmodifstate.comment ? 'Comment' : 'Highlight';\r\n if(i===0)\r\n {\r\n if( actionId===selectionmodifstate.comment)\r\n spanHighlightLocal.className += ' showcommentpin';\r\n rangeLocal.setStart(startNode, startIndex);\r\n rangeLocal.setEnd(startNode, startNode.nodeValue.length);\r\n }\r\n else if(i===_nodes.length-1)\r\n {\r\n rangeLocal.setStart(endNode, 0);\r\n rangeLocal.setEnd(endNode, endIndex);\r\n }\r\n else\r\n {\r\n if(_nodes[i].nodeType===document.TEXT_NODE)\r\n {\r\n rangeLocal.setStart(_nodes[i], 0);\r\n rangeLocal.setEnd(_nodes[i], _nodes[i].nodeValue.length);\r\n }\r\n else if(_nodes[i].nodeType===document.ELEMENT_NODE)\r\n {\r\n\r\n _nodes[i].parentNode.insertBefore(spanHighlightLocal, _nodes[i]);\r\n spanHighlightLocal.appendChild(_nodes[i]);\r\n for(var childMulti=spanHighlight.firstChild; childMulti!==null; childMulti=childMulti.nextSibling) {\r\n newRangeObjectMultiLocal.selectNode(childMulti);\r\n } \r\n\r\n continue;\r\n }\r\n }\r\n rangeLocal.surroundContents(spanHighlightLocal);\r\n if(i===0)\r\n {\r\n newRangeObjectMultiLocal.setStart(spanHighlightLocal.firstChild, 0);\r\n }\r\n if(i===_nodes.length-1)\r\n {\r\n newRangeObjectMultiLocal.setEnd(spanHighlightLocal.firstChild, spanHighlightLocal.firstChild.nodeValue.length);\r\n }\r\n spanHighlightLocal.setAttribute(actionId===selectionmodifstate.comment ? 'commentreference' : 'highlightreference', indexMultiLocal); \r\n }\r\n if(actionId===selectionmodifstate.comment)\r\n {\r\n bCommentsChanged.current = true;\r\n commentsToBeSavedtoDB.current.set(indexMultiLocal.toString() , {range: newRangeObjectMultiLocal, comment: \"\"});\r\n setShowCommentBox({rangeofselection: newRangeObjectMultiLocal, CommentBoxShow: true, reference: indexMultiLocal.toString(), comment:''});\r\n }\r\n else\r\n {\r\n bHighlightsChanged.current = true;\r\n highlightsToBeSavedtoDB.current.set(indexMultiLocal.toString() , newRangeObjectMultiLocal);\r\n }\r\n window.getSelection().removeAllRanges();\r\n DoneWithContextMenu();\r\n }\r\n else if(actionId===selectionmodifstate.removehighlight || actionId===selectionmodifstate.removecomment)\r\n {\r\n // Remove Highlight\r\n // Nextstep: store and retreive new range objects directly with key value as reference.\r\n const reference = actionId===selectionmodifstate.removehighlight ? type.highlightreference : type.commentreference;\r\n if(reference===null)\r\n return;\r\n const rangeTobeDeleted = actionId===selectionmodifstate.removehighlight ? highlightsToBeSavedtoDB.current.get(reference) : commentsToBeSavedtoDB.current.get(reference).range;\r\n let iterator = document.createNodeIterator(\r\n rangeTobeDeleted.commonAncestorContainer,\r\n NodeFilter.SHOW_ALL, // pre-filter\r\n {\r\n // custom filter\r\n acceptNode: function (node) {\r\n return rangeTobeDeleted.intersectsNode(node) && node.nodeValue!= null && node.nodeValue.trim()!=='' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;\r\n }\r\n });\r\n let nodes = [];\r\n while (iterator.nextNode()) {\r\n nodes.push(iterator.referenceNode);\r\n }\r\n for(let ii = 0; ii {return {...prev,\r\n NextRevisionDate: NextRevisionDate,\r\n Offset: offset\r\n }});\r\n}\r\nfunction SafariPreventDefault(event)\r\n{\r\n event.stopPropagation();\r\n event.preventDefault();\r\n return false;\r\n}\r\n //todo:: mutation observer JS for undo/redo.\r\n //todo:: on mouseleeave is at error in case of at the margins.\r\n function DisplayActionMenu(event)\r\n {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n var clickX = null;\r\n var clickY = null;\r\n var selection = window.getSelection();\r\n var contentContextInSelection = { visible: true, type:{ highlightstate:0, highlightreference:null, commentstate:0, commentreference:null } };\r\n var selstring = selection.toString().trim();\r\n if(selstring!==\"\")\r\n {\r\n event = event || window.event;\r\n var src = event.target || event.srcElement;\r\n // selection with in a highlight or selection\r\n if(src.hasAttribute(\"highlightreference\") || src.hasAttribute(\"commentreference\"))\r\n {\r\n contentContextInSelection = {\r\n ...contentContextInSelection,\r\n visible: true,\r\n type:{\r\n highlightstate:-1,\r\n highlightreference:null,\r\n commentstate: -1,\r\n commentreference: null\r\n }\r\n }\r\n }\r\n var clientRect = selection.getRangeAt(0).getBoundingClientRect();\r\n clickX = clientRect.x +(clientRect.width/2);\r\n clickY = clientRect.y + (clientRect.height)+16;\r\n }\r\n else{\r\n if (event.touches && event.touches[0]) \r\n {\r\n clickX = event.touches[0].clientX;\r\n clickY = event.touches[0].clientY+16;\r\n } \r\n else if (event.changedTouches && event.changedTouches[0]) \r\n {\r\n clickX = event.changedTouches[0].clientX;\r\n clickY = event.changedTouches[0].clientY+16;\r\n }\r\n else if (event.originalEvent && event.originalEvent.changedTouches[0]) \r\n {\r\n clickX = event.originalEvent.changedTouches[0].clientX;\r\n clickY = event.originalEvent.changedTouches[0].clientY+16;\r\n } \r\n else if (event.clientX && event.clientY) \r\n {\r\n clickX = event.clientX;\r\n clickY = event.clientY+16;\r\n }\r\n }\r\n if(clickX!=null && clickY!= null)\r\n {\r\n contentMenuSection.current.style.left = clickX + 'px';\r\n contentMenuSection.current.style.top = clickY+'px';\r\n }\r\n if(selstring==='')\r\n {\r\n event = event || window.event;\r\n var src = event.target || event.srcElement;\r\n var contentContextMenuState = {visible:false, type: {highlightstate: 0, highlightreference: null, commentstate:0, commentreference: null}};\r\n if(!src.hasAttribute(\"highlightreference\") && !src.hasAttribute(\"commentreference\"))\r\n {\r\n setContentContextMenu(contentContextMenuState);\r\n // Any other click then close comment.\r\n setShowCommentBox(null);\r\n return false;\r\n }\r\n if(src.hasAttribute(\"highlightreference\"))\r\n {\r\n contentContextMenuState = {\r\n ...contentContextMenu,\r\n visible: true,\r\n type:{\r\n highlightstate:selectionmodifstate.highlight,\r\n highlightreference:src.getAttribute(\"highlightreference\"),\r\n commentstate: -1,\r\n commentreference: null\r\n }\r\n };\r\n }\r\n else\r\n {\r\n // if comment is clicked upon then show comment with edit and delete option.\r\n var reference = src.getAttribute(\"commentreference\");\r\n setShowCommentBox({rangeofselection: commentsToBeSavedtoDB.current.get(reference).range, \r\n CommentBoxShow: true, \r\n reference: src.getAttribute(\"commentreference\"), \r\n comment: commentsToBeSavedtoDB.current.get(reference).comment});\r\n }\r\n setContentContextMenu(contentContextMenuState);\r\n return false;\r\n }\r\n \r\n // check if the selection is purely to be highlight removed.\r\n setContentContextMenu(contentContextInSelection);\r\n return false;\r\n }\r\n\r\n \r\n // Table support should be tried.\r\n const optionsEditBox = [\r\n ['bold', 'italic', 'underline', 'strike'], // toggled buttons\r\n ['blockquote', 'code-block'],\r\n [{ 'header': 1 }, { 'header': 2 }], // custom button values\r\n [{ 'list': 'ordered'}, { 'list': 'bullet' }],\r\n [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript\r\n ['link', 'image'], // multimedia.\r\n [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\r\n [{ 'color': [] }, { 'background': ['#4cbf6a'] }], // dropdown with defaults from theme\r\n [{ 'font': [] }],\r\n [{ 'align': [] }], \r\n ['clean'] // remove formatting button\r\n ];\r\n useEffect(() => {\r\n if (imageSrc && panZoomRef.current) {\r\n panZoomRef.current.fittedScale(); // Adjusts the image to fit the screen\r\n }\r\n }, [imageSrc]);\r\n\r\n\r\n\r\n return ( \r\n \r\n return (\r\n extends Path {\n /**\n * A value of arbitrary data associated with this location.\n */\n state: State;\n\n /**\n * A unique string associated with this location. May be used to safely store\n * and retrieve data in some other storage API, like `localStorage`.\n *\n * Note: This value is always \"default\" on the initial location.\n */\n key: string;\n}\n\n/**\n * A change to the current location.\n */\nexport interface Update {\n /**\n * The action that triggered the change.\n */\n action: Action;\n\n /**\n * The new location.\n */\n location: Location;\n\n /**\n * The delta between this location and the former location in the history stack\n */\n delta: number | null;\n}\n\n/**\n * A function that receives notifications about location changes.\n */\nexport interface Listener {\n (update: Update): void;\n}\n\n/**\n * Describes a location that is the destination of some navigation, either via\n * `history.push` or `history.replace`. This may be either a URL or the pieces\n * of a URL path.\n */\nexport type To = string | Partial;\n\n/**\n * A history is an interface to the navigation stack. The history serves as the\n * source of truth for the current location, as well as provides a set of\n * methods that may be used to change it.\n *\n * It is similar to the DOM's `window.history` object, but with a smaller, more\n * focused API.\n */\nexport interface History {\n /**\n * The last action that modified the current location. This will always be\n * Action.Pop when a history instance is first created. This value is mutable.\n */\n readonly action: Action;\n\n /**\n * The current location. This value is mutable.\n */\n readonly location: Location;\n\n /**\n * Returns a valid href for the given `to` value that may be used as\n * the value of an attribute.\n *\n * @param to - The destination URL\n */\n createHref(to: To): string;\n\n /**\n * Returns a URL for the given `to` value\n *\n * @param to - The destination URL\n */\n createURL(to: To): URL;\n\n /**\n * Encode a location the same way window.history would do (no-op for memory\n * history) so we ensure our PUSH/REPLACE navigations for data routers\n * behave the same as POP\n *\n * @param to Unencoded path\n */\n encodeLocation(to: To): Path;\n\n /**\n * Pushes a new location onto the history stack, increasing its length by one.\n * If there were any entries in the stack after the current one, they are\n * lost.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n push(to: To, state?: any): void;\n\n /**\n * Replaces the current location in the history stack with a new one. The\n * location that was replaced will no longer be available.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n replace(to: To, state?: any): void;\n\n /**\n * Navigates `n` entries backward/forward in the history stack relative to the\n * current index. For example, a \"back\" navigation would use go(-1).\n *\n * @param delta - The delta in the stack index\n */\n go(delta: number): void;\n\n /**\n * Sets up a listener that will be called whenever the current location\n * changes.\n *\n * @param listener - A function that will be called when the location changes\n * @returns unlisten - A function that may be used to stop listening\n */\n listen(listener: Listener): () => void;\n}\n\ntype HistoryState = {\n usr: any;\n key?: string;\n idx: number;\n};\n\nconst PopStateEventType = \"popstate\";\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Memory History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A user-supplied object that describes a location. Used when providing\n * entries to `createMemoryHistory` via its `initialEntries` option.\n */\nexport type InitialEntry = string | Partial;\n\nexport type MemoryHistoryOptions = {\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n v5Compat?: boolean;\n};\n\n/**\n * A memory history stores locations in memory. This is useful in stateful\n * environments where there is no web browser, such as node tests or React\n * Native.\n */\nexport interface MemoryHistory extends History {\n /**\n * The current index in the history stack.\n */\n readonly index: number;\n}\n\n/**\n * Memory history stores the current location in memory. It is designed for use\n * in stateful non-browser environments like tests and React Native.\n */\nexport function createMemoryHistory(\n options: MemoryHistoryOptions = {}\n): MemoryHistory {\n let { initialEntries = [\"/\"], initialIndex, v5Compat = false } = options;\n let entries: Location[]; // Declare so we can access from createMemoryLocation\n entries = initialEntries.map((entry, index) =>\n createMemoryLocation(\n entry,\n typeof entry === \"string\" ? null : entry.state,\n index === 0 ? \"default\" : undefined\n )\n );\n let index = clampIndex(\n initialIndex == null ? entries.length - 1 : initialIndex\n );\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function clampIndex(n: number): number {\n return Math.min(Math.max(n, 0), entries.length - 1);\n }\n function getCurrentLocation(): Location {\n return entries[index];\n }\n function createMemoryLocation(\n to: To,\n state: any = null,\n key?: string\n ): Location {\n let location = createLocation(\n entries ? getCurrentLocation().pathname : \"/\",\n to,\n state,\n key\n );\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in memory history: ${JSON.stringify(\n to\n )}`\n );\n return location;\n }\n\n function createHref(to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n let history: MemoryHistory = {\n get index() {\n return index;\n },\n get action() {\n return action;\n },\n get location() {\n return getCurrentLocation();\n },\n createHref,\n createURL(to) {\n return new URL(createHref(to), \"http://localhost\");\n },\n encodeLocation(to: To) {\n let path = typeof to === \"string\" ? parsePath(to) : to;\n return {\n pathname: path.pathname || \"\",\n search: path.search || \"\",\n hash: path.hash || \"\",\n };\n },\n push(to, state) {\n action = Action.Push;\n let nextLocation = createMemoryLocation(to, state);\n index += 1;\n entries.splice(index, entries.length, nextLocation);\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 1 });\n }\n },\n replace(to, state) {\n action = Action.Replace;\n let nextLocation = createMemoryLocation(to, state);\n entries[index] = nextLocation;\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 0 });\n }\n },\n go(delta) {\n action = Action.Pop;\n let nextIndex = clampIndex(index + delta);\n let nextLocation = entries[nextIndex];\n index = nextIndex;\n if (listener) {\n listener({ action, location: nextLocation, delta });\n }\n },\n listen(fn: Listener) {\n listener = fn;\n return () => {\n listener = null;\n };\n },\n };\n\n return history;\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Browser History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A browser history stores the current location in regular URLs in a web\n * browser environment. This is the standard for most web apps and provides the\n * cleanest URLs the browser's address bar.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory\n */\nexport interface BrowserHistory extends UrlHistory {}\n\nexport type BrowserHistoryOptions = UrlHistoryOptions;\n\n/**\n * Browser history stores the location in regular URLs. This is the standard for\n * most web apps, but it requires some configuration on the server to ensure you\n * serve the same app at multiple URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory\n */\nexport function createBrowserHistory(\n options: BrowserHistoryOptions = {}\n): BrowserHistory {\n function createBrowserLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let { pathname, search, hash } = window.location;\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createBrowserHref(window: Window, to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n return getUrlBasedHistory(\n createBrowserLocation,\n createBrowserHref,\n null,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Hash History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A hash history stores the current location in the fragment identifier portion\n * of the URL in a web browser environment.\n *\n * This is ideal for apps that do not control the server for some reason\n * (because the fragment identifier is never sent to the server), including some\n * shared hosting environments that do not provide fine-grained controls over\n * which pages are served at which URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory\n */\nexport interface HashHistory extends UrlHistory {}\n\nexport type HashHistoryOptions = UrlHistoryOptions;\n\n/**\n * Hash history stores the location in window.location.hash. This makes it ideal\n * for situations where you don't want to send the location to the server for\n * some reason, either because you do cannot configure it or the URL space is\n * reserved for something else.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory\n */\nexport function createHashHistory(\n options: HashHistoryOptions = {}\n): HashHistory {\n function createHashLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n } = parsePath(window.location.hash.substr(1));\n\n // Hash URL should always have a leading / just like window.location.pathname\n // does, so if an app ends up at a route like /#something then we add a\n // leading slash so all of our path-matching behaves the same as if it would\n // in a browser router. This is particularly important when there exists a\n // root splat route () since that matches internally against\n // \"/*\" and we'd expect /#something to 404 in a hash router app.\n if (!pathname.startsWith(\"/\") && !pathname.startsWith(\".\")) {\n pathname = \"/\" + pathname;\n }\n\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createHashHref(window: Window, to: To) {\n let base = window.document.querySelector(\"base\");\n let href = \"\";\n\n if (base && base.getAttribute(\"href\")) {\n let url = window.location.href;\n let hashIndex = url.indexOf(\"#\");\n href = hashIndex === -1 ? url : url.slice(0, hashIndex);\n }\n\n return href + \"#\" + (typeof to === \"string\" ? to : createPath(to));\n }\n\n function validateHashLocation(location: Location, to: To) {\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in hash history.push(${JSON.stringify(\n to\n )})`\n );\n }\n\n return getUrlBasedHistory(\n createHashLocation,\n createHashHref,\n validateHashLocation,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region UTILS\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * @private\n */\nexport function invariant(value: boolean, message?: string): asserts value;\nexport function invariant(\n value: T | null | undefined,\n message?: string\n): asserts value is T;\nexport function invariant(value: any, message?: string) {\n if (value === false || value === null || typeof value === \"undefined\") {\n throw new Error(message);\n }\n}\n\nexport function warning(cond: any, message: string) {\n if (!cond) {\n // eslint-disable-next-line no-console\n if (typeof console !== \"undefined\") console.warn(message);\n\n try {\n // Welcome to debugging history!\n //\n // This error is thrown as a convenience, so you can more easily\n // find the source for a warning that appears in the console by\n // enabling \"pause on exceptions\" in your JavaScript debugger.\n throw new Error(message);\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n}\n\nfunction createKey() {\n return Math.random().toString(36).substr(2, 8);\n}\n\n/**\n * For browser-based histories, we combine the state and key into an object\n */\nfunction getHistoryState(location: Location, index: number): HistoryState {\n return {\n usr: location.state,\n key: location.key,\n idx: index,\n };\n}\n\n/**\n * Creates a Location object with a unique key from the given Path\n */\nexport function createLocation(\n current: string | Location,\n to: To,\n state: any = null,\n key?: string\n): Readonly {\n let location: Readonly = {\n pathname: typeof current === \"string\" ? current : current.pathname,\n search: \"\",\n hash: \"\",\n ...(typeof to === \"string\" ? parsePath(to) : to),\n state,\n // TODO: This could be cleaned up. push/replace should probably just take\n // full Locations now and avoid the need to run through this flow at all\n // But that's a pretty big refactor to the current test suite so going to\n // keep as is for the time being and just let any incoming keys take precedence\n key: (to && (to as Location).key) || key || createKey(),\n };\n return location;\n}\n\n/**\n * Creates a string URL path from the given pathname, search, and hash components.\n */\nexport function createPath({\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n}: Partial) {\n if (search && search !== \"?\")\n pathname += search.charAt(0) === \"?\" ? search : \"?\" + search;\n if (hash && hash !== \"#\")\n pathname += hash.charAt(0) === \"#\" ? hash : \"#\" + hash;\n return pathname;\n}\n\n/**\n * Parses a string URL path into its separate pathname, search, and hash components.\n */\nexport function parsePath(path: string): Partial {\n let parsedPath: Partial = {};\n\n if (path) {\n let hashIndex = path.indexOf(\"#\");\n if (hashIndex >= 0) {\n parsedPath.hash = path.substr(hashIndex);\n path = path.substr(0, hashIndex);\n }\n\n let searchIndex = path.indexOf(\"?\");\n if (searchIndex >= 0) {\n parsedPath.search = path.substr(searchIndex);\n path = path.substr(0, searchIndex);\n }\n\n if (path) {\n parsedPath.pathname = path;\n }\n }\n\n return parsedPath;\n}\n\nexport interface UrlHistory extends History {}\n\nexport type UrlHistoryOptions = {\n window?: Window;\n v5Compat?: boolean;\n};\n\nfunction getUrlBasedHistory(\n getLocation: (window: Window, globalHistory: Window[\"history\"]) => Location,\n createHref: (window: Window, to: To) => string,\n validateLocation: ((location: Location, to: To) => void) | null,\n options: UrlHistoryOptions = {}\n): UrlHistory {\n let { window = document.defaultView!, v5Compat = false } = options;\n let globalHistory = window.history;\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n let index = getIndex()!;\n // Index should only be null when we initialize. If not, it's because the\n // user called history.pushState or history.replaceState directly, in which\n // case we should log a warning as it will result in bugs.\n if (index == null) {\n index = 0;\n globalHistory.replaceState({ ...globalHistory.state, idx: index }, \"\");\n }\n\n function getIndex(): number {\n let state = globalHistory.state || { idx: null };\n return state.idx;\n }\n\n function handlePop() {\n action = Action.Pop;\n let nextIndex = getIndex();\n let delta = nextIndex == null ? null : nextIndex - index;\n index = nextIndex;\n if (listener) {\n listener({ action, location: history.location, delta });\n }\n }\n\n function push(to: To, state?: any) {\n action = Action.Push;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex() + 1;\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n\n // try...catch because iOS limits us to 100 pushState calls :/\n try {\n globalHistory.pushState(historyState, \"\", url);\n } catch (error) {\n // If the exception is because `state` can't be serialized, let that throw\n // outwards just like a replace call would so the dev knows the cause\n // https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps\n // https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal\n if (error instanceof DOMException && error.name === \"DataCloneError\") {\n throw error;\n }\n // They are going to lose state here, but there is no real\n // way to warn them about it since the page will refresh...\n window.location.assign(url);\n }\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 1 });\n }\n }\n\n function replace(to: To, state?: any) {\n action = Action.Replace;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex();\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n globalHistory.replaceState(historyState, \"\", url);\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 0 });\n }\n }\n\n function createURL(to: To): URL {\n // window.location.origin is \"null\" (the literal string value) in Firefox\n // under certain conditions, notably when serving from a local HTML file\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297\n let base =\n window.location.origin !== \"null\"\n ? window.location.origin\n : window.location.href;\n\n let href = typeof to === \"string\" ? to : createPath(to);\n invariant(\n base,\n `No window.location.(origin|href) available to create URL for href: ${href}`\n );\n return new URL(href, base);\n }\n\n let history: History = {\n get action() {\n return action;\n },\n get location() {\n return getLocation(window, globalHistory);\n },\n listen(fn: Listener) {\n if (listener) {\n throw new Error(\"A history only accepts one active listener\");\n }\n window.addEventListener(PopStateEventType, handlePop);\n listener = fn;\n\n return () => {\n window.removeEventListener(PopStateEventType, handlePop);\n listener = null;\n };\n },\n createHref(to) {\n return createHref(window, to);\n },\n createURL,\n encodeLocation(to) {\n // Encode a Location the same way window.location would\n let url = createURL(to);\n return {\n pathname: url.pathname,\n search: url.search,\n hash: url.hash,\n };\n },\n push,\n replace,\n go(n) {\n return globalHistory.go(n);\n },\n };\n\n return history;\n}\n\n//#endregion\n","import type { Location, Path, To } from \"./history\";\nimport { invariant, parsePath, warning } from \"./history\";\n\n/**\n * Map of routeId -> data returned from a loader/action/error\n */\nexport interface RouteData {\n [routeId: string]: any;\n}\n\nexport enum ResultType {\n data = \"data\",\n deferred = \"deferred\",\n redirect = \"redirect\",\n error = \"error\",\n}\n\n/**\n * Successful result from a loader or action\n */\nexport interface SuccessResult {\n type: ResultType.data;\n data: any;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Successful defer() result from a loader or action\n */\nexport interface DeferredResult {\n type: ResultType.deferred;\n deferredData: DeferredData;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Redirect result from a loader or action\n */\nexport interface RedirectResult {\n type: ResultType.redirect;\n status: number;\n location: string;\n revalidate: boolean;\n reloadDocument?: boolean;\n}\n\n/**\n * Unsuccessful result from a loader or action\n */\nexport interface ErrorResult {\n type: ResultType.error;\n error: any;\n headers?: Headers;\n}\n\n/**\n * Result from a loader or action - potentially successful or unsuccessful\n */\nexport type DataResult =\n | SuccessResult\n | DeferredResult\n | RedirectResult\n | ErrorResult;\n\ntype LowerCaseFormMethod = \"get\" | \"post\" | \"put\" | \"patch\" | \"delete\";\ntype UpperCaseFormMethod = Uppercase;\n\n/**\n * Users can specify either lowercase or uppercase form methods on `
\r\n \r\n }\r\n
\r\n )\r\n}\r\n\r\nfunction ContentDisplay({contentBody, tK, topic, subject, type, saveState, revisions, onRevisionsUpdate})\r\n{\r\n // store all the transients and commit to database on page exit.\r\n // Load all highlights into this set and while closing the page commit them to DB\r\n // one item commit with change tracking variable.\r\n // So upon showing if there are certain highlights that cannot be shown they can be removed.\r\n //Todo :: reduce the redundancy and promote reusability.\r\n // Todo:: highlight should support comment.\r\n var highlightsToBeSavedtoDB = useRef(new Map());\r\n var commentsToBeSavedtoDB = useRef(new Map());\r\n var bHighlightsChanged = useRef(false);\r\n var bRevisionScheduleChanged = useRef(false);\r\n var bCommentsChanged = useRef(false);\r\n var bRevisionNotesChanged = useRef(false);\r\n var saveemail = useRef(localStorage.getItem('user'));\r\n\r\n // Set inital state of revision notes from DB call.\r\n const stylePath = useRef(stylesFS + (type===\"PDF2HTML\" ? tK.toLowerCase() + '_' + topic + \"/\" : \"\" ) + tK.toLowerCase() + '_' + topic + '.css');\r\n const contentMenuSection = useRef(null);\r\n const [revisionSchedule, setrevisionSchedule] = useState(null);\r\n const revisionScheduleref = useRef(null);\r\n revisionScheduleref.current = revisionSchedule;\r\n const [contentContextMenu, setContentContextMenu] = useState({visible: false, type: {highlightstate: 0, highlightreference: null, commentstate:0, commentreference: null}});\r\n const [openMenu, setOpenMenu] = useState(true);\r\n const [ContentSBTabState, setContentSBTabState] = useState(1);\r\n const [navmenu, setnavmenu] = useState(null);\r\n const [value, setValue] = useState('');\r\n const RNValue = useRef('');\r\n RNValue.current = value;\r\n const [fullScreenChecked, setFullScreenChecked] = useState(false); \r\n const [screenOrientation, setScreenOrientation] = useState('');\r\n const [screenOrientationwarning, setScreenOrientationWarning] = useState(false);\r\n const [screenOrientationWarningTimerId, setScreenOrientationWarningTimerId] = useState(null);\r\n\r\n const [imageSrc, setImageSrc] = useState(\"\");\r\n const panZoomRef = useRef(null);\r\n const [showCommentBox, setShowCommentBox] = useState(false);\r\n const [showContentProtection, setShowContentProtection] = useState(false);\r\n const [isSaving, setIsSaving] = useState(false); // State to track if saving\r\n\r\n\r\n\r\n\r\n function commentBoxOnDeleteComment(reference)\r\n {\r\n\r\n PerformAction( selectionmodifstate.removecomment , {highlightstate: 0, highlightreference: null, commentstate:0, commentreference: reference});\r\n setShowCommentBox(null);\r\n }\r\n function commentBoxOnChangeComment(newcomment, ref)\r\n {\r\n bCommentsChanged.current = true;\r\n const commentObject = commentsToBeSavedtoDB.current.get(ref);\r\n commentObject.comment = newcomment;\r\n }\r\n useEffect(() => {\r\n if (!isSaving) {\r\n setIsSaving(true);\r\n saveToDb() // Function to save data to DB\r\n .then(() => setIsSaving(false));\r\n }\r\n }, [saveState]);\r\n\r\n\r\n \r\n function onCPMenuItem(scrollIndex)\r\n {\r\n document.querySelectorAll('h1[class^=CivilsCode], p span[class^=CivilsCodeHeading1Char], h2[class^=CivilsCode], p span[class^=CivilsCodeHeading2Char]')[scrollIndex].scrollIntoView();\r\n }\r\n\r\n function HtmlList(data)\r\n {\r\n return data.map((heading, index) => ( heading.innerText.trim().length>1 && \r\n {prevTopic && LoadContentPage &&
)\r\n : {LoadContentPage(subject, tK, prevTopic, type, TopicsList)}}>{\"}\r\n {nextTopic && LoadContentPage &&
\r\n {LoadContentPage(subject, tK, nextTopic, type, TopicsList)}}>{\"next>\"}
}\r\n \r\n
\r\n )\r\n}\r\n// type.state 1 -> highlighted //current state\r\n// type.state 2 -> underlined //current state\r\n// type.state 4 -> commented // current state\r\n// action 1 -> highlight\r\n// action 2 -> underline\r\n// action 3 -> comment\r\n// action 4 -> un highlight\r\n// action 5 -> un underline\r\n// action 6 -> un comment\r\n/**\r\n * Using landscape orientation is better!!
}\r\n \r\n
\r\n \r\n
\r\n {setOpenMenu(!openMenu); document.documentElement.style.marginRight = !openMenu && screenOrientation===\"landscape\" ? \"25%\" : \"0%\";}}>\r\n \r\n
\r\n \r\n
\r\n \r\n { navmenu && }\r\n \r\n
\r\n \r\n \r\n {ContentSBTabState===1 && }\r\n {ContentSBTabState===2 &&
\r\n \r\n
\r\n }\r\n \r\n \r\n {setFullScreenChecked(!fullScreenChecked)}}/>\r\n
\r\n \r\n {bRevisionNotesChanged.current = true ;setValue(newstate)}} placeholder={\"Revision Notes\"}/>\r\n
\r\n {setContentContextMenu({...contentContextMenu, visible: false}); ; setShowCommentBox(null);}}>\r\n }\r\n \r\n \r\n
\r\n \r\n {contentContextMenu.visible===true && }\r\n
\r\n {showCommentBox && showCommentBox.CommentBoxShow===true && \r\n
\r\n {PerformAction(type.state&selectionmodifstate.underlined ? 5 : 2, type);}}>\r\n 
\r\n {type.state&selectionmodifstate.underlined ? 'Erase Underline' : 'Underline'}
\r\n */\r\nfunction ContentContextMenu({type, PerformAction})\r\n{\r\nreturn ((type.highlightstate!==-1 || type.commentstate!==-1) && \r\n{type.highlightstate!==-1 &&
)\r\n}\r\n\r\n\r\n","\r\nimport ContentPage from './ContentPage.js';\r\nimport './ContentPageWithBackButton.css';\r\n\r\n\r\nexport default function ContentPageWithBackButton({ backToLogin, subject, tK, topic, type, saveState, onBackButton, TopicsList = null, LoadContentPageForNextPrev = null, revisions=null, onRevisionsUpdate= null, searchstring = null}) {\r\n return (\r\n { event.stopPropagation(); event.preventDefault(); PerformAction(type.highlightstate&selectionmodifstate.highlight ? selectionmodifstate.removehighlight : selectionmodifstate.highlight, type);}} onClick={(event) => {event.stopPropagation(); event.preventDefault(); PerformAction(type.highlightstate&selectionmodifstate.highlight ? selectionmodifstate.removehighlight : selectionmodifstate.highlight, type);}} >\r\n
}\r\n{type.commentstate!==-1 && \r\n {type.highlightstate&selectionmodifstate.highlight ? 'Erase Highlight' : 'Highlight'}\r\n
\r\n { event.stopPropagation(); event.preventDefault(); PerformAction(type.commentstate&selectionmodifstate.comment ? selectionmodifstate.removecomment : selectionmodifstate.comment, type);}} onClick={(event) => {event.stopPropagation(); event.preventDefault(); PerformAction(type.commentstate&selectionmodifstate.comment ? selectionmodifstate.removecomment : selectionmodifstate.comment, type);}} >\r\n
}\r\n\r\n {type.commentstate&selectionmodifstate.comment ? 'Edit Comment' : 'Comment'}\r\n
\r\n\r\n {onBackButton && \r\n
\r\n )\r\n }","import './SearchResults.css';\r\nimport ContentPageWithBackButton from './ContentPageWithBackButton.js'\r\nimport React, { useEffect, useState } from \"react\";\r\nimport SyllabusPage from './SyllabusPage.js';\r\n\r\nexport default function SearchResultsControl({backToLogin, subjects, Results, saveState, revisions, onRevisionsUpdate, searchstring}) {\r\n const [LoadContent, setLoadContent] = useState(null);\r\n const [resultslist, setResultsList] = useState(transformResult(Results));\r\n const [scrollPosition, setScrollPosition] = useState(0);\r\n // we need filtered Syllabus pages components \r\n // On click on item in syllabus page componenets we nned Content page with back button \r\n // On back button restore search results page with syllabus page components.\r\n\r\n function transformResult(results)\r\n {\r\n if(!results)\r\n return null;\r\n\r\n // for search everything is like active.\r\n let transformedData = Results.hits.map((hit, index) => ({\r\n TopicKeyword: hit._source.id.split('_')[0],\r\n IsActive: true,\r\n Type: hit._source.type,\r\n OrderId: index + 1,\r\n Topic: hit._source.id.split('_')[1],\r\n highlight: hit.highlight.content.join(' ')\r\n }));\r\n return transformedData;\r\n }\r\n const keywordMap = new Map();\r\n useEffect(() => {\r\n // todo:: count of number of search is also present in result.\r\n // todo type of content\r\n setResultsList(transformResult(Results));\r\n setLoadContent(null);\r\n }, [Results])\r\n\r\n function onLoadContent(subject, TK, Topic, type)\r\n { \r\n const scrollPosition = window.scrollY;\r\n setScrollPosition( scrollPosition);\r\n // todo:: search for pdf also.\r\n setLoadContent({\r\n subject: subject, \r\n TK: TK, \r\n Topic:Topic,\r\n Type: type\r\n });\r\n }\r\n function onBackButtonFromContent()\r\n {\r\n setLoadContent(null);\r\n setTimeout(() => {\r\n window.scrollTo(0, scrollPosition);\r\n }, 30);\r\n }\r\n function searchTopic(topicelement, TK)\r\n {\r\n return Object.values(topicelement)[0].toLowerCase()===TK.toLowerCase();\r\n }\r\n \r\n function MatchedSubjects(TK)\r\n {\r\n var x = subjects.filter((subject) => {\r\n return subject.Syllabus.some((topicelement) => searchTopic(topicelement, TK))})\r\n return x;\r\n }\r\n // Todo:: log un matched queries.\r\n return (\r\n \r\n \r\n
}\r\n \r\n { LoadContent===null && resultslist ? ( Object.keys(resultslist).length!==0 ? ) : LoadContent==null && resultslist==null ? : <>\r\n }\r\n {\r\n LoadContent && \r\n }\r\n\r\n
\r\n )\r\n \r\n}\r\n\r\n\r\n","import React from 'react'\r\nimport SyllabusPage from './SyllabusPage.js';\r\nimport ContentPageWithBackButton from './ContentPageWithBackButton.js';\r\nimport SearchResultsControl from './SearchResults.js';\r\nimport './MainPage.css';\r\nimport {useState, useEffect} from \"react\";\r\n\r\n\r\nexport default function MainPage({backToLogin, subjects, initialpage, revisions, onRevisionsUpdate})\r\n{\r\n const [saveUserState, setsaveUserState] = useState(false);\r\n const [scrollPosition, setScrollPosition] = useState(0);\r\n const [prevMenuPage, setPrevMenuPage] = useState(null);\r\n\r\n\r\n const [page, setPage] = useState(initialpage);\r\n useEffect(() => {\r\n setPage(initialpage);\r\n\r\n }, [initialpage])\r\n // Doesn't work for safari.\r\n\r\n /*const handleScroll = () => {\r\n setEaseMenu(false);\r\n };*/\r\n // Every 10 min we will try to save state.\r\n useEffect(() => {\r\n // Doesn't work for safari.\r\n //window.addEventListener('scroll', handleScroll);\r\n setPage(initialpage);\r\n \r\n const timer = setInterval(() => {\r\n setsaveUserState(saveUserState => !saveUserState);\r\n }, 10*60*1000);\r\n\r\n\r\n return () => {\r\n clearInterval(timer)\r\n //window.removeEventListener('scroll', handleScroll);\r\n };\r\n\r\n }, [])\r\n \r\n \r\n\r\n function cacheCurrentMenuPage()\r\n {\r\n const scrollPosition = window.scrollY;\r\n setScrollPosition(scrollPosition);\r\n setPrevMenuPage(page);\r\n }\r\n function restorePrevMenuPageAndState()\r\n {\r\n setPage(prevMenuPage);\r\n setTimeout(() => {\r\n window.scrollTo(0, scrollPosition);\r\n }, 30);\r\n }\r\n function onLoadContentPage(subject, TK, Topic, type, TopicListForNxtAndPrev = null)\r\n {\r\n // Only cache menu\r\n if(page.SubjectPage.loadSubjectPage===true)\r\n cacheCurrentMenuPage();\r\n setPage({ \r\n SubjectPage : \r\n {\r\n loadSubjectPage: false, \r\n selectedSub: subject\r\n },\r\n ContentPage : \r\n {\r\n loadContentPage: true, \r\n TK: TK, \r\n Topic:Topic,\r\n Type: type,\r\n TopicListForNxtAndPrev: TopicListForNxtAndPrev\r\n },\r\n SearchResultsPage: \r\n {\r\n loadSearchResultsPage: false,\r\n SearchResults : null\r\n }\r\n });\r\n }\r\n\r\n\r\n function onContentPageBackButton()\r\n {\r\n restorePrevMenuPageAndState();\r\n }\r\n\r\n\r\n\r\n //todo:: props.\r\n return (\r\n \r\n { revision.Navigation.startsWith(sub.SubjectName))}/>\r\n : <>)\r\n // iterate on all the subjects to find a given topic.\r\n ))\r\n ))\r\n }\r\n
:About {Results.hits.length} result(s)
}\r\n {\r\n resultslist.map((result) => (\r\n MatchedSubjects(result.TopicKeyword).map((sub) => (\r\n keywordMap.has(result.TopicKeyword) ? <> : ( keywordMap.set(result.TopicKeyword, true) !== null ? \r\nNo results or too many results
Search Failed!!. Please amend and try again
e.preventDefault()}>\r\n
\r\n )\r\n}","import React, { useEffect, useState } from 'react';\r\nimport \"./IconizedMenu.css\"\r\nimport {localhost} from '../config.js'\r\n/*\r\nIcons are fetched from public bucket and it should be svgs only.\r\nTodo:: all the info should be from Db.\r\n */\r\nconst IconizedMenu = ({subjects, passselectedsub}) => {\r\n const exclusiveIcons = subjects.filter(icon => icon.NeedsSubscription);\r\n const nonExclusiveIcons = subjects.filter(icon => !icon.NeedsSubscription);\r\n const [svgMap, setSvgMap] = useState(new Map());\r\n const [vh, setVh] = useState(window.innerHeight);\r\n\r\n // Handler to call on window resize\r\n // Safari bug of 100vh fix via JS.\r\n function handleResize() {\r\n // Set window's viewport height to state\r\n setVh(window.innerHeight);\r\n }\r\n useEffect(() => {\r\n // Bind the event listener\r\n window.addEventListener('resize', handleResize);\r\n\r\n // Update vh value initially\r\n handleResize();\r\n const fetchSvgs = async () => {\r\n const newMap = new Map();\r\n for (const subject of exclusiveIcons) {\r\n let text = sessionStorage.getItem(subject.SubjectName + '.svg');\r\n if (!text){\r\n const response = await fetch(localhost + subject.SubjectName + '.svg');\r\n text = await response.text();\r\n sessionStorage.setItem(subject.SubjectName + '.svg', text);\r\n }\r\n newMap.set(subject.SubjectName + '.svg', text);\r\n }\r\n for (const subject of nonExclusiveIcons) {\r\n let text = sessionStorage.getItem(subject.SubjectName + '.svg');\r\n if (!text){\r\n const response = await fetch(localhost + subject.SubjectName + '.svg');\r\n text = await response.text();\r\n sessionStorage.setItem(subject.SubjectName + '.svg', text);\r\n }\r\n newMap.set(subject.SubjectName + '.svg', text);\r\n }\r\n setSvgMap(newMap);\r\n };\r\n fetchSvgs();\r\n document.body.style.overflow = 'hidden';\r\n\r\n\r\n return () => {\r\n document.body.style.overflow = 'auto';\r\n window.removeEventListener('resize', handleResize);\r\n }\r\n\r\n }, []);\r\n\r\n // Use vh in your styles\r\n const AlldevicefixforStyle = {\r\n height: `${vh}px`,\r\n };\r\n\r\n return (\r\n \r\n {page.SearchResultsPage.loadSearchResultsPage && }\r\n {page.SubjectPage.loadSubjectPage && }\r\n
\r\n\r\n \r\n revision.Navigation.startsWith(page.SubjectPage.selectedSub.SubjectName))}/>\r\n
}\r\n {page.ContentPage && page.ContentPage.loadContentPage && \r\n
\r\n );\r\n};\r\n\r\nexport default IconizedMenu;","import React,{useState, useEffect} from 'react';\r\nimport './DarkModeToggle.css';\r\n\r\n\r\nexport function ApplyTheme(mode)\r\n{\r\nif(mode)\r\n document.documentElement.className = 'light';\r\nelse\r\n document.documentElement.className = 'dark';\r\n}\r\n// restrictive dark mode will not apply for :root\r\nexport default function DarkModeToggle() {\r\n const [isSunMode, setIsSunMode] = useState(\r\n localStorage.getItem('islightmode') !== null \r\n ? JSON.parse(localStorage.getItem('islightmode')) \r\n : true);\r\n useEffect(()=>{\r\n setIsSunMode(localStorage.getItem('islightmode')!=null ? JSON.parse(localStorage.getItem('islightmode')) : true);\r\n },[]);\r\n\r\n useEffect(()=>{\r\n ApplyTheme(isSunMode);\r\n },[isSunMode]);\r\n\r\n function toggleDarkMode(mode)\r\n {\r\n localStorage.setItem('islightmode', mode);\r\n setIsSunMode(mode);\r\n }\r\n\r\n return (\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Free Resources
\r\n\r\n {nonExclusiveIcons.map(subject => (\r\n \r\n ))}\r\n
\r\n \r\n
\r\n Premium Resources
\r\n\r\n
\r\n \r\n {exclusiveIcons.length>0 ? exclusiveIcons.filter((subject) => !subject.DirectContent).sort((a, b) => a.DisplayName.localeCompare(b.DisplayName)).map(subject => (\r\n \r\n )) :
\r\n COMING SOON
\r\n }\r\n \r\n {exclusiveIcons.length>0 ? exclusiveIcons.filter((subject) => subject.DirectContent).sort((a, b) => a.DisplayName.localeCompare(b.DisplayName)).map(subject => (\r\n \r\n )) :
\r\n COMING SOON
\r\n }\r\n \r\n \r\n
\r\n )\r\n}\r\n","import x from\"react\";import{useRef as U}from\"react\";import{useState as E,useRef as b,useCallback as q}from\"react\";import{useEffect as M,useLayoutEffect as L}from\"react\";var G=typeof window==\"undefined\"?M:L,I=({isPlaying:o,duration:e,startAt:n=0,updateInterval:t=0,onComplete:s,onUpdate:r})=>{let[i,c]=E(n),m=b(0),p=b(n),f=b(n*-1e3),u=b(null),a=b(null),h=b(null),w=g=>{let l=g/1e3;if(a.current===null){a.current=l,u.current=requestAnimationFrame(w);return}let d=l-a.current,C=m.current+d;a.current=l,m.current=C;let k=p.current+(t===0?C:(C/t|0)*t),R=p.current+C,v=typeof e==\"number\"&&R>=e;c(v?e:k),v||(u.current=requestAnimationFrame(w))},$=()=>{u.current&&cancelAnimationFrame(u.current),h.current&&clearTimeout(h.current),a.current=null},y=q(g=>{$(),m.current=0;let l=typeof g==\"number\"?g:n;p.current=l,c(l),o&&(u.current=requestAnimationFrame(w))},[o,n]);return G(()=>{if(r==null||r(i),e&&i>=e){f.current+=e*1e3;let{shouldRepeat:g=!1,delay:l=0,newStartAt:d}=(s==null?void 0:s(f.current/1e3))||{};g&&(h.current=setTimeout(()=>y(d),l*1e3))}},[i,e]),G(()=>(o&&(u.current=requestAnimationFrame(w)),$),[o,e,t]),{elapsedTime:i,reset:y}};var A=(o,e,n)=>{let t=o/2,s=e/2,r=t-s,i=2*r,c=n===\"clockwise\"?\"1,0\":\"0,1\",m=2*Math.PI*r;return{path:`m ${t},${s} a ${r},${r} 0 ${c} 0,${i} a ${r},${r} 0 ${c} 0,-${i}`,pathLength:m}},T=(o,e)=>o===0||o===e?0:typeof e==\"number\"?o-e:0,B=o=>({position:\"relative\",width:o,height:o}),P={display:\"flex\",justifyContent:\"center\",alignItems:\"center\",position:\"absolute\",left:0,top:0,width:\"100%\",height:\"100%\"};var F=(o,e,n,t,s)=>{if(t===0)return e;let r=(s?t-o:o)/t;return e+n*r},W=o=>{var e,n;return(n=(e=o.replace(/^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i,(t,s,r,i)=>`#${s}${s}${r}${r}${i}${i}`).substring(1).match(/.{2}/g))==null?void 0:e.map(t=>parseInt(t,16)))!=null?n:[]},j=(o,e)=>{var u;let{colors:n,colorsTime:t,isSmoothColorTransition:s=!0}=o;if(typeof n==\"string\")return n;let r=(u=t==null?void 0:t.findIndex((a,h)=>a>=e&&e>=t[h+1]))!=null?u:-1;if(!t||r===-1)return n[0];if(!s)return n[r];let i=t[r]-e,c=t[r]-t[r+1],m=W(n[r]),p=W(n[r+1]),f=!!o.isGrowing;return`rgb(${m.map((a,h)=>F(i,a,p[h]-a,c,f)|0).join(\",\")})`},S=o=>{let{duration:e,initialRemainingTime:n,updateInterval:t,size:s=180,strokeWidth:r=12,trailStrokeWidth:i,isPlaying:c=!1,isGrowing:m=!1,rotation:p=\"clockwise\",onComplete:f,onUpdate:u}=o,a=U(),h=Math.max(r,i!=null?i:0),{path:w,pathLength:$}=A(s,h,p),{elapsedTime:y}=I({isPlaying:c,duration:e,startAt:T(e,n),updateInterval:t,onUpdate:typeof u==\"function\"?l=>{let d=Math.ceil(e-l);d!==a.current&&(a.current=d,u(d))}:void 0,onComplete:typeof f==\"function\"?l=>{var R;let{shouldRepeat:d,delay:C,newInitialRemainingTime:k}=(R=f(l))!=null?R:{};if(d)return{shouldRepeat:d,delay:C,newStartAt:T(e,k)}}:void 0}),g=e-y;return{elapsedTime:y,path:w,pathLength:$,remainingTime:Math.ceil(g),rotation:p,size:s,stroke:j(o,g),strokeDashoffset:F(y,0,$,e,m),strokeWidth:r}};var D=o=>{let{children:e,strokeLinecap:n,trailColor:t,trailStrokeWidth:s}=o,{path:r,pathLength:i,stroke:c,strokeDashoffset:m,remainingTime:p,elapsedTime:f,size:u,strokeWidth:a}=S(o);return x.createElement(\"div\",{style:B(u)},x.createElement(\"svg\",{viewBox:`0 0 ${u} ${u}`,width:u,height:u,xmlns:\"http://www.w3.org/2000/svg\"},x.createElement(\"path\",{d:r,fill:\"none\",stroke:t!=null?t:\"#d9d9d9\",strokeWidth:s!=null?s:a}),x.createElement(\"path\",{d:r,fill:\"none\",stroke:c,strokeLinecap:n!=null?n:\"round\",strokeWidth:a,strokeDasharray:i,strokeDashoffset:m})),typeof e==\"function\"&&x.createElement(\"div\",{style:P},e({remainingTime:p,elapsedTime:f,color:c})))};D.displayName=\"CountdownCircleTimer\";export{D as CountdownCircleTimer,S as useCountdown};\n","import React, { useEffect, useState } from 'react';\r\nimport axios from 'axios';\r\nimport './RevisionSchedulerList.css'\r\nimport { ApiKey, dataUrl} from '../config.js'\r\nimport Spinner from './Spinner.js';\r\n\r\nimport ModalDiag from \"./ModalDiag\";\r\n\r\n\r\n\r\nconst RevisionSchedulerList = ({subjects, backToLogin, loadContentPage, revisions, onRevisionsUpdate}) => {\r\n const warningTitle = \"Warning\";\r\n const warningBody = \"All your revisions scheduled will be cleared. It is like you are starting fresh.\\n\";\r\n const afterDeleteTitle = \"Info\";\r\n const afterDeleteBody = \"Revisions have been successfully deleted. Starting afresh, all the best.\";\r\n const problemDelete = \"Failed to delete, try again after sometime\";\r\n const [isBoxToggle, setBoxToggle] = useState(false);\r\n const [activeTab, setActiveTab] = useState('today');\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [list, setList] = useState(null);\r\n const modalDataInitial = {\r\n showWarning: false,\r\n title: warningTitle,\r\n body: warningBody,\r\n isLoading: false, \r\n onOkay: () => ClearRevisionSchedules()\r\n }\r\n const [modalData, setModalData] = useState(modalDataInitial);\r\n useEffect(() => {\r\n if(!isBoxToggle)\r\n return;\r\n if(revisions!=null)\r\n {\r\n const today = new Date();\r\n today.setHours(0,0,0,0); // setting today's date and ignoring the time\r\n\r\n const filteredRevisions = revisions.filter(revision => {\r\n const revisionDate = new Date(revision.NextRevisionDate);\r\n revisionDate.setHours(0,0,0,0); // setting revision date and ignoring the time\r\n \r\n if(activeTab!=='today') {\r\n return revisionDate.getTime() < today.getTime();\r\n \r\n } else {\r\n return revisionDate.getTime() === today.getTime();\r\n }\r\n });\r\n const groupedRevisions = filteredRevisions.reduce((groups, record) => {\r\n const splitPage = record.Navigation.split(\"^\");\r\n if (!groups[splitPage[0]]) {\r\n groups[splitPage[0]] = [];\r\n }\r\n groups[splitPage[0]].push([splitPage[1], splitPage[2], splitPage[3]]);\r\n return groups;\r\n },{})\r\n setList(groupedRevisions);\r\n setIsLoading(false);\r\n return;\r\n }\r\n var req = {\r\n email: localStorage.getItem('user'),\r\n method: 'GetRevisions',\r\n params: {\r\n IsBacklog: activeTab==='today' ? 'N' : 'Y'\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n setIsLoading(false);\r\n const groupedRevisions = resp.data.reduce((groups, record) => {\r\n if (!groups[record.result.subject]) {\r\n groups[record.result.subject] = [];\r\n }\r\n groups[record.result.subject].push([record.result.TK, record.result.Topic, record.result.Type]);\r\n return groups;\r\n }, {});\r\n setList(groupedRevisions);\r\n console.log(resp.data);\r\n }).catch(err => {console.log(err);backToLogin();});\r\n\r\n }, [activeTab, isBoxToggle]);\r\n \r\n function ShowWarning()\r\n {\r\n setModalData(prevState => ({\r\n ...prevState,\r\n showWarning: true,\r\n title: warningTitle,\r\n body: warningBody,\r\n isLoading: false, \r\n onOkay: () => ClearRevisionSchedules()\r\n }));\r\n }\r\n function CloseModal()\r\n{\r\n setModalData(modalDataInitial);\r\n}\r\nfunction ClearRevisionSchedules()\r\n{\r\n setModalData(prevState => ({\r\n ...prevState,\r\n isLoading: true\r\n }));\r\n var req = {\r\n email: localStorage.getItem('user'),\r\n method: 'ClearRevisionSchedules'\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n onRevisionsUpdate([]);\r\n setModalData(prevState => ({\r\n ...prevState,\r\n title: afterDeleteTitle,\r\n body: afterDeleteBody,\r\n isLoading: false,\r\n onOkay: ()=>CloseModal()\r\n }));\r\n }).catch(err => {setModalData(prevState => ({\r\n ...prevState,\r\n title: afterDeleteTitle,\r\n body: problemDelete,\r\n isLoading: false,\r\n onOkay: ()=>CloseModal()\r\n }));\r\n console.log(err);backToLogin();});\r\n}\r\n return (\r\n \r\n \r\n\r\n {isBoxToggle && (\r\n
\r\n );\r\n};\r\n\r\nexport default RevisionSchedulerList;","import \"./LogoAndEaseMenu.css\";\r\nimport React, {useState, useEffect} from \"react\";\r\nimport DarkModeToggle from './DarkModeToggle.js';\r\nimport axios from 'axios';\r\nimport { ApiKey, dataUrl} from '../config.js'\r\nimport Spinner from './Spinner.js';\r\nimport RevisionSchedulerList from \"./RevisionSchedulerList.js\";\r\n\r\n\r\n\r\n\r\n\r\nexport function HomeButton({OnClickFunction})\r\n{\r\n return(\r\n \r\n );\r\n}\r\nexport default function LogoAndEaseMenu({ OnClickFunction, onClickEaseMenu, isIconizedMenu})\r\n{\r\n return (\r\n \r\n : (\r\n
\r\n )}\r\n {modalData.showWarning===true && (\r\n \r\n \r\n \r\n
\r\n {isLoading ? \r\n {list && Object.keys(list).length>0 ? Object.keys(list).map(subject => (\r\n
)\r\n }\r\n { activeTab==='backlog' && Object.keys(list).length>0 && \r\n loadContentPage(subject, TKTopicAndType[0], TKTopicAndType[1], TKTopicAndType[2])}>{TKTopicAndType[1]} ))}\r\n
\r\n )\r\n ) : {subjects.filter(sub => sub.SubjectName===subject)[0].DisplayName}
\r\n {list[subject].map((TKTopicAndType, index) => (No revision tasks found
}\r\n*You can reschedule by opening the topic
}\r\n \r\n \r\n
);\r\n}\r\n\r\nexport function EaseMenuDiag({subjects, OnSearchResults, backToLogin, loadContentPage, revisions, onRevisionsUpdate})\r\n{\r\n const [search, setSearch] = useState('');\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n\r\n function OnSearch(searchstring)\r\n {\r\n if(searchstring.length<=3)\r\n return\r\n setIsLoading(true);\r\n var req = {\r\n email: localStorage.getItem('user'),\r\n method: 'SearchWebsite',\r\n params: {\r\n SearchString: searchstring\r\n }\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(dataUrl, req, { withCredentials: true, headers:headers}).then(resp => {\r\n setIsLoading(false);\r\n OnSearchResults(resp.data, searchstring);\r\n }).catch(err => {console.log(err);\r\n if(err.code === \"ERR_BAD_REQUEST\")\r\n backToLogin();\r\n else\r\n OnSearchResults(null, searchstring);\r\n \r\n });\r\n }\r\n\r\n function onLogout()\r\n {\r\n localStorage.clear();\r\n sessionStorage.clear();\r\n // API request to Server.\r\n window.location.reload();\r\n };\r\n\r\n\r\n return (\r\n \r\n {isLoading ? : \r\n
\r\n );\r\n}\r\n","import './BreakScreen.css'\r\nimport { breakMessages} from '../config.js'\r\nimport { CountdownCircleTimer } from \"react-countdown-circle-timer\";\r\nimport Form from \"react-bootstrap/Form\";\r\nimport LogoAndEaseMenu from './LogoAndEaseMenu.js';\r\n\r\n\r\n\r\n\r\nimport React, { useEffect, useRef, useState } from 'react';\r\n\r\nexport default function BreakScreen({backToLogin, OnContinue, breakError})\r\n{\r\n const inputRef = useRef();\r\n const rand = useRef(Math.floor((Math.random() * 135)));\r\n\r\n useEffect(() => \r\n {\r\n // specific selectors.\r\n var svg = document.querySelector('.timer-wrapper').querySelector('svg');\r\n svg.setAttribute('width', '100%');\r\n svg.setAttribute('height', '100%'); \r\n document.body.style.overflow = 'hidden';\r\n\r\n return () => document.body.style.overflow = 'auto';\r\n\r\n }, []);\r\n \r\n const [timersCount, settimerCount] = useState(0);\r\n useEffect(() => {\r\n if(timersCount>=2)\r\n backToLogin();\r\n }, [timersCount]);\r\n function handleSubmit(password)\r\n {\r\n inputRef.current.value=\"\";\r\n OnContinue(password);\r\n }\r\n \r\nconst renderTime = ({ remainingTime }) => {\r\n if (remainingTime<=2) {\r\n return \r\n \r\n \r\n
\r\n }\r\n \r\n
\r\n {timersCount===1 ? \"Logging Out\" : \"Logout in 3 min\" }
;\r\n }\r\n\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n// Todo fa eye default is bad in dark mode.\r\nfunction doNothing(){\r\n\r\n}\r\n return (\r\n {remainingTime}
\r\n \r\n
\r\n )\r\n}\r\n","import './App.css';\r\n\r\nimport Login from './Components/Login.js';\r\nimport MainPage from './Components/MainPage.js';\r\nimport IconizedMenu from './Components/IconizedMenu.js';\r\n\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { ApiKey, dataUrl, LoginUrl} from './config.js'\r\nimport {ApplyTheme} from './Components/DarkModeToggle.js';\r\nimport axios from 'axios';\r\nimport BreakScreen from './Components/BreakScreen';\r\nimport Spinner from './Components/Spinner.js';\r\nimport LogoAndEaseMenu, { EaseMenuDiag } from './Components/LogoAndEaseMenu.js';\r\n\r\n\r\n\r\nfunction App() {\r\n const [subjects, setSubjects] = useState(null);\r\n const [revisions, setRevisions] = useState(null);\r\n const [showBreakScreen, setshowBreakScreen] = useState(false);\r\n const [showIconizedMenu, setshowIconizedMenu] = useState(true);\r\n const [refreshTokenCount, setRefreshTokenCount] = useState(0);\r\n const [showBreakScreenError, setshowBreakScreenError] = useState(null);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [forceRefresh, setForceRefresh] = useState(0);\r\n const [easeMenu, setEaseMenu] = useState(false);\r\n \r\n\r\n const [page, setPage] = useState({\r\n SubjectPage: {\r\n loadSubjectPage: false, \r\n selectedSub: null\r\n }, \r\n ContentPage : {\r\n loadContentPage: false, \r\n TK: null, \r\n Topic:null,\r\n Type:null},\r\n SearchResultsPage: \r\n {\r\n loadSearchResultsPage: false,\r\n SearchResults : null\r\n }\r\n }\r\n );\r\n\r\n function ToggleEaseMenu()\r\n {\r\n setEaseMenu(!easeMenu);\r\n }\r\n useEffect(() => {\r\n const preventSaveShortcut = (e) => {\r\n if ((e.ctrlKey || e.metaKey) && e.key === 's') {\r\n e.preventDefault();\r\n }\r\n };\r\n window.addEventListener('keydown', preventSaveShortcut);\r\n\r\n\r\n if(localStorage.getItem('user')===null)\r\n {\r\n setIsLoading(false);\r\n setSubjects(null);\r\n setRevisions(null);\r\n }\r\n else{\r\n var isSunMode = localStorage.getItem('islightmode')!=null ? JSON.parse(localStorage.getItem('islightmode')) : true;\r\n ApplyTheme(isSunMode);\r\n sessionStorage.clear();\r\n var reqsubjects = {\r\n email: localStorage.getItem('user'),\r\n method: 'GetMenu'\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(dataUrl, reqsubjects, { withCredentials: true, headers:headers}).then(resp => {\r\n console.log(resp.data.Menu);\r\n setSubjects(resp.data.Menu);\r\n setRevisions(resp.data.Revisions);\r\n setIsLoading(false);\r\n }).catch(err => {FailedReq();});\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('keydown', preventSaveShortcut);\r\n };\r\n }, []);\r\n\r\n function updateRevisions(revisions)\r\n {\r\n setRevisions(revisions);\r\n }\r\n\r\n useEffect(() => {\r\n // When subjects loaded for the first time.\r\n // in 50 min break.\r\n const breakepoch = localStorage.getItem('breaktime');\r\n \r\n if(!breakepoch)\r\n return;\r\n\r\n const breaktime = 52*60*1000;//50\r\n var millsec = breaktime - (new Date().getTime() - breakepoch);\r\n\r\n if( millsec<=0)\r\n {\r\n FailedReq();\r\n return;\r\n }\r\n const timer = setTimeout(() => {\r\n if(localStorage.getItem('user'))\r\n setshowBreakScreen(true);\r\n }, millsec)\r\n return () => clearTimeout(timer);\r\n }, [refreshTokenCount]);\r\n\r\n // we are storing the email in local storage so no need to login every time.\r\n function FailedReq()\r\n {\r\n // Todo:: server call to delete the token.\r\n // Dirty fix clean childs and then parents.\r\n localStorage.clear();\r\n sessionStorage.clear();\r\n setTimeout(function(){\r\n setSubjects(null);\r\n setRevisions(null);\r\n setIsLoading(false);\r\n setshowBreakScreen(false);\r\n },1000);\r\n }\r\n\r\n\r\n function RefreshSession(password)\r\n {\r\n setIsLoading(true);\r\n var req = {\r\n email: localStorage.getItem('user'),\r\n password: password\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(LoginUrl, req, { withCredentials: true, headers:headers}).then(\r\n resp=>{ \r\n localStorage.setItem('breaktime', new Date().getTime() );\r\n setshowBreakScreen(false);\r\n setRefreshTokenCount(refreshTokenCount+1);\r\n setIsLoading(false);\r\n }).catch(err => {\r\n setIsLoading(false);\r\n setshowBreakScreenError(\"Failed refreshing session, incorrect password entered!\");\r\n setTimeout(() => {\r\n setshowBreakScreenError(null);\r\n }, 3000);\r\n }); \r\n }\r\n\r\n function selectSubject(sub)\r\n {\r\n if(!sub.DirectContent)\r\n {\r\n setPage({ \r\n SubjectPage : \r\n {\r\n loadSubjectPage: true, \r\n selectedSub: sub\r\n },\r\n ContentPage : \r\n {\r\n loadContentPage: false, \r\n TK: null, \r\n Topic:null,\r\n Type: null,\r\n },\r\n SearchResultsPage: \r\n {\r\n loadSearchResultsPage: false,\r\n SearchResults : null\r\n }\r\n });\r\n }\r\n else\r\n {\r\n onLoadContentPage(sub.SubjectName, sub.SubjectName, sub.SubjectName.toLowerCase(), 'doc');\r\n } \r\n setForceRefresh(forceRefresh+1);\r\n setshowIconizedMenu(false);\r\n }\r\n\r\n function onLoadContentPage(subject, TK, Topic, type)\r\n {\r\n setPage({ \r\n SubjectPage : \r\n {\r\n loadSubjectPage: false, \r\n selectedSub: subject\r\n },\r\n ContentPage : \r\n {\r\n loadContentPage: true, \r\n TK: TK, \r\n Topic:Topic,\r\n Type: type,\r\n TopicListForNxtAndPrev: null\r\n },\r\n SearchResultsPage: \r\n {\r\n loadSearchResultsPage: false,\r\n SearchResults : null\r\n }\r\n });\r\n }\r\n\r\n function loginSuccess(email)\r\n {\r\n localStorage.setItem('user', email);\r\n var reqsubjects = {\r\n email: localStorage.getItem('user'),\r\n method: 'GetMenu'\r\n };\r\n const headers = { \r\n 'x-api-key': ApiKey\r\n };\r\n axios.post(dataUrl, reqsubjects, { withCredentials: true, headers:headers}).then(resp => {\r\n localStorage.setItem('breaktime', new Date().getTime() );\r\n setSubjects(resp.data.Menu);\r\n setRevisions(resp.data.Revisions);\r\n setRefreshTokenCount(refreshTokenCount+1);\r\n }).catch(err => {FailedReq();})\r\n }\r\n // Todo show iconized menu toggleable instead do nothing.\r\n function ToggleIconizedMenu()\r\n {\r\n // initial state\r\n if(!page.SubjectPage.loadSubjectPage && !page.ContentPage.loadContentPage && !page.SearchResultsPage.loadSearchResultsPage)\r\n return;\r\n setshowIconizedMenu(!showIconizedMenu);\r\n }\r\n \r\n function SearchResults(results, searchstring)\r\n {\r\n setEaseMenu(false);\r\n setshowIconizedMenu(false);\r\n setPage({\r\n SubjectPage: {\r\n loadSubjectPage: false, \r\n selectedSub: null\r\n }, \r\n ContentPage : {\r\n loadContentPage: false, \r\n TK: null, \r\n Topic:null,\r\n Type:null},\r\n SearchResultsPage: \r\n {\r\n loadSearchResultsPage: true,\r\n SearchResults : results,\r\n SearchStringUsed: searchstring\r\n }});\r\n }\r\n\r\n\r\n function onLoadContentPageFromEaseMenu(subject, TK, Topic, type)\r\n {\r\n setEaseMenu(false);\r\n setshowIconizedMenu(false);\r\n setPage({ \r\n SubjectPage : \r\n {\r\n loadSubjectPage: false, \r\n selectedSub: subject\r\n },\r\n ContentPage : \r\n {\r\n loadContentPage: true, \r\n TK: TK, \r\n Topic:Topic,\r\n Type: type,\r\n TopicListForNxtAndPrev: null\r\n },\r\n SearchResultsPage: \r\n {\r\n loadSearchResultsPage: false,\r\n SearchResults : null\r\n }\r\n });\r\n }\r\n\r\n //{loggedInUser ? \r\n \r\n
\r\n \r\n
\r\n \r\n {breakMessages[rand.current]}\r\n
\r\n \r\n {timersCount<2 ?
\r\n \r\n {\r\n settimerCount(timersCount+1);\r\n return { shouldRepeat: true, delay: 0 };\r\n }} \r\n >\r\n \r\n {renderTime}\r\n \r\n\r\n
: }\r\n {breakError && {breakError}
}\r\n \r\n \r\n { isLoading ? :
\r\n );\r\n}\r\n\r\nexport default App;","////////////////////////////////////////////////////////////////////////////////\n//#region Types and Constants\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Actions represent the type of change to a location value.\n */\nexport enum Action {\n /**\n * A POP indicates a change to an arbitrary index in the history stack, such\n * as a back or forward navigation. It does not describe the direction of the\n * navigation, only that the current index changed.\n *\n * Note: This is the default action for newly created history objects.\n */\n Pop = \"POP\",\n\n /**\n * A PUSH indicates a new entry being added to the history stack, such as when\n * a link is clicked and a new page loads. When this happens, all subsequent\n * entries in the stack are lost.\n */\n Push = \"PUSH\",\n\n /**\n * A REPLACE indicates the entry at the current index in the history stack\n * being replaced by a new one.\n */\n Replace = \"REPLACE\",\n}\n\n/**\n * The pathname, search, and hash values of a URL.\n */\nexport interface Path {\n /**\n * A URL pathname, beginning with a /.\n */\n pathname: string;\n\n /**\n * A URL search string, beginning with a ?.\n */\n search: string;\n\n /**\n * A URL fragment identifier, beginning with a #.\n */\n hash: string;\n}\n\n// TODO: (v7) Change the Location generic default from `any` to `unknown` and\n// remove Remix `useLocation` wrapper.\n\n/**\n * An entry in a history stack. A location contains information about the\n * URL path, as well as possibly some arbitrary state and a key.\n */\nexport interface Location\r\n {showBreakScreen && }\r\n {subjects && easeMenu && }\r\n
\r\n }\r\n \r\n {subjects && }\r\n
\r\n setEaseMenu(false)} onTouchStart={() => setEaseMenu(false)}>\r\n {subjects && showIconizedMenu && ): }\r\n
\r\n