Skip to content

Commit

Permalink
made all tabs fit to change
Browse files Browse the repository at this point in the history
  • Loading branch information
devmachine committed Jul 21, 2022
1 parent d76ea5f commit 1f25e72
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 33 deletions.
21 changes: 10 additions & 11 deletions src/components/WhitelistCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,27 +182,26 @@ function WhitelistCard({

<div className="w-full">
<p className="text-lg font-bold">{sourceServer?.name}</p>
<p className="text-xs italic">must be in "{targetServer?.name}" DAO</p>
{!numOfElements && <p className="text-xs italic">must be in "{targetServer?.name}" DAO</p>}
<p className="text-xs italic"> Type: Whitelist </p>
</div>

</div>
</div>

<div className="py-4 px-6 flex-col flex" >

{showMore ?
{!numOfElements && (showMore ?
<span className='mb-3'>
{description}
{description?.length > 100 ? <span className="ml-2 text-sky-500 cursor-pointer" onClick={()=> setShowMore((n)=>!n)}>{showMore ? '(Less)' : '(More)'}</span> : ''}
</span> :
<span className='mb-3'>
{description?.substring(0, 100)}
{description?.length > 100 ? <span className="ml-2 text-sky-500 cursor-pointer" onClick={()=> setShowMore((n)=>!n)}>{showMore ? '(Less)' : '(More)'}</span> : ''}
</span>
{description?.length > 100 ? <span className="ml-2 text-sky-500 cursor-pointer" onClick={()=> setShowMore((n)=>!n)}>{showMore ? '(Show Less)' : '(Show More)'}</span> : ''}
</span>)
}

<div className="whitelistInfo grid grid-cols-2">
{!numOfElements && <div className="whitelistInfo grid grid-cols-2">
<p>Type </p>
<p>{type.toUpperCase()}</p>

Expand Down Expand Up @@ -231,9 +230,9 @@ function WhitelistCard({
<div hidden={expired || expired === undefined}>
<TimeAgo setExpired={setExpired} date={expiration_date}/>
</div>
</div>
</div>}

{(tabButton === 'myDoa' || tabButton === 'live') && isEditWhitelist &&
{!numOfElements && (tabButton === 'myDoa' || tabButton === 'live') && isEditWhitelist &&
<div className=' text-xl flex justify-center mt-5'>
<div className={`seamless-tab-btn-active-colored edit-btn w-50 h-10 `} onClick={()=>{
history.replace({pathname:`seamlessdetail/${sourceServer?.discordGuildId}`,state:{id:id,editForm:true,discordGuildId:targetServer?.discordGuildId,sourceServer:sourceServer}})
Expand All @@ -251,7 +250,7 @@ function WhitelistCard({
}

{/* button! */}
{expired !== undefined && !iMod && <IonButton css={css`
{!numOfElements && expired !== undefined && !iMod && <IonButton css={css`
--background: linear-gradient(93.86deg, #6FDDA9 0%, #6276DF 100%);
`} className="my-2 self-center"

Expand Down Expand Up @@ -406,9 +405,9 @@ function WhitelistCard({
</IonButton> */}


</div>
</div>

</div>
</div>
);
}

Expand Down
46 changes: 24 additions & 22 deletions src/pages/bots/WhitelistMarketplace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,13 +131,10 @@ function WhitelistMarketplace() {
if (whitelist.claims?.some((cl: any) => cl.user?.discordId === userId)) whiteListMyClaim.push(whitelist);
}

let aaa = getGroupFromList(whiteListMyDao);
console.log('-----------------aaa');
console.log(aaa);
// setLiveWhiteList(getGroupFromList(whiteListLive));
// setExpireWhiteList(getGroupFromList(whiteListExpire));
setLiveWhiteList(getGroupFromList(whiteListLive));
setExpireWhiteList(getGroupFromList(whiteListExpire));
setMyDaoWhiteList(getGroupFromList(whiteListMyDao));
// setMyClaimWhiteList(getGroupFromList(whiteListMyClaim));
setMyClaimWhiteList(getGroupFromList(whiteListMyClaim));

return whitelists;
} catch (error) {
Expand Down Expand Up @@ -276,8 +273,6 @@ function WhitelistMarketplace() {
{/* if whitelists avail. */}
{whitelists && whitelists.length > 0 ?
<div>


{/* tabs on the top (Live vs Expired) */}
<div className=' text-xl flex justify-center mt-5'>
<div className={`${isTabButton === 'myDoa' ? 'seamless-tab-btn-active-colored' : 'seamless-tab-btn-deactive ' } w-50 h-10 `} onClick={()=>setIsTabButton('myDoa')}>
Expand Down Expand Up @@ -361,9 +356,14 @@ function WhitelistMarketplace() {
>
<div className="grid justify-center 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 gap-6 p-8">
{
liveWhiteList.length > 0 ? liveWhiteList.slice(0 ,rowsPerPage).map((whitelist:any) =>{
return (<WhitelistCard {...whitelist} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelist.id} deleteWhiteList={deleteWhiteList} />)
}): <div className='text-xl'> There are no whitelists available</div>
// liveWhiteList.length > 0 ? liveWhiteList.slice(0 ,rowsPerPage).map((whitelist:any) =>{
// return (<WhitelistCard {...whitelist} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelist.id} deleteWhiteList={deleteWhiteList} />)
// }): <div className='text-xl'> There are no whitelists available</div>
liveWhiteList.length > 0 ? liveWhiteList.slice(0 ,rowsPerPage).map((whitelistArray:any) => {
return whitelistArray.length>1
? (<WhitelistCard {...whitelistArray[0]} numOfElements={whitelistArray.length} setSourceServerId={setSourceServerId} tabButton={isTabButton} key={whitelistArray[0].sourceServer.id} deleteWhiteList={deleteWhiteList} />)
: (<WhitelistCard {...whitelistArray[0]} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelistArray[0].id} deleteWhiteList={deleteWhiteList} />)
}) : <div className='text-xl'> There are no whitelists available</div>
}
</div>
</InfiniteScroll>
Expand All @@ -389,8 +389,10 @@ function WhitelistMarketplace() {
>
<div className="grid justify-center 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 gap-6 p-8">
{
expireWhiteList.length > 0 ? expireWhiteList.slice(0 ,rowsPerPage).map((whitelist:any) => {
return(<WhitelistCard {...whitelist} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelist.id} deleteWhiteList={deleteWhiteList} />)
expireWhiteList.length > 0 ? expireWhiteList.slice(0 ,rowsPerPage).map((whitelistArray:any) => {
return whitelistArray.length>1
? (<WhitelistCard {...whitelistArray[0]} numOfElements={whitelistArray.length} setSourceServerId={setSourceServerId} tabButton={isTabButton} key={whitelistArray[0].sourceServer.id} deleteWhiteList={deleteWhiteList} />)
: (<WhitelistCard {...whitelistArray[0]} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelistArray[0].id} deleteWhiteList={deleteWhiteList} />)
}) : <div className='text-xl'> There are no whitelists available</div>
}
</div>
Expand All @@ -417,8 +419,13 @@ function WhitelistMarketplace() {
>
<div className="grid justify-center 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 gap-6 p-8">
{
myClaimWhiteList.length > 0 ? myClaimWhiteList.slice(0 ,rowsPerPage).map((whitelist:any) => {
return(<WhitelistCard {...whitelist} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelist.id} deleteWhiteList={deleteWhiteList} />)
// myClaimWhiteList.length > 0 ? myClaimWhiteList.slice(0 ,rowsPerPage).map((whitelist:any) => {
// return(<WhitelistCard {...whitelist} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelist.id} deleteWhiteList={deleteWhiteList} />)
// }) : <div className='text-xl'> There are no whitelists available</div>
myClaimWhiteList.length > 0 ? myClaimWhiteList.slice(0 ,rowsPerPage).map((whitelistArray:any) => {
return whitelistArray.length>1
? (<WhitelistCard {...whitelistArray[0]} numOfElements={whitelistArray.length} setSourceServerId={setSourceServerId} tabButton={isTabButton} key={whitelistArray[0].sourceServer.id} deleteWhiteList={deleteWhiteList} />)
: (<WhitelistCard {...whitelistArray[0]} isExploding={isExploding} setIsExploding={setIsExploding} tabButton={isTabButton} key={whitelistArray[0].id} deleteWhiteList={deleteWhiteList} />)
}) : <div className='text-xl'> There are no whitelists available</div>
}
</div>
Expand All @@ -436,18 +443,13 @@ function WhitelistMarketplace() {
</div>
</div>





// if loading
: <>{ isLoading ? <div className='flex justify-center'> <Loader /> </div>
// no whitelists
: <div className='text-center text-xl mt-6'>There are no whitelists available</div> }
</> }


<IonModal isOpen={modelConfirmation.show} onDidDismiss={() => setModelConfirmation({...modelConfirmation,show:false,id:null})} >
<IonModal isOpen={modelConfirmation.show} onDidDismiss={() => setModelConfirmation({...modelConfirmation,show:false,id:null})} cssClass={isMobile ? 'logout-modal-mobile' :'logout-modal-web'} >
<IonContent className="flex items-center" scroll-y="false">
<div className='text-xl font-bold text-center w-full mt-5'>
Confirm !
Expand All @@ -462,7 +464,7 @@ function WhitelistMarketplace() {
</IonContent>
</IonModal>

<IonModal isOpen={sourceServerId.length>0} onDidDismiss={() => setSourceServerId('')} cssClass={isMobile ? 'logout-modal-mobile' :'logout-modal-web'} >
<IonModal isOpen={sourceServerId.length>0} onDidDismiss={() => setSourceServerId('')} >
<IonContent className="flex items-center">
{
myDoaWhiteList.find((arr) => arr[0].sourceServer.id === sourceServerId)?.map((whitelist:any) => {
Expand Down

0 comments on commit 1f25e72

Please sign in to comment.