UniqueSoft/serpbear
2
0
Fork 0
mirror of https://github.com/towfiqi/serpbear synced 2025-06-26 18:15:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added Animation

Browse Source
This commit is contained in:
Towfiq
2022-11-27 23:10:47 +06:00
parent 277db6943f
commit 0d8a79cf28
7 changed files with 148 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/Modal.tsx
View File

@@ -30,7 +30,7 @@ const Modal = ({ children, width = '1/2', closeModal, title }:ModalProps) => {
return (
<div className='modal fixed top-0 left-0 bg-white/[.7] w-full h-screen z-50' onClick={closeOnBGClick}>
<div
className={` max-w-[340px] absolute top-1/4 left-0 right-0 ml-auto mr-auto w-${width}
className={`modal__content max-w-[340px] absolute top-1/4 left-0 right-0 ml-auto mr-auto w-${width}
lg:max-w-md bg-white shadow-md rounded-md p-5 border-t-[1px] border-gray-100 text-base`}>
{title && <h3 className=' font-semibold mb-3'>{title}</h3>}
<button

20
components/domains/DomainSettings.tsx
View File

@@ -5,7 +5,7 @@ import Modal from '../common/Modal';
import { useDeleteDomain, useUpdateDomain } from '../../services/domains';
type DomainSettingsProps = {
domain:Domain,
domain:Domain|false,
domains: Domain[],
closeModal: Function
}
@@ -24,15 +24,17 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
const { mutate: updateMutate } = useUpdateDomain(() => closeModal(false));
const { mutate: deleteMutate } = useDeleteDomain(() => {
closeModal(false);
const fitleredDomains = domains.filter((d:Domain) => d.domain !== domain.domain);
if (fitleredDomains[0] && fitleredDomains[0].slug) {
const fitleredDomains = domain && domains.filter((d:Domain) => d.domain !== domain.domain);
if (fitleredDomains && fitleredDomains[0] && fitleredDomains[0].slug) {
router.push(`/domain/${fitleredDomains[0].slug}`);
}
});
useEffect(() => {
setDomainSettings({ notification_interval: domain.notification_interval, notification_emails: domain.notification_emails });
}, [domain.notification_interval, domain.notification_emails]);
if (domain) {
setDomainSettings({ notification_interval: domain.notification_interval, notification_emails: domain.notification_emails });
}
}, [domain]);
const updateNotiEmails = (event:React.FormEvent<HTMLInputElement>) => {
setDomainSettings({ ...domainSettings, notification_emails: event.currentTarget.value });
@@ -55,9 +57,9 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
setTimeout(() => {
setSettingsError({ type: '', msg: '' });
}, 3000);
} else {
updateMutate({ domainSettings, domain });
}
} else if (domain) {
updateMutate({ domainSettings, domain });
}
};
return (
@@ -91,7 +93,7 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
</button>
</div>
</Modal>
{showRemoveDomain && (
{showRemoveDomain && domain && (
<Modal closeModal={() => setShowRemoveDomain(false) } title={`Remove Domain ${domain.domain}`}>
<div className='text-sm'>
<p>Are you sure you want to remove this Domain? Removing this domain will remove all its keywords.</p>

7
components/keywords/KeywordsTable.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useMemo } from 'react';
import { Toaster } from 'react-hot-toast';
import { CSSTransition } from 'react-transition-group';
import AddKeywords from './AddKeywords';
import { filterKeywords, keywordsByDevice, sortKeywords } from '../../utils/sortFilter';
import Icon from '../common/Icon';
@@ -156,13 +157,13 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
</div>
</Modal>
)}
{showAddModal && domain && (
<CSSTransition in={showAddModal} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
<AddKeywords
domain={domain.domain}
domain={domain?.domain || ''}
keywords={keywords}
closeModal={() => setShowAddModal(false)}
/>
)}
</CSSTransition>
{showTagManager && (
<KeywordTagManager
allTags={allDomainTags}