Skip to content

Commit

Permalink
display html with links on last week view
Browse files Browse the repository at this point in the history
  • Loading branch information
@kapil1garg
kapil1garg committed May 29, 2024
1 parent 4667bb5 commit 3db98d1
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 11 deletions.
29 changes: 22 additions & 7 deletions components/LastWeekIssuePane.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
import LinkIcon from '@heroicons/react/24/outline/LinkIcon';
import CheckBadgeIcon from '@heroicons/react/24/outline/CheckBadgeIcon';
import ExclamationCircleIcon from '@heroicons/react/24/outline/ExclamationCircleIcon';
import parse from 'html-react-parser';

export default function LastWeekIssuePane({
issueId,
Expand Down Expand Up @@ -248,7 +249,9 @@ export default function LastWeekIssuePane({
deliverable: followUp.practice.includes('[reflect]')
? null
: followUp.outcome.deliverableLink,
deliverableNotes: followUp.outcome.deliverableNotes,
deliverableNotes: convertTextToHtml(
followUp.outcome.deliverableNotes
),
reflections: filteredReflections
};
})
Expand All @@ -258,6 +261,20 @@ export default function LastWeekIssuePane({
getOrgObjects(practiceOutcome, noteInfo.project);
}, [selectedLastWeekIssue, noteInfo]);

const convertTextToHtml = (textContent) => {
// chck if textContent is null
if (textContent === null) {
return <></>;
}
// replace links with anchor tags
const linkRegex = /((http|https):\/\/[^\s]+)/g;
textContent = textContent.replace(
linkRegex,
'<a href="$1" target="_blank" rel="noreferrer" className="text-blue-600 underline">Link</a>'
);
return <>{parse(textContent)}</>;
};

return (
<div className="mb-5">
{selectedLastWeekIssue && (
Expand Down Expand Up @@ -672,14 +689,12 @@ export default function LastWeekIssuePane({
{/* Student's deliverable notes */}
{practice.didHappen !== null &&
practice.deliverableNotes !== null && (
<div className="mt-0.5 text-xs">
<div className="mt-0.5 w-full whitespace-pre-line text-xs">
<div className="">
Student notes on deliverable:{' '}
</div>
<div className="">
<span className="text-green-600">
{practice.deliverableNotes}
</span>
<div className="text-green-600">
{practice.deliverableNotes}
</div>
</div>
)}
Expand All @@ -696,7 +711,7 @@ export default function LastWeekIssuePane({
return (
<div
key={reflection.prompt}
className="mb-2 w-full text-xs"
className="mb-2 w-full whitespace-pre-line text-xs"
>
<h4 className="font-medium">
{reflection.prompt}
Expand Down
8 changes: 4 additions & 4 deletions pages/reflections/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function CAPNote({ capNoteInfo, pastIssues }): JSX.Element {
return (
<>
{parse(
`Share a <span className="font-bold">link</span> to the deliverable that shows what you worked on. This can be a Google Doc, link to a prototype on Figma, code on Github, an image, etc. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
`Share a <span className="font-bold">link</span> to the deliverable that shows what you worked on. This can be a Google Doc, link to a prototype on Figma, code on Github, an image, etc. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" rel="noreferrer" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
)}
</>
);
Expand All @@ -95,7 +95,7 @@ export default function CAPNote({ capNoteInfo, pastIssues }): JSX.Element {
return (
<>
{parse(
`Share a <span className="font-bold">link</span> to an image of what you worked on or discussed at <span className="font-bold">Mysore</span>. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
`Share a <span className="font-bold">link</span> to an image of what you worked on or discussed at <span className="font-bold">Mysore</span>. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" rel="noreferrer" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
)}
</>
);
Expand All @@ -104,7 +104,7 @@ export default function CAPNote({ capNoteInfo, pastIssues }): JSX.Element {
return (
<>
{parse(
`Share a <span className="font-bold">link</span> to the deliverable that shows what you worked on at <span className="font-bold">Pair Research</span>. This can be a Google Doc, link to a prototype on Figma, code on Github, an image, etc. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
`Share a <span className="font-bold">link</span> to the deliverable that shows what you worked on at <span className="font-bold">Pair Research</span>. This can be a Google Doc, link to a prototype on Figma, code on Github, an image, etc. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" rel="noreferrer" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
)}
</>
);
Expand All @@ -113,7 +113,7 @@ export default function CAPNote({ capNoteInfo, pastIssues }): JSX.Element {
return (
<>
{parse(
`Share a <span className="font-bold">link</span> to the deliverable that shows what you worked on at <span className="font-bold">with the people your mentor suggested.</span>. This can be a Google Doc, link to a prototype on Figma, code on Github, an image, etc. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
`Share a <span className="font-bold">link</span> to the deliverable that shows what you worked on at <span className="font-bold">with the people your mentor suggested.</span>. This can be a Google Doc, link to a prototype on Figma, code on Github, an image, etc. <span className="font-bold">For images,</span> upload to <a href="https://drive.google.com/drive/u/1/folders/1f_soFX6v9fAL9s4Da8DkPFAVC3Px3czt" target="_blank" rel="noreferrer" className="text-blue-600 underline">this</a> folder and copy the file link below (Right Click → Share → Copy Link). Make sure all links you provide are accessible to anyone (e.g., use “anyone with link” permission on Google Drive).`
)}
</>
);
Expand Down

0 comments on commit 3db98d1

Please sign in to comment.