Feature/adding gig board #9
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react'; | ||
| import useServices from '../../hooks/useServices'; | ||
| import { ServiceStatusEnum } from '../../types'; | ||
| import ServiceItem from '../ServiceItem'; | ||
|
|
||
| interface IGigBoardProps { | ||
| buyerId: string; | ||
| status: ServiceStatusEnum; | ||
| title: string; | ||
| } | ||
| const GigBoard = (props: IGigBoardProps) => { | ||
| const { services, loading } = useServices( | ||
| props.status, | ||
| props.buyerId, | ||
| undefined, | ||
| undefined, | ||
| undefined, | ||
| ); | ||
|
|
||
| if (loading) { | ||
| return <div>Loading</div>; | ||
| } | ||
| if (services.length === 0) { | ||
| return <div>You have no services</div>; | ||
|
|
||
| } | ||
| return ( | ||
| <div> | ||
| <h1 className='text-title text-4xl mb-4'>{props.title}</h1> | ||
| {services.map(_service => ( | ||
| <div className='my-2'> | ||
| <ServiceItem key={_service.id} service={_service} /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GigBoard; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { useContext, useState } from 'react'; | ||
| import Image from 'next/image'; | ||
| import { useRouter } from 'next/router'; | ||
| import { parseRateAmount } from '../../../utils/web3'; | ||
| import { useChainId } from '../../../hooks/useChainId'; | ||
| import useAllowedTokens from '../../../hooks/useAllowedTokens'; | ||
| import StarterKitContext from '../../../context/starterKit'; | ||
| import Steps from '../../../components/Steps'; | ||
| import ServiceForm from '../../../components/Form/ServiceForm'; | ||
| import { formatDate } from '../../../utils/dates'; | ||
| import { renderTokenAmountFromConfig } from '../../../utils/conversion'; | ||
|
|
||
| interface ILiveServiceContent { | ||
| title?: string; | ||
| about?: string; | ||
| rateAmount?: string; | ||
| rateToken?: string; | ||
| } | ||
|
|
||
| const GigBoardCreator = () => { | ||
| const [liveServiceContent, setLiveServiceContent] = useState<ILiveServiceContent>({ | ||
| title: 'Enter a title', | ||
| rateToken: '0x0000000000000000000000000000000000000000', | ||
| rateAmount: '0', | ||
| }); | ||
|
|
||
| const chainId = useChainId(); | ||
| const allowedTokenList = useAllowedTokens(); | ||
| const { user } = useContext(StarterKitContext); | ||
| const router = useRouter(); | ||
| const navigateToGigBoardSettings = () => router.push('/dashboard/gig-board-create/settings'); | ||
|
|
||
| if (!user) { | ||
| return <Steps />; | ||
| } | ||
|
|
||
| return ( | ||
| <div className='max-w-7xl mx-auto text-gray-200 sm:px-4 lg:px-0'> | ||
| <p className='flex items-center text-2xl font-medium tracking-wider mb-8 border-b w-full border-gray-700'> | ||
| Post your First Gig | ||
| </p> | ||
| <div className='grid grid-cols-2 gap-2'> | ||
| <div> | ||
| <ServiceForm | ||
| onSuccess={navigateToGigBoardSettings} | ||
| onChange={(event: ILiveServiceContent) => { | ||
| // TODO: move this to an async function expression | ||
| if (event.rateAmount) { | ||
|
There was a problem hiding this comment. Best practices and perf improvement: |
||
| if (liveServiceContent?.rateToken) { | ||
| const token = allowedTokenList.find( | ||
| token => token.address === liveServiceContent.rateToken, | ||
| ); | ||
|
|
||
| if (token) { | ||
| parseRateAmount( | ||
| event.rateAmount.toString(), | ||
| liveServiceContent.rateToken, | ||
| token.decimals, | ||
| ).then(_parsedRateAmount => { | ||
| setLiveServiceContent({ | ||
| ...liveServiceContent, | ||
| rateAmount: _parsedRateAmount.toString(), | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| } else { | ||
| setLiveServiceContent({ ...liveServiceContent, ...event }); | ||
| } | ||
| }} | ||
| /> | ||
| <div className='mt-4 grid grid-cols-2'> | ||
| <div /> | ||
| <button | ||
| type='submit' | ||
| className='rounded-xl text-white' | ||
| onClick={navigateToGigBoardSettings}> | ||
| {'>'} Skip and configure your board | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div className='flex flex-row gap-2 rounded-xl p-4 border border-gray-700 text-white bg-endnight'> | ||
| <div className='flex flex-col items-top justify-between gap-4 w-full'> | ||
| <div className='flex flex-col justify-start items-start gap-4'> | ||
| <div className='flex items-center justify-start'> | ||
| <Image | ||
| src={`/images/default-avatar-${Number(user?.id) % 9}.jpeg`} | ||
| className='w-10 mr-4 rounded-full' | ||
| width={50} | ||
| height={50} | ||
| alt='default avatar' | ||
| /> | ||
| <div className='flex flex-col'> | ||
| <p className='font-medium break-all'>{liveServiceContent?.title}</p> | ||
| <p className='text-xs text-gray-400'> | ||
| created by {user?.handle} the {formatDate(Number(Date.now()) * 1000)} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <p>{liveServiceContent.about}</p> | ||
| </div> | ||
| <div className='flex flex-row gap-4 justify-between items-center border-t border-gray-700 pt-4'> | ||
| {liveServiceContent?.rateToken && liveServiceContent?.rateAmount && ( | ||
| <p className='text-gray-300 font-bold'> | ||
| {renderTokenAmountFromConfig( | ||
| chainId, | ||
| liveServiceContent.rateToken, | ||
| liveServiceContent.rateAmount, | ||
| )} | ||
| </p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GigBoardCreator; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The semantics used for the end user and the one used in the code is different. In the code, we use a more global term used also in smart contract: Service
Also I think Board is not as clear for the code and can be confusing as we also have a page which list services.
So globally, pages and components may be named: ServicesEmbed, ServicesEmbedSettings, create-services-embed