github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip: feedback popup state

Browse Source
feat/feedback
Arik Chakma 1 year ago
parent b8f502beed
commit 96619ee320
2 changed files with 46 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      src/components/Feedback/SubmitFeedbackPopup.tsx
  2. 27
      src/components/TeamSidebar.tsx

39
src/components/Feedback/SubmitFeedbackPopup.tsx
Unescape View File

@ -1,10 +1,10 @@
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";
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;
@ -41,7 +41,8 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
setError('');
const { response, error } = await httpPost<{ status: 'ok' }>(
`${import.meta.env.PUBLIC_API_URL}/v1-submit-team-feedback/${teamId}`, {
`${import.meta.env.PUBLIC_API_URL}/v1-submit-team-feedback/${teamId}`,
{
feedback: feedbackText,
}
);
@ -73,14 +74,16 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
>
{!isSuccess && (
<>
<h2 class="text-2xl font-semibold text-black">Enter your feedback</h2>
<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 w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400 min-h-[150px]"
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
@ -118,16 +121,18 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
)}
{isSuccess && (
<div className="flex flex-col items-center w-full">
<div className="flex w-full flex-col items-center">
<CheckIcon additionalClasses="w-16 h-16 text-green-500" />
<h1
className="text-xl sm:text-2xl font-semibold text-black mt-4"
>Feedback Submitted</h1>
<p className="text-sm sm:text-base text-gray-500 text-center">Thank you for submitting your feedback.</p>
<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="flex-grow text-center mt-8 w-full cursor-pointer rounded-lg bg-black py-2 text-white disabled:opacity-40"
className="mt-8 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
>
Close
</button>
@ -136,5 +141,5 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
</div>
</div>
</div>
)
);
}

27
src/components/TeamSidebar.tsx
Unescape View File

@ -9,8 +9,7 @@ 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<{
@ -18,12 +17,10 @@ export const TeamSidebar: FunctionalComponent<{
}> = ({ activePageId, children }) => {
const [menuShown, setMenuShown] = useState(false);
const currentTeam = useStore($currentTeam);
const [showFeedbackPopup, setShowFeedbackPopup] = useState(true);
const [showFeedbackPopup, setShowFeedbackPopup] = useState(false);
const { teamId } = useTeamId();
const feedbackFormLink = 'https://forms.gle/g9h6yEqsG4y1hQUv5';
const sidebarLinks = [
{
title: 'Progress',
@ -76,7 +73,8 @@ export const TeamSidebar: FunctionalComponent<{
<li>
<a
href="/team"
class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${activePageId === 'team' ? 'bg-slate-100' : ''
class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
activePageId === 'team' ? 'bg-slate-100' : ''
}`}
>
<img alt={'teams'} src={GroupIcon} class={`mr-2 h-4 w-4`} />
@ -90,7 +88,8 @@ export const TeamSidebar: FunctionalComponent<{
<li>
<a
href={sidebarLink.href}
class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${isActive ? 'bg-slate-100' : ''
class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
isActive ? 'bg-slate-100' : ''
}`}
>
<img
@ -120,9 +119,13 @@ export const TeamSidebar: FunctionalComponent<{
</ul>
)}
</div>
{showFeedbackPopup && <SubmitFeedbackPopup onClose={() => {
{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">
@ -136,7 +139,8 @@ export const TeamSidebar: FunctionalComponent<{
<li>
<a
href={sidebarLink.href}
class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${isActive
class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
isActive
? 'border-r-black bg-gray-100 text-black'
: 'border-r-transparent text-gray-500 hover:border-r-gray-300'
}`}
@ -163,7 +167,8 @@ export const TeamSidebar: FunctionalComponent<{
})}
</ul>
<button 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" />

Write Preview
Loading…
Cancel
Save