diff --git a/Front/README.md b/Front/README.md index b87cb00..c655878 100644 --- a/Front/README.md +++ b/Front/README.md @@ -29,18 +29,6 @@ Your app is ready to be deployed! See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). +1. better chart +2. loading spinners +3. proper CSS with styles diff --git a/Front/src/coinDetails/coinChart.tsx b/Front/src/coinDetails/coinChart.tsx index 6228e56..d2cf6bb 100644 --- a/Front/src/coinDetails/coinChart.tsx +++ b/Front/src/coinDetails/coinChart.tsx @@ -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{}; +export interface IChartDataFormatted extends Array { }; @@ -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 ( -
+
{ - data && -
- -
+ data && <> + + + + + + + + + + +
+ + + +
+ }
) diff --git a/Front/src/coinDetails/coinDetails.tsx b/Front/src/coinDetails/coinDetails.tsx index 3744b6d..e40275a 100644 --- a/Front/src/coinDetails/coinDetails.tsx +++ b/Front/src/coinDetails/coinDetails.tsx @@ -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 ( -
+
{ - dataInfo && isSuccessInfo && <> -
-

{dataInfo.id}

-
-
Homepage: {dataInfo.links.homepage}
-
+ data && isSuccessInfo && <> +
+ +

{data.name}

-
- -
- -
- Description{dataInfo.description.en} -
- + + + + + + + + + + + + +
+ + + + } -
+
) } -export default CoinDetails; + export default CoinDetails; diff --git a/Front/src/coinDetails/coinInfo.tsx b/Front/src/coinDetails/coinInfo.tsx new file mode 100644 index 0000000..c5cc3a3 --- /dev/null +++ b/Front/src/coinDetails/coinInfo.tsx @@ -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 ( +
+

Info

+ + + Rank: #{data.market_cap_rank} + + + + Current price: ${data.tickers[0].converted_last.usd} + + + + Homepage: {data.links.homepage} + + + + Votes: {data.sentiment_votes_up_percentage}% + + + {data.sentiment_votes_down_percentage}% + + + + + {data.links.subreddit_url && + + } + + {data.links.twitter_screen_name && + + } + + {data.links.chat_url && + + } + +
+ ) +} + +export default CoinInfo; diff --git a/Front/src/coinDetails/coinStats.tsx b/Front/src/coinDetails/coinStats.tsx new file mode 100644 index 0000000..5fd2376 --- /dev/null +++ b/Front/src/coinDetails/coinStats.tsx @@ -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 ( +
+

Statistics

+ + + + { + tableData.map((row: any, index: any) => ( + + {row.title} + {row.value} + + )) + } + +
+ +
+ ) +} + +export default CoinStats; diff --git a/Front/src/coinList/coinList.tsx b/Front/src/coinList/coinList.tsx index 24e96be..e7d55f7 100644 --- a/Front/src/coinList/coinList.tsx +++ b/Front/src/coinList/coinList.tsx @@ -27,7 +27,7 @@ const CoinList = (): JSX.Element => { const { data: globalData, isLoading: globalIsLoading, isSuccess: lobalSuccess } = useGetGlobalQuery(); return ( -
+
{isLoading || globalIsLoading &&
Loading...
} { @@ -45,7 +45,7 @@ const CoinList = (): JSX.Element => { # @@ -66,7 +66,9 @@ const CoinList = (): JSX.Element => { Change (24h) + align="right" + > + Change (24h) diff --git a/Front/src/coinList/coinListPager.tsx b/Front/src/coinList/coinListPager.tsx index 73a2906..98d2f81 100644 --- a/Front/src/coinList/coinListPager.tsx +++ b/Front/src/coinList/coinListPager.tsx @@ -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; diff --git a/Front/src/index.css b/Front/src/index.css index 780d045..606d554 100644 --- a/Front/src/index.css +++ b/Front/src/index.css @@ -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; +} \ No newline at end of file