admin/developer-roadmap
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: migrate from preact to react (#4435)

Browse Source
This commit is contained in:
Kamran Ahmed authored and GitHub committed 2023-08-31 17:19:18 +01:00
1 parent c274feced1
commit 5c57a84e82
142 files changed
+931 -907
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/TeamMembers/InviteMemberPopup.tsx
+11 -9
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'preact/hooks';
import { FormEvent, useEffect, useRef, useState } from 'react';
import { httpPost } from '../../lib/http';
import { useTeamId } from '../../hooks/use-team-id';
import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -24,7 +24,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
emailRef?.current?.focus();
}, []);
const handleSubmit = async (e: Event) => {
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsLoading(true);
setError('');
@@ -55,19 +55,21 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
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 className="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 className="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"
className="popup-body relative rounded-lg bg-white p-4 shadow"
>
<h3 class="mb-1.5 text-xl sm:text-2xl font-medium">Invite Member</h3>
<p className="mb-3 text-sm leading-none text-gray-400 hidden sm:block">
<h3 className="mb-1.5 text-xl font-medium sm:text-2xl">
Invite Member
</h3>
<p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
Enter the email and role below to invite a member.
</p>
<form onSubmit={handleSubmit}>
<div className="mt-0 sm:mt-4 my-4 flex flex-col gap-2">
<div className="my-4 mt-0 flex flex-col gap-2 sm:mt-4">
<input
ref={emailRef}
type="email"
@@ -108,7 +110,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
<button
type="submit"
disabled={isLoading || !email}
class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
>
{isLoading ? 'Please wait ..' : 'Invite'}
</button>
src/components/TeamMembers/LeaveTeamButton.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { useState } from 'preact/hooks';
import { useState } from 'react';
import { LeaveTeamPopup } from './LeaveTeamPopup';
type LeaveTeamButtonProps = {
src/components/TeamMembers/LeaveTeamPopup.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'preact/hooks';
import { useEffect, useRef, useState } from 'react';
import { httpDelete } from '../../lib/http';
import { useTeamId } from '../../hooks/use-team-id';
import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -59,13 +59,13 @@ export function LeaveTeamPopup(props: LeaveTeamPopupProps) {
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 className="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 className="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"
className="popup-body relative rounded-lg bg-white p-4 shadow"
>
<h2 class="text-2xl font-semibold text-black">
<h2 className="text-2xl font-semibold text-black">
Leave Team
</h2>
<p className="text-gray-500">
src/components/TeamMembers/MemberActionDropdown.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { useRef, useState } from 'preact/hooks';
import { useRef, useState } from 'react';
import type { TeamMemberDocument } from './TeamMembersPage';
import MoreIcon from '../../icons/more-vertical.svg';
import { useOutsideClick } from '../../hooks/use-outside-click';
src/components/TeamMembers/TeamMemberItem.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { MemberActionDropdown } from './MemberActionDropdown';
import { MemberRoleBadge } from './RoleBadge';
import type { TeamMemberItem } from './TeamMembersPage';
import { $canManageCurrentTeam } from '../../stores/team';
import { useStore } from '@nanostores/preact';
import { useStore } from '@nanostores/react';
type TeamMemberProps = {
member: TeamMemberItem;
@@ -91,7 +91,7 @@ export function TeamMemberItem(props: TeamMemberProps) {
</div>
<div className="flex shrink-0 items-center text-sm">
<span class={'hidden sm:block'}>
<span className={'hidden sm:block'}>
<MemberRoleBadge role={member.role} />
</span>
{canManageCurrentTeam && (
src/components/TeamMembers/TeamMembersPage.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from 'preact/hooks';
import { useEffect, useState } from 'react';
import { httpDelete, httpGet, httpPatch } from '../../lib/http';
import { useAuth } from '../../hooks/use-auth';
import { pageProgressMessage } from '../../stores/page';
@@ -9,7 +9,7 @@ import type { AllowedMemberStatus } from '../TeamDropdown/TeamDropdown';
import { InviteMemberPopup } from './InviteMemberPopup';
import { getUrlParams } from '../../lib/browser';
import { UpdateMemberPopup } from './UpdateMemberPopup';
import { useStore } from '@nanostores/preact';
import { useStore } from '@nanostores/react';
import { $canManageCurrentTeam } from '../../stores/team';
import { useToast } from '../../hooks/use-toast';
import { TeamMemberItem } from './TeamMemberItem';
src/components/TeamMembers/UpdateMemberPopup.tsx
+12 -10
View File
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'preact/hooks';
import { httpPost, httpPut } from '../../lib/http';
import { FormEvent, useRef, useState } from 'react';
import { httpPut } from '../../lib/http';
import { useTeamId } from '../../hooks/use-team-id';
import { useOutsideClick } from '../../hooks/use-outside-click';
import { AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
@@ -20,7 +20,7 @@ export function UpdateMemberPopup(props: InviteMemberPopupProps) {
const [error, setError] = useState('');
const { teamId } = useTeamId();
const handleSubmit = async (e: Event) => {
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsLoading(true);
setError('');
@@ -52,19 +52,21 @@ export function UpdateMemberPopup(props: InviteMemberPopupProps) {
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 className="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 className="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"
className="popup-body relative rounded-lg bg-white p-4 shadow"
>
<h3 class="mb-1.5 text-xl sm:text-2xl font-medium">Update Role</h3>
<p className="mb-3 text-sm leading-none text-gray-400 hidden sm:block">
<h3 className="mb-1.5 text-xl font-medium sm:text-2xl">
Update Role
</h3>
<p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
Select the role to update for this member
</p>
<form onSubmit={handleSubmit}>
<div className="mt-0 sm:mt-4 my-4 flex flex-col gap-2">
<div className="my-4 mt-0 flex flex-col gap-2 sm:mt-4">
<span className="mt-2 block w-full rounded-md bg-gray-100 p-2">
{member.invitedEmail}
</span>
@@ -96,7 +98,7 @@ export function UpdateMemberPopup(props: InviteMemberPopupProps) {
<button
type="submit"
disabled={isLoading || !selectedRole}
class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
>
{isLoading ? 'Please wait ..' : 'Update Role'}
</button>