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.

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

Feature/scroll to previous position 1750 #1758

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
9 changes: 9 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/app/(main)/(pages)/home/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Greeting } from '@/components/Greeting';
import { MyCourses } from '@/components/MyCourses';
import { Redirect } from '@/components/Redirect';
import { getServerSession } from 'next-auth';
import { ScrollToTopButton } from '@/components/ScrollToTopButton';

export default async function MyCoursesPage() {
const session = await getServerSession();
Expand All @@ -21,6 +22,7 @@ export default async function MyCoursesPage() {
<div className="flex h-full flex-col gap-4 rounded-2xl py-4">
<MyCourses />
</div>
<ScrollToTopButton />
</main>
);
}
22 changes: 13 additions & 9 deletions src/app/courses/[courseId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { QueryParams } from '@/actions/types';
import { CourseView } from '@/components/CourseView';
import { getCourse, getFullCourseContent } from '@/db/course';
import findContentById from '@/lib/find-content-by-id';
import { ScrollToTopButton } from '@/components/ScrollToTopButton';

export default async function Course({
params,
Expand All @@ -19,14 +20,17 @@ export default async function Course({
const nextContent = null;

return (
<CourseView
rest={[]}
course={course}
nextContent={nextContent}
courseContent={courseContent}
fullCourseContent={fullCourseContent}
searchParams={searchParams}
possiblePath=""
/>
<div>
<CourseView
rest={[]}
course={course}
nextContent={nextContent}
courseContent={courseContent}
fullCourseContent={fullCourseContent}
searchParams={searchParams}
possiblePath=""
/>
<ScrollToTopButton />
</div>
);
}
13 changes: 13 additions & 0 deletions src/components/ArrowUpIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export function ArrowUpIcon() {
return (
<svg
fill="#ffffff"
width="32px"
height="32px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M7,3.70710678 L7,10.5 C7,10.7761424 6.77614237,11 6.5,11 C6.22385763,11 6,10.7761424 6,10.5 L6,3.70710678 L4.85355339,4.85355339 C4.65829124,5.04881554 4.34170876,5.04881554 4.14644661,4.85355339 C3.95118446,4.65829124 3.95118446,4.34170876 4.14644661,4.14644661 L6.14644661,2.14644661 C6.34170876,1.95118446 6.65829124,1.95118446 6.85355339,2.14644661 L8.85355339,4.14644661 C9.04881554,4.34170876 9.04881554,4.65829124 8.85355339,4.85355339 C8.65829124,5.04881554 8.34170876,5.04881554 8.14644661,4.85355339 L7,3.70710678 Z M14,9.5 L14,12.0474376 C14,12.3783481 13.8839855,12.698786 13.6721417,12.9529985 C13.1720143,13.5531514 12.2800608,13.6342381 11.6799078,13.1341106 L10.7560738,12.3642489 C10.4736449,12.1288916 10.11764,12 9.75,12 C9.48363526,12 9.24082605,12.1526146 9.12532205,12.3926334 L9.08962348,12.4668155 C8.95447865,12.7476481 8.99541029,13.0814869 9.19439734,13.321352 L13.607865,18.6414804 C14.3217788,19.502054 15.3818498,20 16.5,20 C18.9852814,20 21,17.9852814 21,15.5 L21,11.5 C21,11.2238576 20.7761424,11 20.5,11 C20.2238576,11 20,11.2238576 20,11.5 L20,12.5 C20,12.7761424 19.7761424,13 19.5,13 C19.2238576,13 19,12.7761424 19,12.5 L19,10.5 C19,10.22385763 18.7761424,10 18.5,10 C18.2238576,10 18,10.2238576 18,10.5 L18,12.5 C18,12.7761424 17.7761424,13 17.5,13 C17.2238576,13 17,12.7761424 17,12.5 L17,9.5 C17,9.22385763 16.7761424,9 16.5,9 C16.2238576,9 16,9.22385763 16,9.5 L16,12.5 C16,12.7761424 15.7761424,13 15.5,13 C15.2238576,13 15,12.7761424 15,12.5 L15,5.5 C15,5.22385763 14.7761424,5 14.5,5 C14.2238576,5 14,5.22385763 14,5.5 L14,9.5 Z M13,9.49999981 L13,5.5 C13,4.67157288 13.6715729,4 14.5,4 C15.3284271,4 16,4.67157288 16,5.5 L16,8.08535285 C16.1563895,8.03007711 16.3246823,8 16.5,8 C17.191734,8 17.7741062,8.46823386 17.9474595,9.10504462 C18.1184541,9.03725677 18.3048761,9 18.5,9 C19.191734,9 19.7741062,9.46823386 19.9474595,10.1050446 C20.1184541,10.0372568 20.3048761,10 20.5,10 C21.3284271,10 22,10.6715729 22,11.5 L22,15.5 C22,18.5375661 19.5375661,21 16.5,21 C15.0842933,21 13.7421216,20.3695431 12.8382246,19.279958 L8.42475695,13.9598296 C7.97611908,13.4190278 7.88383427,12.6663521 8.18853292,12.0331845 L8.2242315,11.9590024 C8.50634865,11.3727595 9.09940726,11 9.75,11 C10.3515765,11 10.9341143,11.2109078 11.3962582,11.5960277 L12.3200922,12.3658894 C12.4959683,12.5124527 12.7573571,12.4886901 12.9039205,12.3128141 C12.9660017,12.2383166 13,12.1444116 13,12.0474376 L13,9.5 Z"/>
</svg>
);
}
40 changes: 40 additions & 0 deletions src/components/ScrollToTopButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
"use client";

import { useEffect, useState } from 'react';
import { ArrowUpIcon } from './ArrowUpIcon';

export function ScrollToTopButton() {
const [isVisible, setIsVisible] = useState(false);

const toggleVisibility = () => {
if (window.scrollY > 300) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};

const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};

useEffect(() => {
window.addEventListener('scroll', toggleVisibility);
return () => {
window.removeEventListener('scroll', toggleVisibility);
};
}, []);

return (
<button
onClick={scrollToTop}
className={`fixed bottom-4 right-4 p-2 bg-blue-500 rounded-full transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'} hover:bg-blue-700`}
style={{ display: isVisible ? 'block' : 'none' }}
>
<ArrowUpIcon />
</button>
);
}
18 changes: 14 additions & 4 deletions src/components/posts/form/form-vote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,29 @@ const VoteForm: React.FC<IVoteFormProps> = ({
toast.error(error);
},
});

const handleVote = (voteType: VoteType) => {
const isUpvote = voteType === VoteType.UPVOTE;
const isUserVote = userVoted && userVoteVal.voteType === voteType;

toast.promise(
execute({ voteType, questionId, answerId, currentPath, slug }),
voteType === VoteType.DOWNVOTE
isUserVote
? {
loading: 'Downvoting...',
success: 'Question has been downvoted.',
loading: isUpvote ? 'Removing upvote...' : 'Removing downvote...',
success: isUpvote ? 'Upvote removed.' : 'Downvote removed.',
error: 'Error',
}
: {
: isUpvote
? {
loading: 'Upvoting...',
success: 'Question has been upvoted.',
error: 'Error',
}
: {
loading: 'Downvoting...',
success: 'Question has been downvoted.',
error: 'Error',
},
);
};
Expand Down