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

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

@@ -151,34 +151,36 @@ const Background = ({loading}) => {
{ {
seriesOfPaths.map(serie => ( 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) => ( pathsData.map((object, index) => (
<CustomPath <CustomPath
className="path" className="path"
top={object.top} top={object.top}
left={object.left} left={object.left}
clipPath={object.clipPath} clipPath={object.clipPath}
width={object.width} width={object.width}
height={object.height} height={object.height}
transform={object.transform} transform={object.transform}
serieNumber={serie} serieNumber={serie}
key={index} key={index}
/> />
)) ))
} }
</div> </div>
))
))
} }
</BackgroundStyles> </BackgroundStyles>
}; };

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

@@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Grid } from '@mui/material'; import { Grid } from '@mui/material';
import styled from 'styled-components'; import styled from 'styled-components';
import Crypto from './CryptoGalleryItem'; import CryptoGalleryItem from './CryptoGalleryItem';
import moment from 'moment'; import moment from 'moment';
@@ -213,7 +213,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
<Grid container columnSpacing={4} rowSpacing={6} className='grid'> <Grid container columnSpacing={4} rowSpacing={6} className='grid'>
{ {
cryptosList.map((crypto, index) => ( cryptosList.map((crypto, index) => (
<Crypto <CryptoGalleryItem
CryptoStyles={CryptoStyles} CryptoStyles={CryptoStyles}
data={crypto} data={crypto}
cryptoPrices={cryptosPrices[index]} cryptoPrices={cryptosPrices[index]}
@@ -223,6 +223,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
index={index} index={index}
cryptoListLength={cryptosList.length} cryptoListLength={cryptosList.length}
loading={loading}
setLoading={setLoading} 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'; 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() const history = useHistory()
@@ -49,7 +49,8 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
lg={4} lg={4}
md={6} md={6}
sm={12} sm={12}
onClick={() => history.push(`/crypto/${data.id}`)} onClick={() => {if (!loading) history.push(`/crypto/${data.id}`)}}
style={{cursor: loading ? 'initial' : 'clicker'}}
> >
<Card className="card"> <Card className="card">
<CardContent <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 Cryptos from '../CryptoGallery/CryptoGallery';
import Header from '../Header/Header'; import Header from '../Header/Header';
const Loading = ({loading, setLoading}) => { const CryptoGalleryLoading = ({loading, loadingURL}) => {
const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
const LoadingStyles = styled.div` const LoadingStyles = styled.div`
@@ -74,17 +72,8 @@ const Loading = ({loading, setLoading}) => {
<img src={loadingURL} alt="loading" /> <img src={loadingURL} alt="loading" />
<h2>Loading</h2> <h2>Loading</h2>
</LoadingStyles> </LoadingStyles>
<Header />
<Background
loading={loading}
/>
<Cryptos
loading={loading}
setLoading={setLoading}
setLoadingURL={setLoadingURL}
/>
</> </>
) )
}; };
export default Loading; export default CryptoGalleryLoading;