franpcode/Crypto-Prices
1
0
Fork 0
mirror of https://github.com/FranP-code/Crypto-Prices.git synced 2025-10-12 23:53:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactorized Crypto Gallery

Browse Source
This commit is contained in:
Francisco Pessano
2022-02-02 15:01:14 -03:00
parent d5d23e7174
commit d5beb455ff
5 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import Loading from './components/CryptoGalleryLoading/CryptoGalleryLoading';
import CryptoGalleryLoading from './components/CryptoGalleryLoading/CryptoGalleryLoading';
import {
BrowserRouter as Router,
@@ -10,6 +10,9 @@ import {
Link
} from "react-router-dom";
import Crypto from './components/Crypto/Crypto';
import Header from './components/Header/Header';
import Background from './components/Background/Background';
import Cryptos from './components/CryptoGallery/CryptoGallery';
function App() {
@@ -19,6 +22,7 @@ function App() {
`
const [loading, setLoading] = useState(true)
const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
React.useEffect(() => {
@@ -46,7 +50,16 @@ function App() {
<Crypto />
</Route>
<Route path="/">
<Loading loading={loading} setLoading={setLoading}/>
<CryptoGalleryLoading loading={loading} loadingURL={loadingURL} setLoading={setLoading}/>
<Header />
<Background
loading={loading}
/>
<Cryptos
loading={loading}
setLoading={setLoading}
setLoadingURL={setLoadingURL}
/>
</Route>
</Switch>
</Router>

52
src/components/Background/Background.jsx
View File

@@ -151,34 +151,36 @@ const Background = ({loading}) => {
{
seriesOfPaths.map(serie => (
<div className="paths" style={{top: serie * 520 + "px"}}>
<div
className="paths"
style={{top: serie * 520 + "px"}}
key={serie}
>
{
pathsData.map((object, index) => (
<CustomPath
className="path"
top={object.top}
left={object.left}
clipPath={object.clipPath}
width={object.width}
height={object.height}
transform={object.transform}
serieNumber={serie}
pathsData.map((object, index) => (
<CustomPath
className="path"
top={object.top}
left={object.left}
clipPath={object.clipPath}
width={object.width}
height={object.height}
transform={object.transform}
serieNumber={serie}
key={index}
/>
))
}
</div>
))
key={index}
/>
))
}
</div>
))
}
</BackgroundStyles>
};

5
src/components/CryptoGallery/CryptoGallery.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Grid } from '@mui/material';
import styled from 'styled-components';
import Crypto from './CryptoGalleryItem';
import CryptoGalleryItem from './CryptoGalleryItem';
import moment from 'moment';
@@ -213,7 +213,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
<Grid container columnSpacing={4} rowSpacing={6} className='grid'>
{
cryptosList.map((crypto, index) => (
<Crypto
<CryptoGalleryItem
CryptoStyles={CryptoStyles}
data={crypto}
cryptoPrices={cryptosPrices[index]}
@@ -223,6 +223,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
index={index}
cryptoListLength={cryptosList.length}
loading={loading}
setLoading={setLoading}
/>
))

7
src/components/CryptoGallery/CryptoGalleryItem.jsx
View File

@@ -9,7 +9,7 @@ import { borderRadius } from '@mui/system';
import { withRouter, useHistory } from 'react-router-dom';
const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading}) => {
const CryptoGalleryItem = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading, loading}) => {
const history = useHistory()
@@ -49,7 +49,8 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
lg={4}
md={6}
sm={12}
onClick={() => history.push(`/crypto/${data.id}`)}
onClick={() => {if (!loading) history.push(`/crypto/${data.id}`)}}
style={{cursor: loading ? 'initial' : 'clicker'}}
>
<Card className="card">
<CardContent
@@ -147,4 +148,4 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
)
};
export default withRouter(Crypto);
export default withRouter(CryptoGalleryItem);

15
src/components/CryptoGalleryLoading/CryptoGalleryLoading.jsx
View File

@@ -4,9 +4,7 @@ import Background from '../Background/Background';
import Cryptos from '../CryptoGallery/CryptoGallery';
import Header from '../Header/Header';
const Loading = ({loading, setLoading}) => {
const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
const CryptoGalleryLoading = ({loading, loadingURL}) => {
const LoadingStyles = styled.div`
@@ -74,17 +72,8 @@ const Loading = ({loading, setLoading}) => {
<img src={loadingURL} alt="loading" />
<h2>Loading</h2>
</LoadingStyles>
<Header />
<Background
loading={loading}
/>
<Cryptos
loading={loading}
setLoading={setLoading}
setLoadingURL={setLoadingURL}
/>
</>
)
};
export default Loading;
export default CryptoGalleryLoading;