stevaidis/crypto-coingecko
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better info block

Browse Source
This commit is contained in:
Ste Vaidis
2022-12-11 12:57:48 +02:00
parent f259ae1e5e
commit f2c2f2b39b
8 changed files with 211 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Front/src/coinDetails/coinChart.tsx
+32 -19
View File
@@ -13,6 +13,10 @@ import { Line } from 'react-chartjs-2';
import { useGetCoinChartQuery } from '../coinApi';
import { format } from 'date-fns';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Grid from '@mui/material/Grid';
ChartJS.register(
CategoryScale,
LinearScale,
@@ -44,7 +48,7 @@ export interface IChartDataFormattedItem {
y: number;
}
export interface IChartDataFormatted extends Array<IChartDataFormattedItem>{};
export interface IChartDataFormatted extends Array<IChartDataFormattedItem> { };
@@ -56,8 +60,7 @@ export const options = {
};
const CoinChart = (props: ICoinChartProps): JSX.Element => {
console.log("props: ", props);
// console.log("props: ", props);
const { data, isSuccess: isSuccessChart } = useGetCoinChartQuery(props.coin);
function formatChartData(data: IChartData): IChartDataFormatted {
@@ -67,32 +70,42 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
y: value[1],
};
});
console.log('formatChartData: ', chartData)
return chartData;
}
function formatChartLabels(data: any): any {
console.log('data: ', data)
const labels = data['prices'].map((value: (string | number | Date)[]) => format(new Date(value[0]), 'MM/dd/yyyy'));
// console.log('formatChartLabels: ', labels)
return labels;
}
return (
<div style={{margin: 5, padding: 5}}>
<div className="chart-container" style={{ margin: 5, padding: 5 }}>
{
data &&
<div className="chart-container" style={{margin: 5, padding: 5}}>
<Line
data={{
labels: formatChartLabels(data),
datasets: [{
label: 'Dataset',
data: formatChartData(data)
}],
}}
/>
</div>
data && <>
<Grid container justifyContent="flex-start" style={{ marginTop: 0 }}>
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button onClick={() => { }}>1D</Button>
<Button onClick={() => { }}>14D</Button>
<Button onClick={() => { }}>1M</Button>
<Button onClick={() => { }}>3M</Button>
<Button onClick={() => { }}>1Y</Button>
<Button onClick={() => { }}>MAX</Button>
</ButtonGroup>
</Grid>
<div className="chart-container" style={{ margin: 5, padding: 5 }}>
<Grid container justifyContent="flex-end" style={{ marginTop: 0 }}>
<Line
data={{
labels: formatChartLabels(data),
datasets: [{
label: 'Dataset',
data: formatChartData(data)
}],
}}
/>
</Grid>
</div>
</>
}
</div>
)
Front/src/coinDetails/coinDetails.tsx
+32 -18
View File
@@ -1,11 +1,18 @@
import { useParams } from 'react-router-dom';
import { useGetCoinInfoQuery } from '../coinApi';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import CoinChart from './coinChart';
import CoinStats from './coinStats';
import CoinInfo from './coinInfo';
const CoinDetails = (): JSX.Element => {
const { id } = useParams();
const {
data: dataInfo,
data: data,
error: errorInfo,
isLoading: isLoadingInfo,
isSuccess: isSuccessInfo,
@@ -13,27 +20,34 @@ const CoinDetails = (): JSX.Element => {
} = useGetCoinInfoQuery(id ? id : '');
return (
<div>
<div className="details">
{
dataInfo && isSuccessInfo && <>
<div className="info">
<h1>{dataInfo.id}</h1>
<div className="links">
<div>Homepage: {dataInfo.links.homepage}</div>
</div>
data && isSuccessInfo && <>
<div className="details-title">
<img src={data.image.large} width="28" height="28" />
<h1>{data.name}</h1>
</div>
<div className="chart-container">
<CoinChart coin={dataInfo.id} />
</div>
<div>
Description{dataInfo.description.en}
</div>
</>
<Box>
<Grid container>
<Grid item xs={12} sm={12} md={8}>
<CoinInfo data={data} />
</Grid>
<Grid item xs={12} sm={12} md={4}>
<CoinStats data={data} />
</Grid>
<Grid item xs={12} style={{marginTop: 20}}>
<CoinChart coin={data.id} />
</Grid>
<Grid item xs={12}>
<div dangerouslySetInnerHTML={{ __html: data.description.en }} />
</Grid>
</Grid>
</Box>
</>
}
</div>
</div>
)
}
export default CoinDetails;
export default CoinDetails;
Front/src/coinDetails/coinInfo.tsx
+66
View File
@@ -0,0 +1,66 @@
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbDownIcon from '@mui/icons-material/ThumbDown';
import GitHubIcon from '@mui/icons-material/GitHub';
import RedditIcon from '@mui/icons-material/Reddit';
import TwitterIcon from '@mui/icons-material/Twitter';
import LinkIcon from '@mui/icons-material/Link';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
export interface ICoinInfoProps {
[key: string]: any;
}
const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
const { data } = props;
return (
<div>
<h2>Info</h2>
<Grid container justifyContent="flex-start">
<Grid item xs={12}>
Rank: #{data.market_cap_rank}
</Grid>
<Grid item xs={12} style={{ marginTop: 20 }}>
Current price: ${data.tickers[0].converted_last.usd}
</Grid>
<Grid item xs={12} style={{ marginTop: 20 }}>
Homepage: <a target="_blank" href={data.links.homepage}>{data.links.homepage}</a>
</Grid>
<Grid item style={{ marginTop: 20 }}>
Votes: {data.sentiment_votes_up_percentage}%
<ThumbUpIcon style={{ color: '#4eaf0a', fontSize: 16, margin: '0 5' }} />
<ThumbDownIcon style={{ color: '#f15281', fontSize: 16, margin: '0 5' }} />
{data.sentiment_votes_down_percentage}%
</Grid>
</Grid>
<Grid container justifyContent="flex-start" style={{ marginTop: 30 }}>
{data.links.subreddit_url &&
<Button style={{ marginRight: 10 }} variant="outlined" startIcon={<RedditIcon />} href={data.links.subreddit_url}>
Reddit
</Button>
}
{data.links.twitter_screen_name &&
<Button style={{ marginRight: 10 }} variant="outlined" startIcon={<TwitterIcon />} href={`https://twitter.com/${data.links.twitter_screen_name}`}>
Twitter
</Button>
}
{data.links.chat_url &&
<Button style={{ marginRight: 10 }} variant="outlined" startIcon={<LinkIcon />} href={data.links.chat_url}>
Discord
</Button>
}
</Grid>
</div>
)
}
export default CoinInfo;
Front/src/coinDetails/coinStats.tsx
+49
View File
@@ -0,0 +1,49 @@
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
export interface ICoinStatsProps {
[key: string]: any;
}
const CoinStats = (props: ICoinStatsProps): JSX.Element => {
const { data } = props;
const tableData = [
{title: "24h Hight", value: `$${data.market_data.low_24h.usd}`},
{title: "24h Low", value: `$${data.market_data.high_24h.usd}`},
{title: "All-Time High", value: `$${data.market_data.ath.usd}`},
{title: "All-Time Low", value: `$${data.market_data.atl.usd}`},
{title: "24 hours change", value: `${data.market_data.price_change_percentage_24h}%`},
{title: "7 days change", value: `${data.market_data.price_change_percentage_7d}%`},
{title: "14 days change", value: `${data.market_data.price_change_percentage_14d}%`},
{title: "1 month change", value: `${data.market_data.price_change_percentage_30d}%`},
{title: "2 months change", value: `${data.market_data.price_change_percentage_60d}%`},
{title: "200 days change", value: `${data.market_data.price_change_percentage_200d}%`},
{title: "1 year change", value: `${data.market_data.price_change_percentage_1y}%`},
]
return (
<div className="info-stats">
<h2>Statistics</h2>
<TableContainer>
<Table size="small" >
<TableBody>
{
tableData.map((row: any, index: any) => (
<TableRow key={row.title}>
<TableCell align="left">{row.title}</TableCell>
<TableCell align="right">{row.value}</TableCell>
</TableRow>
))
}
</TableBody>
</Table>
</TableContainer>
</div>
)
}
export default CoinStats;
Front/src/coinList/coinList.tsx
+5 -3
View File
@@ -27,7 +27,7 @@ const CoinList = (): JSX.Element => {
const { data: globalData, isLoading: globalIsLoading, isSuccess: lobalSuccess } = useGetGlobalQuery();
return (
<div>
<div className="coin-list">
{isLoading || globalIsLoading && <div>Loading...</div>}
{
@@ -45,7 +45,7 @@ const CoinList = (): JSX.Element => {
<TableHead>
<TableRow>
<TableCell
align="left"
align="right"
sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
>
#
@@ -66,7 +66,9 @@ const CoinList = (): JSX.Element => {
</TableCell>
<TableCell
sx={{ display: { xs: 'table-cell', sm: 'none', md: 'table-cell' } }}
align="right">Change (24h)
align="right"
>
Change (24h)
</TableCell>
</TableRow>
</TableHead>
Front/src/coinList/coinListPager.tsx
+1 -6
View File
@@ -7,14 +7,9 @@ import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
const Pager = (props:any): JSX.Element => {
console.log("page props", props)
const { page, per_page, } = props;
const { data, error, isLoading, isSuccess, refetch } = useGetCoinsCountQuery();
const navigate = useNavigate();
const lastPage = (data: number) => Math.ceil(data / per_page)
function handlePager(page: number) {
@@ -38,5 +33,5 @@ const Pager = (props:any): JSX.Element => {
</>
)
}
export default Pager;
Front/src/index.css
+23 -4
View File
@@ -5,13 +5,20 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #444444
}
a {
color: #444;
text-decoration: none;
color: rgb(59, 84, 177)
}
.coin-list a {
color: #444444;
}
h2 { color: #888888; font-weight: lighter;}
header a {
color: #fff;
text-decoration: none;
@@ -48,8 +55,20 @@ header a {
}
.chart-container {
/* width: 100%; */
height: inherit;
/* height: auto; */
/* height: 30vh; */
}
.details-title {
display:flex;
align-items:center;
justify-content:start;
}
.details-title img {
margin-right: 15px;
}
.details h2 {
margin-top: 0px;
}