mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-01-17 14:18:17 +01:00
Add team feedback popup (#4341)
* wip: submit feedback popup * wip: feedback popup state
This commit is contained in:
Arik Chakma
GitHub
parent
c43ee13c94
commit
e0eccaa30e
145
src/components/Feedback/SubmitFeedbackPopup.tsx
Normal file
145
src/components/Feedback/SubmitFeedbackPopup.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { useTeamId } from '../../hooks/use-team-id';
|
||||
import { useOutsideClick } from '../../hooks/use-outside-click';
|
||||
import { useKeydown } from '../../hooks/use-keydown';
|
||||
import { httpPost } from '../../lib/http';
|
||||
import { CheckIcon } from '../ReactIcons/CheckIcon';
|
||||
|
||||
type SubmitFeedbackPopupProps = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
|
||||
const { onClose } = props;
|
||||
|
||||
const toast = useToast();
|
||||
const popupBodyEl = useRef<HTMLDivElement>(null);
|
||||
const inputEl = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [feedbackText, setFeedbackText] = useState('');
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const { teamId } = useTeamId();
|
||||
|
||||
useOutsideClick(popupBodyEl, () => {
|
||||
onClose();
|
||||
});
|
||||
|
||||
useKeydown('Escape', () => {
|
||||
onClose();
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
inputEl.current?.focus();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
const { response, error } = await httpPost<{ status: 'ok' }>(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-submit-team-feedback/${teamId}`,
|
||||
{
|
||||
feedback: feedbackText,
|
||||
}
|
||||
);
|
||||
|
||||
if (error || !response) {
|
||||
setIsLoading(false);
|
||||
setError(error?.message || 'Something went wrong');
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Team feedback submitted successfully');
|
||||
setIsSuccess(true);
|
||||
};
|
||||
|
||||
const handleClosePopup = () => {
|
||||
setIsLoading(false);
|
||||
setError('');
|
||||
setFeedbackText('');
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
|
||||
<div class="relative h-full w-full max-w-md p-4 md:h-auto">
|
||||
<div
|
||||
ref={popupBodyEl}
|
||||
class="popup-body relative rounded-lg bg-white p-4 shadow"
|
||||
>
|
||||
{!isSuccess && (
|
||||
<>
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Enter your feedback
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="my-4">
|
||||
<textarea
|
||||
ref={inputEl}
|
||||
name="submit-feedback"
|
||||
id="submit-feedback"
|
||||
className="mt-2 block min-h-[150px] w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
|
||||
placeholder="Enter your feedback"
|
||||
required
|
||||
autoFocus
|
||||
value={feedbackText}
|
||||
onInput={(e) =>
|
||||
setFeedbackText((e.target as HTMLInputElement).value)
|
||||
}
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isLoading}
|
||||
onClick={handleClosePopup}
|
||||
className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
disabled={isLoading}
|
||||
type="submit"
|
||||
className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-white disabled:opacity-40"
|
||||
>
|
||||
{isLoading ? 'Please wait ..' : 'Send'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isSuccess && (
|
||||
<div className="flex w-full flex-col items-center">
|
||||
<CheckIcon additionalClasses="w-16 h-16 text-green-500" />
|
||||
<h1 className="mt-4 text-xl font-semibold text-black sm:text-2xl">
|
||||
Feedback Submitted
|
||||
</h1>
|
||||
<p className="text-center text-sm text-gray-500 sm:text-base">
|
||||
Thank you for submitting your feedback.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClosePopup}
|
||||
className="mt-8 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -9,19 +9,18 @@ import MapIcon from '../icons/map.svg';
|
||||
import GroupIcon from '../icons/group.svg';
|
||||
import { useState } from 'preact/hooks';
|
||||
import { useStore } from '@nanostores/preact';
|
||||
import { $canManageCurrentTeam, $currentTeam } from '../stores/team';
|
||||
import { WarningIcon } from './ReactIcons/WarningIcon';
|
||||
import { $currentTeam } from '../stores/team';
|
||||
import { SubmitFeedbackPopup } from './Feedback/SubmitFeedbackPopup';
|
||||
|
||||
export const TeamSidebar: FunctionalComponent<{
|
||||
activePageId: string;
|
||||
}> = ({ activePageId, children }) => {
|
||||
const [menuShown, setMenuShown] = useState(false);
|
||||
const currentTeam = useStore($currentTeam);
|
||||
const [showFeedbackPopup, setShowFeedbackPopup] = useState(false);
|
||||
|
||||
const { teamId } = useTeamId();
|
||||
|
||||
const feedbackFormLink = 'https://forms.gle/g9h6yEqsG4y1hQUv5';
|
||||
|
||||
const sidebarLinks = [
|
||||
{
|
||||
title: 'Progress',
|
||||
@ -105,22 +104,28 @@ export const TeamSidebar: FunctionalComponent<{
|
||||
})}
|
||||
|
||||
<li>
|
||||
<a
|
||||
href={feedbackFormLink}
|
||||
target={'_blank'}
|
||||
class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
|
||||
<button
|
||||
className={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
|
||||
onClick={() => setShowFeedbackPopup(true)}
|
||||
>
|
||||
<img
|
||||
alt={'menu icon'}
|
||||
src={ChatIcon}
|
||||
className="mr-2 h-4 w-4"
|
||||
alt={'menu icon'}
|
||||
src={ChatIcon}
|
||||
className="mr-2 h-4 w-4"
|
||||
/>
|
||||
Send Feedback
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{showFeedbackPopup && (
|
||||
<SubmitFeedbackPopup
|
||||
onClose={() => {
|
||||
setShowFeedbackPopup(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div class="container flex min-h-screen items-stretch">
|
||||
<aside class="hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block">
|
||||
@ -162,10 +167,13 @@ export const TeamSidebar: FunctionalComponent<{
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<a href={feedbackFormLink} target={'_blank'} className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-gray-500 text-sm hover:text-black transition-colors hover:border-gray-300 hover:bg-gray-50">
|
||||
<button
|
||||
className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-sm text-gray-500 transition-colors hover:border-gray-300 hover:bg-gray-50 hover:text-black"
|
||||
onClick={() => setShowFeedbackPopup(true)}
|
||||
>
|
||||
<img src={ChatIcon} className="mr-2 h-4 w-4" />
|
||||
Send Feedback
|
||||
</a>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
<div className="grow px-0 py-0 md:px-10 md:py-10">{children}</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user