better info block

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

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<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,22 +70,30 @@ 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}}>
+        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),
@@ -92,7 +103,9 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
                   }],
                 }}
               />
+            </Grid>
           </div>
+        </>
       }
     </div>
   )

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 (
-    <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>
   )
 }
 
-export default CoinDetails;
+      export default CoinDetails;

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 (
+    <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

@@ -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

@@ -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

@@ -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) {

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;
 }