Skip to content

Commit

Permalink
Merge branch 'staging' of https://github.com/OpenQDev/OpenQ-Frontend …
Browse files Browse the repository at this point in the history 
…into no-date-global
  • Loading branch information
@Christopher-Stevers
Christopher-Stevers committed Apr 13, 2023
2 parents 1b79ae7 + e99c4da commit bdb4213
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 24 deletions.
8 changes: 5 additions & 3 deletions components/Claim/ClaimsTracking/ClaimsPerBounty/IndividualClaim/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import useWeb3 from '../../../../../hooks/useWeb3';

const IndividualClaim = ({ payout, bounty, index }) => {
const appState = useContext(StoreContext);
const { chainId, library } = useWeb3(true);
const { chainId, library, account } = useWeb3(true);
const token = appState[0].tokenClient.getToken(bounty?.payoutTokenAddress);
const formattedToken = ethers.utils.formatUnits(
ethers.BigNumber.from(payout.toString()),
Expand Down Expand Up @@ -61,7 +61,7 @@ const IndividualClaim = ({ payout, bounty, index }) => {
};
// console.log(bounty, token, associatedAddress);
return (
<div className='items-center gap-4 grid grid-cols-[4fr_1fr_1fr_1fr_1fr_1fr]'>
<div className='items-center gap-4 grid grid-cols-[3fr_1fr_0.5fr_0.5fr_0.75fr_0.5fr]'>
{githubUser?.url ? (
<div className='flex gap-2 '>
<Link href={githubUser?.url} target='_blank' className=' text-link-colour hover:underline '>
Expand All @@ -78,7 +78,9 @@ const IndividualClaim = ({ payout, bounty, index }) => {
<div className={`flex justify-center ${bounty.supportingDocumentsCompleted?.[index] && 'font-bold text-green'}`}>
{bounty.supportingDocumentsCompleted?.[index]?.toString().toUpperCase()}
</div>
<div className={`flex justify-center ${KYC && 'font-bold text-green'}`}>{KYC.toString().toUpperCase()}</div>
<div className={`flex justify-center ${KYC && 'font-bold text-green'}`}>
{account ? KYC.toString().toUpperCase() : 'n.a.*'}
</div>
<div className={`flex justify-center`}>
<Link
href={`https://polygonscan.com/address/${associatedAddress}`}
Expand Down
12 changes: 8 additions & 4 deletions components/Claim/ClaimsTracking/ClaimsPerBounty/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import React from 'react';
import Github from '../../../svg/github';
import IndividualClaim from './IndividualClaim';

const ClaimsPerBounty = ({ item }) => {
console.log('item', item);
const ClaimsPerBounty = ({ item, paginationState }) => {
const githubIdFilter = paginationState[0].filters.searchText?.githubId;
const claimFilter = paginationState[0].filters.searchText?.claimed;
return (
<div className='flex flex-col mb-4 lg:min-w-[900px] overflow-x-auto border border-web-gray rounded-sm p-4'>
<div className='flex flex-col mb-4 lg:min-w-[1000px] overflow-x-auto border border-web-gray rounded-sm p-4'>
<div className='flex items-center gap-4 mb-2'>
{item.alternativeName && (
<div className='break-word text-xl inline gap-1 pb-1'>
Expand All @@ -20,7 +21,7 @@ const ClaimsPerBounty = ({ item }) => {
<Github />
</Link>
</div>
<div className='items-center gap-4 grid grid-cols-[4fr_1fr_1fr_1fr_1fr_1fr] border-b border-web-gray pb-2 mb-2 font-bold'>
<div className='items-center gap-4 grid grid-cols-[3fr_1fr_0.5fr_0.5fr_0.75fr_0.5fr] border-b border-web-gray pb-2 mb-2 font-bold'>
<div className=''>TierWinner</div>
<div className='flex justify-center'>Planned</div>
<div className='flex justify-center'>W8/W9?</div>
Expand All @@ -29,6 +30,9 @@ const ClaimsPerBounty = ({ item }) => {
<div className='flex justify-center'>Claimed</div>
</div>
{item.payoutSchedule?.map((payout, index) => {
if (githubIdFilter && item.tierWinners?.[index] !== githubIdFilter) return;
if (claimFilter == 'true' && !item.claims?.some((claim) => claim.tier == index)) return;
if (claimFilter == 'false' && item.claims?.some((claim) => claim.tier == index)) return;
return (
<div key={index}>
{' '}
Expand Down
141 changes: 124 additions & 17 deletions components/Claim/ClaimsTracking/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,119 @@
import React, { useState, useContext } from 'react';

//Custom
import SearchBar from '../../Search/SearchBar';
import StoreContext from '../../../store/Store/StoreContext';
import PaginatedList from '../../../components/Utils/PaginatedList';
import { fetchBountiesWithServiceArg } from '../../../services/utils/lib';
import filterBounties from '../../BountyList/searchHelpers/filterBounties/index.js';
import LoadingIcon from '../../Loading/ButtonLoadingIcon';
import ClaimsPerBounty from './ClaimsPerBounty';

const ClaimsTracking = ({ paginationObj }) => {
const [appState] = useContext(StoreContext);
const getItems = async (oldCursor, batch, ordering, filters = {}) => {
return await fetchBountiesWithServiceArg(appState, oldCursor, batch, ordering, filters);
};
const paginationObjWithFunctions = { ...paginationObj, filterFunction: filterBounties, getItems };

const filterFunction = (item, filters) => {
console.log('item', item, filters);
const isBounty = filters.searchText?.issueText
? item.title?.toLowerCase().includes(filters.searchText.issueText.toLowerCase()) ||
item.alternativeName?.toLowerCase().includes(filters.searchText.issueText.toLowerCase())
: true;
const hasGithubId = filters.searchText?.githubId
? item.tierWinners?.some((tierWinner) => tierWinner == filters.searchText?.githubId)
: true;
const hasClaimedTiers =
filters.searchText?.claimed == 'true'
? item.payouts?.length > 0
: filters.searchText?.claimed == 'false'
? item.payouts?.length < item.payoutSchedule?.length
: true;
const show = isBounty && hasGithubId && hasClaimedTiers;
return show;
};

const paginationObjWithFunctions = { ...paginationObj, filterFunction: filterFunction, getItems };

// Hooks
const [appState] = useContext(StoreContext);
const paginationState = useState(paginationObjWithFunctions);
paginationState[0].filters.isReady = 'All issues';
const [paginationStateObj, setPaginationStateObj] = paginationState;
const { searchText } = paginationStateObj.filters;
const [renderedSearch, setRenderedSearch] = useState(searchText);
const [issueText, setIssueText] = useState(searchText);
const [filteredLength, setFilteredLength] = useState(0);
const [githubId, setGithubId] = useState('');
const [githubLogin, setGithubLogin] = useState('');

// Utilities

const setSearch = (searchText) => {
setRenderedSearch(searchText);
const setSearch = (searchType, searchedText) => {
setPaginationStateObj({
...paginationStateObj,
filters: {
...paginationStateObj.filters,
isReady: 'All issues',
searchText: searchText,
searchText: { ...searchText, [searchType]: searchedText },
},
});
};

const handleSearchInput = (e) => {
setSearch(e.target.value);
if (e.target.id === 'issueText') setIssueText(e.target.value);
if (e.target.id === 'githubId') setGithubId(e.target.value);
if (e.target.id === 'githubLogin') setGithubLogin(e.target.value);
};

const handleSelect = (e) => {
//it triggers by pressing the enter key
if (e.target.value == 'true') {
setSearch(e.target.id, e.target.value);
} else if (e.target.value == 'false') {
setSearch(e.target.id, e.target.value);
} else {
setSearch(e.target.id, 'all');
}
};

const handleKeyPress = (e) => {
//it triggers by pressing the enter key
if (e.key === 'Enter') {
setSearch(e.target.id, e.target.value);
if (e.target.id === 'githubId') setGithubLogin('');
}
};

const handleKeyPressLogin = (e) => {
//it triggers by pressing the enter key
if (e.key === 'Enter') {
setGithubId('');
const getGithubUser = async () => {
const githubUser = await appState.githubRepository.fetchUserByLogin(e.target.value);
if (githubUser) {
setSearch('githubId', githubUser.id);
setGithubId('');
}
};
try {
if (e.target.value) {
getGithubUser();
} else {
setSearch('githubId', '');
}
} catch (err) {
appState.logger.error(err, 'ClaimsTracking.js1');
}
}
};

// Render
return (
<div className='lg:col-start-2 justify-between justify-self-center space-y-4 w-full pb-8 max-w-[960px] mx-auto'>
<div className='flex flex-wrap gap-4 w-full items-center'>
<SearchBar
onKeyUp={handleSearchInput}
placeholder={'Search Issue...'}
searchText={renderedSearch}
label={'search text'}
styles={'rounded-sm w-full'}
<input
className='input-field'
id='issueText'
placeholder='Search Issue...'
value={issueText}
onChange={handleSearchInput}
onKeyDown={handleKeyPress}
/>
</div>
{paginationState[0].complete && filteredLength == 0 && (
Expand All @@ -63,6 +125,51 @@ const ClaimsTracking = ({ paginationObj }) => {
Searching... <LoadingIcon />
</div>
)}
<div className='flex flex-col mb-4 lg:min-w-[1000px] overflow-x-auto border border-web-gray rounded-sm p-4'>
<div className='mb-2'>Filter by:</div>
<div className='mb-2 text-sm text-mute italic'>
Note that all search input must be an exact match for the search fields below.
</div>
<div className='items-center gap-4 grid grid-cols-[3fr_1fr_0.5fr_0.5fr_0.75fr_0.5fr] border-b border-web-gray pb-2 mb-2 font-bold'>
<div className=''>TierWinner</div>
<div className='flex justify-center'>Planned</div>
<div className='flex justify-center'>W8/W9?</div>
<div className='flex justify-center'>KYC'd?</div>
<div className='flex justify-center'>Wallet</div>
<div className='flex justify-center'>Claimed</div>
</div>
<div className='items-center gap-4 grid grid-cols-[3fr_1fr_0.5fr_0.5fr_0.75fr_0.5fr] pb-2 mb-2'>
<div className='flex items-center gap-4'>
<input
className='input-field'
id='githubId'
placeholder='Github ID'
value={githubId}
onChange={handleSearchInput}
onKeyDown={handleKeyPress}
/>
{' OR '}
<input
className='input-field'
id='githubLogin'
placeholder='Github Login'
value={githubLogin}
onChange={handleSearchInput}
onKeyDown={handleKeyPressLogin}
/>
</div>

<div className='flex justify-center'>---</div>
<div className='flex justify-center'>---</div>
<div className='flex justify-center'>---</div>
<div className='flex justify-center'>---</div>
<select id='claimed' name='claimed' className='input-field' defaultValue={'all'} onChange={handleSelect}>
<option value='all'></option>
<option value='true'>TRUE</option>
<option value='false'>FALSE</option>
</select>
</div>
</div>
<PaginatedList
paginationState={paginationState}
PaginationCard={ClaimsPerBounty}
Expand Down
1 change: 1 addition & 0 deletions components/Utils/PaginatedList/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const PaginatedList = ({
length={filteredItems.length}
singleSubmission={singleSubmission}
setSingleSubmission={setSingleSubmission}
paginationState={paginationState}
/>
</div>
);
Expand Down
7 changes: 7 additions & 0 deletions pages/repo/[org]/[name].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { ChevronLeftIcon } from '@primer/octicons-react';
import Link from 'next/link';
import Image from 'next/image';
import ClaimsTracking from '../../../components/Claim/ClaimsTracking';
import useWeb3 from '../../../hooks/useWeb3';

const showcase = ({ org, name, renderError, orgData, repoData, paginationObj }) => {
// Context
Expand All @@ -31,6 +32,7 @@ const showcase = ({ org, name, renderError, orgData, repoData, paginationObj })
const [searchValue, setSearchValue] = useState('');
const [singleSubmission, setSingleSubmission] = useState(null);
const [showOverview, setShowOverview] = useState();
const { account } = useWeb3();
const githubId = appState.accountData.github;
useEffect(() => {
const updateIsAdmin = async () => {
Expand Down Expand Up @@ -224,6 +226,11 @@ const showcase = ({ org, name, renderError, orgData, repoData, paginationObj })
<div className='px-4 py-3 gap-6 w-full flex flex-wrap md:flex-nowrap'>
<div className='max-w-[960px] w-full md:basis-3/4 md:shrink'>
<h2 className='text-primary w-full mb-2'>Claims Overview</h2>
{!account && (
<div className='border-info-strong bg-info border-2 p-2 rounded-sm mb-4'>
* You need to connect your wallet to see whether a winner has KYC'd or not.
</div>
)}
<ClaimsTracking paginationObj={paginationObj} contractToggle={true} types={['0', '1', '2', '3']} />
</div>
</div>
Expand Down

0 comments on commit bdb4213

Please sign in to comment.