chore: disable teams

src/components/DeleteTeamPopup.tsx

@@ -4,7 +4,6 @@ import type { TeamDocument } from './CreateTeam/CreateTeamForm';
 import { useTeamId } from '../hooks/use-team-id';
 import { useOutsideClick } from '../hooks/use-outside-click';
 import { useKeydown } from '../hooks/use-keydown';
-import { useToast } from '../hooks/use-toast';
 
 type DeleteTeamPopupProps = {
   onClose: () => void;
@@ -13,7 +12,6 @@ type DeleteTeamPopupProps = {
 export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
   const { onClose } = props;
 
-  const toast = useToast();
   const popupBodyEl = useRef<HTMLDivElement>(null);
   const inputEl = useRef<HTMLInputElement>(null);
 
@@ -55,7 +53,6 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
       return;
     }
 
-    toast.success('Team deleted successfully');
     window.location.href = '/account';
   };
 
@@ -75,9 +72,9 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
             ref={popupBodyEl}
             class="popup-body relative rounded-lg bg-white p-4 shadow"
           >
-            <h2 class="text-2xl font-semibold text-black">Delete Team</h2>
-            <p className="text-gray-500">
-              This will permanently delete your team and all associated data.
+            <p>
+              This will permanently delete your account and all your associated
+              data including your progress.
             </p>
 
             <p class="-mb-2 mt-3 text-base font-medium text-black">

src/components/TeamDropdown/TeamDropdown.tsx

