-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7b25716
commit 85f2ca4
Showing
5 changed files
with
152 additions
and
76 deletions.
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
158 changes: 110 additions & 48 deletions
158
ui/front/src/components/shared/referral-programm/referralProgramm.tsx
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 |
|---|---|---|
| @@ -1,54 +1,116 @@ | ||
| import { NavButton, Preload } from '@components/shared'; | ||
| import { useFetch } from '@libs/hooks/shared'; | ||
| import { useSelector } from '@libs/redux'; | ||
| import { NotificationPlacement } from '@types'; | ||
| import { message, notification } from 'antd'; | ||
| import { useCallback, useEffect, useMemo } from 'react'; | ||
| import { HOST } from '../git-auth/profile/constants'; | ||
| import styles from './referralProgramm.module.scss'; | ||
|
|
||
| import styles from './referralProgramm.module.scss' | ||
| import {NavButton} from "@components/shared"; | ||
| import React from "react"; | ||
| type Referral = { | ||
| user_id: number, | ||
| github_login:string, | ||
| created_at: string | ||
| }; | ||
|
|
||
| type RefferalsResponce = { | ||
| referred_by: number | null, | ||
| referrals: Referral[] | ||
| }; | ||
|
|
||
| const formatDate = (dateString:string) => { | ||
| const options:Intl.DateTimeFormatOptions = { | ||
| year: 'numeric', month: 'long', day: 'numeric' | ||
| }; | ||
|
|
||
| const date = new Date(dateString); | ||
|
|
||
| const dayAndYear = date.toLocaleString('en', options); | ||
| const time = date.toLocaleString('en', { timeStyle: 'short' }); | ||
| return `${dayAndYear} ${time}`; | ||
| }; | ||
|
|
||
| function ReferralProgramm() { | ||
| const id = useSelector((state) => state.profile.data.id); | ||
|
|
||
| const token = localStorage.getItem('token'); | ||
| const { data, loading, error } = useFetch<RefferalsResponce>(`${HOST}/user/referrals`, { | ||
| method: 'GET', | ||
| headers: { | ||
| Authorization: `Bearer ${token}` | ||
| } | ||
| }); | ||
|
|
||
| const handleCopyRefLink = useCallback(() => { | ||
| if (id) { | ||
| const repoLink = `${window.location.origin}/?ref_by=${id}`; | ||
| navigator.clipboard.writeText(repoLink); | ||
| return message.info(`${repoLink} copied to clipboard!`); | ||
| } return message.error('Cannot create ref link'); | ||
| }, [id]); | ||
|
|
||
| useEffect(() => { | ||
| if (error) { | ||
| notification.error({ | ||
| message: 'connection failed', | ||
| placement: 'bottomRight' as NotificationPlacement | ||
| }); | ||
| } | ||
| }, [error]); | ||
|
|
||
| const referrals = useMemo(() => { | ||
| if (loading) return <Preload message="loading data..." />; | ||
| if (data) { | ||
| return ( | ||
| <> | ||
| { | ||
| data.referrals.map((el) => ( | ||
| <div key={`user_id-${el.user_id}`} className={styles.info}> | ||
| <p>{formatDate(el.created_at)}</p> | ||
| <p>10</p> | ||
| </div> | ||
| )) | ||
| } | ||
| </> | ||
| ); | ||
| } | ||
| return ( | ||
| <div className={styles.section}> | ||
| <h1>Referral program</h1> | ||
| <div className={styles.content}> | ||
| <div className={styles.text}> | ||
| <h4>You have 50 referral points</h4> | ||
| <p>Your referral score will entitle you to future benefits and airdrops. Use your SOURC3 referral link to spread the Web3 word.</p> | ||
| <NavButton | ||
| name="Copy referral link" | ||
| /> | ||
| </div> | ||
| <div className={styles.table}> | ||
| <div className={styles.title}> | ||
| <h4>Activation date</h4> | ||
| <h4>Referral points</h4> | ||
| </div> | ||
| <div className={styles.date}> | ||
| {/*<div className={styles.empty}>*/} | ||
| {/* <p>No one have used your referral link so far</p>*/} | ||
| {/*</div>*/} | ||
|
|
||
| <div className={styles.info}> | ||
| <p>11 Oct 2022, 4:56 PM</p> | ||
| <p>10</p> | ||
| </div> | ||
| <div className={styles.info}> | ||
| <p>11 Oct 2022, 4:56 PM</p> | ||
| <p>10</p> | ||
| </div> | ||
| <div className={styles.info}> | ||
| <p>11 Oct 2022, 4:56 PM</p> | ||
| <p>10</p> | ||
| </div> | ||
| <div className={styles.info}> | ||
| <p>11 Oct 2022, 4:56 PM</p> | ||
| <p>10</p> | ||
| </div> | ||
| <div className={styles.info}> | ||
| <p>11 Oct 2022, 4:56 PM</p> | ||
| <p>10</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={styles.empty}> | ||
| <p>No one have used your referral link so far</p> | ||
| </div> | ||
| ); | ||
| }, [data, loading]); | ||
|
|
||
| const title = useMemo(() => { | ||
| const count = !data?.referrals ? '...' | ||
| : data?.referrals.length as number * 10 || 0; | ||
| const msg = `You have ${count} referral points`; | ||
| return <h4>{msg}</h4>; | ||
| }, [data, loading]); | ||
|
|
||
| return ( | ||
| <div className={styles.section}> | ||
| <h1>Referral program</h1> | ||
| <div className={styles.content}> | ||
| <div className={styles.text}> | ||
| {title} | ||
| <p>Your referral score will entitle you to future benefits and airdrops. Use your SOURC3 referral link to spread the Web3 word.</p> | ||
| <NavButton | ||
| onClick={handleCopyRefLink} | ||
| name="Copy referral link" | ||
| /> | ||
| </div> | ||
| <div className={styles.table}> | ||
| <div className={styles.title}> | ||
| <h4>Activation date</h4> | ||
| <h4>Referral points</h4> | ||
| </div> | ||
| <div className={styles.date}> | ||
| {referrals} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| export default ReferralProgramm; | ||
| export default ReferralProgramm; |