\n \n Publications - {props.modal.title} \n \n \n \n First Author
\n {props.modal.firstAuthor && {props.modal.firstAuthor}
}\n Authors
\n {props.modal.authors && {props.modal.authors.replace( /(<([^>]+)>)/ig, ' ').replace(/&#[0-9]+;/g, ' ')}
}\n CAVD Grantee
\n {props.modal.cavdGrantee && {props.modal.cavdGrantee}
}\n Journal Name
\n {props.modal.journalName && {props.modal.journalName}
}\n Publication Date
\n {date && {date}
}\n Pub Med Search
\n {props.modal.pubMedSearch && {props.modal.pubMedSearch.description}
}\n Link to full-text
\n {props.modal.linkToFullText && {props.modal.linkToFullText.description}
}\n PMID
\n {props.modal.pmid && {props.modal.pmid}
}\n DOI
\n {props.modal.doi && {props.modal.doi}
}\n Abstract
\n {props.modal.abstract && {props.modal.abstract.replace( /(<([^>]+)>)/ig, ' ').replace(/&#[0-9]+;/g, ' ')}
}\n Collaborating Institutions
\n {props.modal.collaboratingConsortia && {props.modal.collaboratingConsortia}
}\n Year
\n {props.modal.publicationYear && {props.modal.publicationYear}
}\n \n \n \n \n \n \n );\n}","import React, {useState, useEffect} from 'react';\nimport {Table} from 'react-bootstrap';\nimport useDraggableTable from '../Hooks/useDraggableTable'\nimport {StudyResultsModal} from '../Modal/StudyResultsModal';\nimport {PublicationsModal} from \"../Modal/PublicationsModal\";\nimport './ResultsTable.scss';\n\nexport function ResultsTable (props) {\n const draggable = useDraggableTable()\n return (\n <>\n \n \n \n {props.columns && props.columns.map((column,i)=>{\n return | {column.label} | \n })}\n
\n \n \n {props.items && props.items.map((row, i)=>{\n let item = row.fields;\n return (\n \n {props.columns.map(col=>{\n const isLink = col.isLink;\n const isDate = col.isDate;\n const isStudyResultsModal = col.isStudyResultsModal;\n const isPublicationsModal = col.isPublicationsModal;\n if(isLink){\n if(item[col.id] && item[col.id].url) {\n return (\n | \n {item[col.id] && }\n | \n ) \n } else {\n return (\n \n \n | \n )\n }\n } else if (isDate){\n return (\n {item[col.id] && new Date(item[col.id]).toLocaleDateString('en-us')}\n | )\n } else if (isStudyResultsModal) {\n return(\n \n \n | \n )\n } \n else if (isPublicationsModal) {\n return(\n \n \n | \n )\n }\n else {\n if(col.id == \"authors\" && item[col.id])\n {\n return (\n {item[col.id].replace( /(<([^>]+)>)/ig, ' ').replace(/&#[0-9]+;/g, ' ')}\n | )\n }\n else\n {\n return (\n {item[col.id]}\n | )\n }\n }\n })}\n
\n )\n })}\n \n
\n {!props.items || props.items.length === 0 ? {props.noResultsText}
: null}\n \n )\n}","import React, { useEffect, useRef, useState } from \"react\"\n\n/**\n * Make an element scrollable by dragging\n * @param buttons - Buttons user can drag with. See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n * @returns {React.MutableRefObject} - The ref to be applied to to the element to make it draggable\n */\nexport default function useDraggableTable(buttons = [1, 4, 5]) {\n // Ref to be attached to the element we want to drag\n const ref = useRef()\n //cannot put ref directly on React-Bootstrap responive container\n const tableParent = ref && ref.current && ref.current.parentElement\n // Position of the mouse on the page on mousedown\n const [startX, setStartX] = useState(0)\n const [startY, setStartY] = useState(0)\n // Amount the draggable element is already scrolled\n const [startScrollLeft, setStartScrollLeft] = useState(0)\n const [startScrollTop, setStartScrollTop] = useState(0)\n function checkOverflow(elem) {\n if (elem){\n const elemWidth = elem.getBoundingClientRect().width\n const parentWidth = elem.parentElement.getBoundingClientRect().width\n return elemWidth > parentWidth\n } \n return;\n }\n useEffect(() => {\n if(checkOverflow(ref.current)){\n //only attach handlers if element overflows\n function handleDown(e) {\n // Only allow dragging inside of target element\n if (!tableParent.contains(e.target)) {\n return\n }\n // Set initial positions of mouse element scroll\n setStartX(e.pageX - tableParent.offsetLeft)\n setStartY(e.pageY - tableParent.offsetTop)\n setStartScrollLeft(tableParent.scrollLeft)\n setStartScrollTop(tableParent.scrollTop)\n tableParent.style.cursor = 'grabbing';\n tableParent.style.userSelect = 'none';\n }\n function handleMove(e) {\n // Don't fire if other buttons are pressed\n if (!buttons.includes(e.buttons) || !tableParent.contains(e.target)) {\n return\n }\n e.preventDefault()\n // Position of mouse on the page\n const mouseX = e.pageX - tableParent.offsetLeft\n const mouseY = e.pageY - tableParent.offsetTop\n // Distance of the mouse from the origin of the last mousedown event\n const walkX = mouseX - startX\n const walkY = mouseY - startY\n // Set element scroll\n tableParent.scrollLeft = startScrollLeft - walkX\n tableParent.scrollTop = startScrollTop - walkY\n }\n function handleUp(e){\n tableParent.style.cursor = 'grab';\n tableParent.style.removeProperty('user-select');\n }\n // Add and clean up listeners\n document.addEventListener(\"mousedown\", handleDown)\n document.addEventListener(\"mousemove\", handleMove)\n document.addEventListener(\"mouseup\", handleUp)\n return () => {\n document.removeEventListener(\"mousedown\", handleDown)\n document.removeEventListener(\"mousemove\", handleMove)\n document.removeEventListener(\"mouseup\", handleUp)\n }\n }\n })\n\n return ref\n}","import React, {useState, useEffect} from 'react';\nimport './Pagination.scss';\n\nexport function Pagination (props) {\n const currentPage = props.currentPage;\n const lastDisabled = currentPage <=1 || props.isLoading;\n const nextDisabled = !props.hasMoreResults || props.isLoading;\n function onLastClick(){\n props.onPrevPage()\n }\n function onNextClick(){\n props.onNextPage()\n }\n\n function calculateBeginningNumber(){\n return ((currentPage - 1) * props.resultsPerPage) + 1\n }\n\n function calculateEndNumber(){\n const total = calculateBeginningNumber() + props.numberOfResults - 1;\n return (nextDisabled ? total : currentPage * props.resultsPerPage)\n }\n return (\n \n {props.numberOfResults > 0 && !props.isLoading && \n <>\n \n {calculateBeginningNumber() + ' - ' + calculateEndNumber()}\n \n }\n
\n )\n}","import React, {useState, useEffect, useRef} from 'react';\nimport { Banner } from '../Banner/Banner';\nimport { Search } from './Search';\nimport { Sort } from './Sort';\nimport { ResultsTable } from './ResultsTable';\nimport { Pagination } from './Pagination';\nimport { SharepointService } from '@vaccinessites/services';\nimport './SearchLayout.scss';\n\nexport function SearchLayout (props) {\n const [searchValue, setSearchValue] = useState('');\n const [sortValues, setSortValues] = useState([]);\n const [skipToken, setSkipToken] = useState(\"\");\n const [currentPage, setCurrentPage] = useState(1)\n const [prevSkipTokens,setPrevSkipTokens] = useState([\"\"])\n const [results, setResults] = useState();\n const [loading, setLoading] = useState(true);\n const searchLayout = props.search.fields;\n const Sharepoint = new SharepointService(props.config.baseAPIUrl, searchLayout.dataSource);\n const sortsConfig = Sharepoint.getSortValues();\n const tableColumns = Sharepoint.getTableColumns();\n const resultsDiv = useRef(null)\n\n function searchOnChange(query){\n setSearchValue(query)\n }\n function sortOnChange(value, field){\n setSortValues(prevSorts=>{\n let sorts = [...prevSorts];\n if(sorts.length === 0){\n sorts.push({\n \"columnname\": field,\n \"order\": value\n })\n } else {\n if(value === sorts[0].order && field === sorts[0].columnname){\n sorts = []\n } else {\n sorts = []\n sorts.push({\n \"columnname\": field,\n \"order\": value\n })\n }\n }\n return sorts\n })\n }\n\n function nextPage(){\n setCurrentPage(currentPage + 1)\n setPrevSkipTokens(prevTokens=>{\n let tokens = [...prevTokens]\n tokens.push(results.skiptoken)\n return tokens\n })\n setSkipToken(results.skiptoken)\n }\n\n function prevPage(){\n const prevPageToken=prevSkipTokens[prevSkipTokens.length - 2]\n setSkipToken(prevPageToken)\n setCurrentPage(currentPage - 1);\n setPrevSkipTokens(prevTokens=>{\n let tokens = [...prevTokens]\n tokens.pop()\n return tokens\n })\n }\n\n function newSearch(resetPagination){\n setLoading(true)\n let options = {\n sort: sortValues,\n search: searchValue,\n skipToken: resetPagination ? \"\" : skipToken,\n numberOfResults: searchLayout.numberOfResultsPerPage,\n from: (currentPage - 1) * searchLayout.numberOfResultsPerPage\n }\n Sharepoint.getDataFromDataSource(options).then(data=>{ \n setResults(data) \n setLoading(false);\n window.scrollTo({\n top: resultsDiv.current.offsetTop - 100,\n behavior: 'smooth'\n })\n }).catch(err=>{\n console.log(err)\n setResults({data: []})\n setLoading(false)\n })\n }\n\n useEffect(()=>{\n //trigger new search when search changes\n setPrevSkipTokens([\"\"]);\n setCurrentPage(1)\n if(searchValue.length == 0 || currentPage == 1)\n newSearch(true)\n }, [searchValue])\n\n useEffect(()=>{\n //trigger new search when sort changes\n setPrevSkipTokens([\"\"]);\n setCurrentPage(1)\n if(searchValue.length == 0 || currentPage == 1){\n var delayInMilliseconds = 1000;\n setTimeout(function() {\n newSearch(true)\n }, delayInMilliseconds);\n }\n\n }, [sortValues])\n\n useEffect(()=>{\n //trigger new search when page changes\n newSearch(false)\n }, [currentPage])\n return (\n \n
\n \n \n
\n \n \n
\n
\n {!results && loading &&
{searchLayout.loadingText || \"Loading...\"}
}\n {results && \n <>\n
\n {loading &&
{searchLayout.loadingText || \"Loading...\"}
}\n
currentPage * searchLayout.numberOfResultsPerPage) }/>\n }\n \n
\n
\n
{arrow.type == \"left\" ? \"Back\": \"Next\"}
\n \n {link &&
\n {arrow.type == \"left\" ? : null} \n {arrow.title} \n {arrow.type == \"right\" ? : null} \n } \n
\n
\n
{content.listHeading}
\n {jsonData.map(item=>{\n if(item['External URL']){\n return \n } else {\n return \n }\n })}\n
\n \n )\n}\n\nfunction JSONItem(props){\n let item = props.item;\n let content = props.content;\n const externalIdLink = item.external_ids && item.external_ids.find(id=>id.type===content.resultLinkId);\n let sourceUrl = item.source_urls && item.source_urls.length > 0 && item.source_urls[0].url;\n let url = null;\n if(sourceUrl) {\n //preferentially use sourceUrl over external Id \n url = sourceUrl;\n } else if (externalIdLink) {\n url = content.resultBaseLink + externalIdLink.value\n } \n const sourceTitle = item.source && item.source.title_full;\n let date = item.date_published && item.date_published.date;\n date = new Date(date).toLocaleDateString('en-us',{month: \"long\", year: \"numeric\"});\n return (\n \n
\n
{item.authors && item.authors.map((author, i)=>{\n return {author.first_name + ' ' +author.last_name + (i!==item.authors.length - 1 ? ', ' : '')}\n })}
\n
{sourceTitle} {date}
\n
\n
\n
{item[\"Author\"] && item[\"Author\"][\"s\"]}
\n
{item[\"Source Title\"]} {item[\"Date Published\"]}
\n
${item.journalName}
${item.firstAuthor || item.authors} ${item.authors ? `et al.`: item.firstAuthor.includes(',') ? `et al.`: ``}
PMID: ${item.pmid}
${(item.publishDate && new Date(item.publishDate).toLocaleDateString('en-us')) || item.publicationYear}
`,\n link: {\n fields: {\n label: banner.tileLinkText,\n url: (item.linkToFullText && item.linkToFullText.url) || (item.link && item.link.url),\n type: 'text-only'\n }\n }\n }\n }\n })\n setResults(formattedResults)\n })\n }, [])\n return (\n \n )\n}","import React, {useState, useEffect, Component} from 'react';\nimport {CTA} from '../CTA/CTA';\nimport { CMSService } from '@vaccinessites/services';\nimport './JobandOpportunityData.scss';\n\n\nexport function JobandOpportunityData (props) {\n let date = new Date(props.item.createdDate).toLocaleDateString('en-us',{month: \"long\",day: \"numeric\", year: \"numeric\"})\n let richtext = props.item.publicDescription;\n\n\n \n return (\n \n
\n
\n {props.item.jobTitle} \n
\n
\n
\n
By {props.item.jobOrganization} | {date}
\n
\n
\n
\n {result && \n result.sort((a, b) => a.fields.createdDate < b.fields.createdDate ? 1 : -1).map((item, i)=>{ \n return
\n })}\n\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n