Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fixing App layout and adding onclikc to fix links #454

Merged
merged 3 commits into from
Sep 13, 2023
Merged

fix: fixing App layout and adding onclikc to fix links #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
58208b8
fix: fixing App layout and adding onclikc to fix links
JasonNotJson Sep 13, 2023
b71f21f
feat: refactoring threadblock structure
JasonNotJson Sep 13, 2023
91b6666
chore: fixing tag typo
JasonNotJson Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/forum/src/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const InnerApp = () => {
<Route element={<Thread />} path="forum/:boardSlug/:threadUuid" />
</Routes>
</div>
<div className="flex flex-col hidden sm:w-1/5 ">
<div className="flex flex-col sm:w-1/5 ">
<div className="hidden md:h-[500px] md:w-[250px] justify-self-end">
<h1></h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/forum/src/components/Comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const Comment = ({ comment }: Props) => {
<Block actions={actions}>
<div className="border-2 rounded-xl px-4 py-2 text-light-text2 mt-4 standard-style flex flex-row justify-between items-center">
<div>
<p className="text-2xl p-2">{convertUrlsToLinks(comment.body)}</p>
<h2 className="text-2xl h2-2">{convertUrlsToLinks(comment.body)}</h2>
<h2 className="text-xs my-auto"></h2>
</div>
{comment.mod === true && (
Expand Down
242 changes: 127 additions & 115 deletions apps/forum/src/components/ThreadBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,23 +32,27 @@ const convertUrlsToLinks = (isPreview: boolean, text: string) => {
{parts.map((part, index) => (
<React.Fragment key={index}>
{part && (
<span className="text-light-text1 dark:text-dark-text1 text-3xl">
<span
className={
isPreview
? "text-light-text1 dark:text-dark-text1 text-3xl"
: "text-light-text1 dark:text-dark-text1 text-3xl select-text cursor-text"
}
>
{part}
</span>
)}
{matches &&
matches[index] &&
(isPreview ? (
<h3 className="text-blue-600">{matches[index]}</h3>
<span className="text-blue-600">{matches[index]}</span>
) : (
<a
href={matches[index]}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 text-lg"
<span
className="text-blue-600 text-2xl cursor-pointer"
onClick={() => window.open(matches[index], "_blank")}
>
{matches[index]}
</a>
</span>
))}
</React.Fragment>
))}
Expand Down Expand Up @@ -178,124 +182,132 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {

const navigate = useNavigate();

return (
<Block actions={actions}>
<Link
to={
const renderContent = () => {
return (
<div
className={
isPreview
? fromRoot
? `${thread.board_id}/${thread.thread_id}`
: `${thread.thread_id}`
: ""
? `border-2 mb-10 mr-4 rounded-xl shadow-lg p-6 standard-style-hover`
: `cursor-default bg-light-card1 standard-style`
}
>
<div
className={
isPreview
? `border-2 mb-10 mr-4 rounded-xl shadow-lg p-6 standard-style-hover`
: `cursor-default bg-light-card1 standard-style`
}
>
{!isPreview && (
<div
onClick={() => navigate(-1)}
className="text-xs mt-2 cursor-pointer text-light-text1 dark:text-dark-text1 hover:text-light-text2 dark:hover:text-dark-text2 w-fit"
>
<ArrowBackIcon fontSize="large" />
</div>
)}
{/* ^ This line goes to parent board on click while in thread */}
<div className={`px-2`}>
<div className="flex justify-between mt-2">
<h1 className="text-4xl font-bold mb-auto text-light-main dark:text-dark-main text-3xl">
{getTitleBySlug(thread.board_id)}
</h1>
<div className="flex justify-center flex-col items-center">
{/* ToDo: create component for tag within Thread Block */}
{thread.group_id && (
<img
src={getSchoolIconPath(thread.group_id, "en")}
width={40}
height={40}
/>
)}
{!isPreview && (
<div
onClick={() => navigate(-1)}
className="mt-2 cursor-pointer text-light-text1 dark:text-dark-text1 hover:text-light-text2 dark:hover:text-dark-text2 w-fit"
>
<ArrowBackIcon fontSize="large" />
</div>
)}
{/* ^ This line goes to parent board on click while in thread */}
<div className={`px-2`}>
<div className="flex justify-between mt-2">
<h1 className="text-4xl font-bold mb-auto text-light-main dark:text-dark-main text-3xl">
{getTitleBySlug(thread.board_id)}
</h1>
<div className="flex justify-center flex-col items-center">
{/* ToDo: create component for tag within Thread Block */}
{thread.group_id && (
<img
src={getSchoolIconPath(thread.group_id, "en")}
width={40}
height={40}
/>
)}

{/* ToDO: There is no author for now will add later on */}
{/* <h2 className="text-sm text-light-text2 my-auto">
{thread.author}
</h2> */}
{/* editModalOpen && (
<EditThreadForm
originalTitle={thread.title}
originalBody={thread.body}
updateThread={updateThread}
closeForm={() => setEditModalOpen(false)}
/>
) */}
</div>
{/* ToDO: There is no author for now will add later on */}
{/* <h2 className="text-sm text-light-text2 my-auto">
{thread.author}
</h2> */}
{/* editModalOpen && (
<EditThreadForm
originalTitle={thread.title}
originalBody={thread.body}
updateThread={updateThread}
closeForm={() => setEditModalOpen(false)}
/>
) */}
</div>
<h2
className="justify-left pt-4 text-light-text1 dark:text-dark-text1"
style={{ whiteSpace: "pre-line" }}
>
{convertUrlsToLinks(isPreview, thread.body)}
</h2>
</div>
{/* <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
{" "}
{`# ${thread.tag_id}`}
</div> */}
<hr className="mx-2 pt-2 mt-6" />
<div className="flex flex-row justify-evenly pt-2 items-center">
<div className="flex flex-row items-center content-center">
<button onClick={handleLike} className="clipboard-icon group">
<Favorite color={userLiked ? "error" : undefined} />
<span className="clipboard-tooltip group-hover:scale-100 text-lg">
Liked
</span>
</button>
<h3>
<span>{" "}</span>
<span>{totalLikes}</span>
</h3>
</div>
<h3>
<TextsmsIcon />
</h3>
<button className="clipboard-icon group" onClick={handleShare}>
<Share />
<span className="clipboard-tooltip group-hover:scale-100">
Link Copied!
<h2
className="justify-left pt-4 text-light-text1 dark:text-dark-text1"
style={{ whiteSpace: "pre-line" }}
>
{convertUrlsToLinks(isPreview, thread.body)}
</h2>
</div>
{/* <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
{" "}
{`# ${thread.tag_id}`}
</div> */}
<hr className="mx-2 pt-2 mt-6" />
<div className="flex flex-row justify-evenly pt-2 items-center">
<div className="flex flex-row items-center content-center">
<button onClick={handleLike} className="clipboard-icon group">
<Favorite color={userLiked ? "error" : undefined} />
<span className="clipboard-tooltip group-hover:scale-100 text-lg">
Liked
</span>
</button>
<h3 className="items-center">
<Visibility /> <span>{thread.views}</span>
<h3>
<span>{" "}</span>
<span>{totalLikes}</span>
</h3>
{
// userToken?.length > 0 && thread.uid === userToken && (
userToken?.length > 0 && thread.mod === true && (
<div>
{/* <button onClick={openThreadEditForm}>
<EditIcon fontSize="large" color="warning" />
</button> */}
<button onClick={confirmDeleteThread}>
<DeleteIcon fontSize="large" color="error" />
</button>
{deleteModalOpen && (
<ConfirmModal
questionText="Are you sure to delete this thread?"
confirmText="Yes, delete it"
cancelText="No, keep it"
confirmAction={deleteThread}
cancelAction={() => setDeleteModalOpen(false)}
/>
)}
</div>
)
}
</div>
<h3>
<TextsmsIcon />
</h3>
<button className="clipboard-icon group" onClick={handleShare}>
<Share />
<span className="clipboard-tooltip group-hover:scale-100">
Link Copied!
</span>
</button>
<h3 className="items-center">
<Visibility /> <span>{thread.views}</span>
</h3>
{
// userToken?.length > 0 && thread.uid === userToken && (
userToken?.length > 0 && thread.mod === true && (
<div>
{/* <button onClick={openThreadEditForm}>
<EditIcon fontSize="large" color="warning" />
</button> */}
<button onClick={confirmDeleteThread}>
<DeleteIcon fontSize="large" color="error" />
</button>
{deleteModalOpen && (
<ConfirmModal
questionText="Are you sure to delete this thread?"
confirmText="Yes, delete it"
cancelText="No, keep it"
confirmAction={deleteThread}
cancelAction={() => setDeleteModalOpen(false)}
/>
)}
</div>
)
}
</div>
</Link>
</div>
);
};

return (
<Block actions={actions}>
{isPreview ? (
<Link
to={
fromRoot
? `${thread.board_id}/${thread.thread_id}`
: `${thread.thread_id}`
}
>
{renderContent()}
</Link>
) : (
renderContent()
)}
</Block>
);
};
Expand Down