Merge pull request #333 from lara-learning/feat/search-highlight

feat: Highlighter

Author: maxn92

packages/components/src/entry-input-layout.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { Spacings } from './spacing'
 import { FontSizes } from './font-size'
 import { BorderRadii } from './border-radius'
+import Highlighter from './highlighter'
 
 const ActionWrapper = styled.div`
   display: flex;
@@ -118,13 +119,6 @@ const TextWrapper = styled(ValueBase)`
   padding-left: 0;
 `
 
-const Text = styled.p`
-  margin: 0;
-  padding: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-`
-
 const Time = styled(ValueBase)`
   width: 100px;
   text-align: right;
@@ -193,17 +187,26 @@ interface EntryInputLayoutProps extends HTMLAttributes<HTMLElement>, EntryContai
   text: string
   time: string
   actions: JSX.Element
+  term: string
   clickHandler: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-export const EntryInputLayout: React.FC<EntryInputLayoutProps> = ({ text, time, actions, clickHandler, ...rest }) => {
+export const EntryInputLayout: React.FC<EntryInputLayoutProps> = ({
+  text,
+  time,
+  actions,
+  term,
+  clickHandler,
+  ...rest
+}) => {
+  console.log(term)
   return (
     <>
       <StyledEntryContainer {...rest}>
         <StyledEntryValueWrapper>
           <StyledInputWrapper onClick={() => clickHandler(true)}>
             <TextWrapper>
-              <Text>{text}</Text>
+              <Highlighter term={term}>{text}</Highlighter>
             </TextWrapper>
             <Time>{time}</Time>
           </StyledInputWrapper>

packages/components/src/highlighter.tsx

@@ -0,0 +1,40 @@
+interface highlighterProps {
+  term: string
+  children: string
+}
+
+const Highlighter: React.FC<highlighterProps> = ({ term, children }) => {
+  if (!term) {
+    return <>{children}</>
+  }
+  const regex = new RegExp(`(${term})`, 'gi')
+  const parts = children.split(regex)
+  console.log(parts)
+
+  return (
+    <>
+      <div>test</div>
+      {parts.map((part: string, index: number) =>
+        regex.test(part) ? (
+          <span
+            key={index}
+            style={{
+              margin: 0,
+              backgroundColor: 'rgb(84 198 247)',
+              padding: 0,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              fontWeight: 'bold',
+            }}
+          >
+            {part}
+          </span>
+        ) : (
+          part
+        )
+      )}
+    </>
+  )
+}
+
+export default Highlighter

packages/frontend/src/components/day-input.tsx

@@ -66,6 +66,7 @@ interface DayInputProps {
   disabled?: boolean
   reportStatus?: ReportStatus
   primary?: boolean
+  term: string
   updateMessageDay?: (message: string, commentId: string) => void
   updateMessageEntry?: (
     message: string,
@@ -86,6 +87,7 @@ const DayInput: React.FunctionComponent<DayInputProps> = ({
   primary,
   updateMessageDay,
   updateMessageEntry,
+  term,
 }) => {
   const { getTotalMinutes } = useDayHelper()
   const { addToast } = useToastContext()
@@ -232,6 +234,7 @@ const DayInput: React.FunctionComponent<DayInputProps> = ({
       }
     >
       <EntriesInput
+        term={term}
         handleStatusChange={handleStatusChange}
         day={day}
         reportStatus={reportStatus ?? ReportStatus.Todo}

packages/frontend/src/components/entries-input.tsx

@@ -20,6 +20,7 @@ import { useToastContext } from '../hooks/use-toast-context'
 import { useDayHelper } from '../helper/day-helper'
 
 interface EntriesInputProps {
+  term: string
   day?: Pick<Day, 'id' | 'date'> & {
     entries: (Pick<Entry, 'id' | 'text' | 'time' | 'orderId'> & {
       comments: (Pick<Comment, 'id' | 'text' | 'published'> & {
@@ -49,6 +50,7 @@ const EntriesInput: React.FC<EntriesInputProps> = ({
   handleStatusChange,
   trainee,
   updateMessage,
+  term,
 }) => {
   const [createEntryMutation] = useCreateEntryMutation()
   const { addToast } = useToastContext()
@@ -107,6 +109,7 @@ const EntriesInput: React.FC<EntriesInputProps> = ({
         .sort((a, b) => a.orderId - b.orderId)
         .map((entry) => (
           <EntryInput
+            term={term}
             handleStatusChange={handleStatusChange}
             key={entry.id}
             disabled={disabled}

packages/frontend/src/components/entry-input.tsx

@@ -53,6 +53,7 @@ interface EntryDisplayFieldProps {
   showContextMenu?: string
   setShowContextMenu?: React.Dispatch<React.SetStateAction<string>>
   updateMessage?: (message: string, commentId: string) => void
+  term: string
 }
 
 const EntryInput: React.FC<EntryDisplayFieldProps> = ({
@@ -65,6 +66,7 @@ const EntryInput: React.FC<EntryDisplayFieldProps> = ({
   showContextMenu,
   setShowContextMenu,
   updateMessage,
+  term,
 }) => {
   const { loading, data } = useEntryInputDataQuery()
 
@@ -301,6 +303,7 @@ const EntryInput: React.FC<EntryDisplayFieldProps> = ({
         <TextTimeInput autoFocus entry={entry} onDelete={handleDelete} onSave={handleSave} />
       ) : (
         <EntryInputLayout
+          term={term}
           clickable
           disabled={disabled}
           draggable={!disabled}

packages/frontend/src/pages/archive-page.tsx

@@ -123,6 +123,7 @@ const ArchivePage: React.FunctionComponent = () => {
 
   const [allChecked, setAllChecked] = React.useState(false)
   const [selectedTrainee, setSelectedTrainee] = React.useState<string | undefined>(undefined)
+  const [term, setTerm] = React.useState<string | undefined>(undefined)
 
   const getArchivedReports = React.useCallback(() => {
     if (!data) return []
@@ -215,6 +216,8 @@ const ArchivePage: React.FunctionComponent = () => {
     let weekEnd: number | undefined = undefined
     let searchText: string | undefined = undefined
 
+    setTerm(value)
+
     const yearMatch = yearMonthRegex.exec(value)
     if (yearMonthRegex.test(value) && yearMatch) {
       year = parseInt(yearMatch[1], 10)
@@ -346,8 +349,8 @@ const ArchivePage: React.FunctionComponent = () => {
 
                     const link =
                       data?.currentUser?.__typename === UserTypeEnum.Trainer
-                        ? `/report/${traineeId}/${year}/${week}`
-                        : `/report/${year}/${week}`
+                        ? `/report/${traineeId}/${year}/${week}/${term ? term : ''}`
+                        : `/report/${year}/${week}/${term ? term : ''}`
 
                     return (
                       <StyledArchiveTableRow key={report.id}>

packages/frontend/src/pages/dashboard-page.tsx

@@ -63,6 +63,7 @@ const DashboardPage: React.FunctionComponent = () => {
             <Container overflow={'visible'}>
               <DayInput
                 primary
+                term=""
                 heading={getTodayHeading()}
                 reportStatus={reportForYearAndWeek?.status}
                 day={day}

packages/frontend/src/pages/report-page.tsx

@@ -45,7 +45,7 @@ import { useReportHelper } from '../helper/report-helper'
 const ReportPage: React.FunctionComponent = () => {
   const navigate = useNavigate()
   const { getFinishedDays } = useReportHelper()
-  const { trainee, year, week } = useParams()
+  const { trainee, year, week, term } = useParams()
 
   const variables: ReportPageDataQueryVariables = {
     year: parseInt(year ?? '', 10),
@@ -282,6 +282,7 @@ const ReportPage: React.FunctionComponent = () => {
           {report?.days.map((day) => (
             <StyledTopBorderWrapper key={day.id}>
               <DayInput
+                term={term ? term : ''}
                 day={day}
                 disabled={reportArchived || reportReview || day.status === DayStatusEnum.Holiday}
                 reportStatus={report.status}

packages/frontend/src/pages/report-review-page.tsx

@@ -388,6 +388,7 @@ const ReportReviewPage: React.FunctionComponent = () => {
                       <>
                         {day.entries.map((entry, entryIndex) => (
                           <EntryInput
+                            term=""
                             key={entryIndex}
                             entry={entry}
                             day={day}

packages/frontend/src/routes.tsx

@@ -71,6 +71,7 @@ const AppRoutes: React.FunctionComponent<RoutesProps> = ({ currentUser }) => {
               <>
                 <Route path="/" element={<DashboardPage />} />
                 <Route path="/archive" element={<ArchivePage />} />
+                <Route path="/report/:year/:week/:term" element={<ReportPage />} />
                 <Route path="/report/:year/:week" element={<ReportPage />} />
                 <Route path="/report/missing" element={<MissingPage />} />
                 <Route path="/alexa" element={<AlexaPage />} />