@@ -79,7 +79,7 @@ export function TeamDropdown() {
   if (
     !user?.email.endsWith('@insightpartners.com') &&
     !user?.email.endsWith('@roadmap.sh') &&
-    !['arikchangma@gmail.com', 'kamranahmed.se@gmail.com', 'stephen.chetcuti@gmail.com'].includes(user?.email!)
+    !['arikchangma@gmail.com', 'kamranahmed.se@gmail.com'].includes(user?.email!)
   ) {
     return null;
   }
@@ -101,8 +101,9 @@ export function TeamDropdown() {
             <img
               src={
                 selectedAvatar
-                  ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL
-                  }/${selectedAvatar}`
+                  ? `${
+                      import.meta.env.PUBLIC_AVATAR_BASE_URL
+                    }/${selectedAvatar}`
                   : '/images/default-avatar.png'
               }
               alt=""

src/components/TeamMembers/LeaveTeamButton.tsx

@@ -1,30 +1,40 @@
-import { useState } from 'preact/hooks';
-import { LeaveTeamPopup } from './LeaveTeamPopup';
+import { useState } from "preact/hooks";
+import { httpDelete } from "../../lib/http";
+import { Spinner } from "../ReactIcons/Spinner";
+import { useToast } from "../../hooks/use-toast";
 
 type LeaveTeamButtonProps = {
   teamId: string;
 };
 
 export function LeaveTeamButton(props: LeaveTeamButtonProps) {
-  const [showLeaveTeamPopup, setShowLeaveTeamPopup] = useState(false);
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const { teamId } = props;
+
+  async function leaveTeam() {
+    setIsLoading(true);
+    const { response, error } = await httpDelete(
+      `${import.meta.env.PUBLIC_API_URL}/v1-leave-team/${teamId}`,
+      {}
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    window.location.href = '/account';
+  }
 
   return (
-    <>
-      {showLeaveTeamPopup && (
-        <LeaveTeamPopup
-          onClose={() => {
-            setShowLeaveTeamPopup(false);
-          }}
-        />
-      )}
-      <button
-        onClick={() => {
-          setShowLeaveTeamPopup(true);
-        }}
-        className="flex h-7 min-w-[95px] items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm font-medium leading-none text-red-600"
-      >
-        Leave team
-      </button>
-    </>
-  );
+    <button
+      disabled={isLoading}
+      onClick={leaveTeam}
+      className="bg-gray-50 text-red-600 text-sm font-medium px-2 leading-none py-1.5 rounded-md border border-gray-200 h-7 flex items-center justify-center min-w-[95px]">
+      {isLoading ? <Spinner isDualRing={false} /> : 'Leave team'}
+    </button>
+  )
+
 }

src/components/TeamMembers/LeaveTeamPopup.tsx

@@ -1,124 +0,0 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { httpDelete } from '../../lib/http';
-import { useTeamId } from '../../hooks/use-team-id';
-import { useOutsideClick } from '../../hooks/use-outside-click';
-
-type LeaveTeamPopupProps = {
-  onClose: () => void;
-};
-
-export function LeaveTeamPopup(props: LeaveTeamPopupProps) {
-  const { onClose } = props;
-
-  const popupBodyRef = useRef<HTMLDivElement>(null);
-  const confirmationEl = useRef<HTMLInputElement>(null);
-  const [confirmationText, setConfirmationText] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const { teamId } = useTeamId();
-
-  useEffect(() => {
-    setError('');
-    setConfirmationText('');
-    confirmationEl?.current?.focus();
-  }, []);
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError('');
-
-    if (confirmationText.toUpperCase() !== 'LEAVE') {
-      setError('Verification text does not match');
-      setIsLoading(false);
-      return;
-    }
-
-    const { response, error } = await httpDelete(
-      `${import.meta.env.PUBLIC_API_URL}/v1-leave-team/${teamId}`,
-      {}
-    );
-
-    if (error || !response) {
-      setIsLoading(false);
-      setError(error?.message || 'Something went wrong');
-      return;
-    }
-
-    window.location.href = '/account';
-  };
-
-  const handleClosePopup = () => {
-    setIsLoading(false);
-    setError('');
-    setConfirmationText('');
-
-    onClose();
-  };
-
-  useOutsideClick(popupBodyRef, handleClosePopup);
-
-  return (
-    <div class="popup 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={popupBodyRef}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
-        >
-          <h2 class="text-2xl font-semibold text-black">
-            Leave Team
-          </h2>
-          <p className="text-gray-500">
-            You will lose access to the team, the roadmaps and progress of other team members.
-          </p>
-          <p className="-mb-2 mt-3 text-base font-medium text-black">
-            Please type "leave" to confirm.
-          </p>
-          <form onSubmit={handleSubmit}>
-            <div className="my-4">
-              <input
-                ref={confirmationEl}
-                type="text"
-                name="leave-team"
-                id="leave-team"
-                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"
-                placeholder={'Type "leave" to confirm'}
-                required
-                autoFocus
-                value={confirmationText}
-                onInput={(e) =>
-                  setConfirmationText((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
-                type="submit"
-                disabled={
-                  isLoading || confirmationText.toUpperCase() !== 'LEAVE'
-                }
-                className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
-              >
-                {isLoading ? 'Please wait ..' : 'Leave Team'}
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/TeamProgress/MemberProgressItem.tsx

@@ -60,7 +60,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                 >
                   <span className="relative z-10 flex items-center justify-between text-sm">
                     <span className="inline-grid">
-                      <span className={'truncate'}>{progress.resourceTitle}</span>
+                    <span className={'truncate'}>{progress.resourceTitle}</span>
                     </span>
                     <span className="text-xs text-gray-400 shrink-0 ml-1.5">
                       {progress.done} / {progress.total}

src/components/TeamProgress/TeamProgressPage.tsx

@@ -10,7 +10,6 @@ import { GroupRoadmapItem } from './GroupRoadmapItem';
 import { setUrlParams } from '../../lib/browser';
 import { getUrlParams } from '../../lib/browser';
 import { $toastMessage } from '../../stores/toast';
-import { useAuth } from '../../hooks/use-auth';
 
 export type UserProgress = {
   resourceTitle: string;
@@ -56,7 +55,6 @@ export function TeamProgressPage() {
   const [isLoading, setIsLoading] = useState(true);
   const toast = useToast();
   const currentTeam = useStore($currentTeam);
-  const user = useAuth();
 
   const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
   const [selectedGrouping, setSelectedGrouping] = useState<
@@ -72,10 +70,7 @@ export function TeamProgressPage() {
       return;
     }
 
-    const currentUserProgress = response.find((member) => member.email === user?.email)
-    const otherUserProgresses = response.filter(member => member.email !== user?.email);
-    const allUserProgresses = currentUserProgress ? [currentUserProgress, ...otherUserProgresses] : otherUserProgresses;
-    setTeamMembers(allUserProgresses);
+    setTeamMembers(response);
   }
 
   useEffect(() => {
@@ -139,10 +134,11 @@ export function TeamProgressPage() {
       <div className="flex items-center gap-2">
         {groupingTypes.map((grouping) => (
           <button
-            className={`rounded-md border p-1 px-2 text-sm ${selectedGrouping === grouping.value
-              ? ' border-gray-400 bg-gray-200 '
-              : ''
-              }`}
+            className={`rounded-md border p-1 px-2 text-sm ${
+              selectedGrouping === grouping.value
+                ? ' border-gray-400 bg-gray-200 '
+                : ''
+            }`}
             onClick={() => setSelectedGrouping(grouping.value)}
           >
             {grouping.label}

src/components/TeamSettings/UpdateTeamForm.tsx

@@ -267,6 +267,7 @@ export function UpdateTeamForm() {
           {isDeleting && (
             <DeleteTeamPopup
               onClose={() => {
+                toast.success('Team deleted successfully');
                 setIsDeleting(false);
               }}
             />

src/components/Toast.tsx

@@ -19,7 +19,7 @@ export function Toaster(props: Props) {
 
     const removeMessage = setTimeout(() => {
       if (toastMessage?.type !== 'loading') {
-        $toastMessage.set(undefined);
+        // $toastMessage.set(undefined);
       }
     }, 2500);