Skip to content

Commit

Permalink
14.02.2024 ввёл скролинг на форму финишировавших компаний.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jakogri @grishick
jakogri authored and grishick committed Feb 18, 2024
1 parent c38b402 commit 6cd4c33
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 33 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
"devDependencies": {
"@types/crypto-js": "^3.1.43",
"microbundle": "^0.13.0",
"classnames": "2.3.1",
"tronweb-typings": "^1.0.1",
"typescript": "^3.9.9"
},
Expand Down
5 changes: 5 additions & 0 deletions server/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,11 @@ APP.post('/api/campaign/getCountInPage', (req, res) => {
serverLib.handleGetCountInPage(res, Sentry, DB);
});

APP.post('/api/campaign/getCountInFinishPage', (req, res) => {
const DB = CLIENT.db(DBNAME);
serverLib.handleGetCountInFinashpage(res, Sentry, DB);
});

APP.post('/api/campaign/loadOne', (req, res) => {
const DB = CLIENT.db(DBNAME);
serverLib.handleLoadOneCampaign(req, res, Sentry, DB);
Expand Down
25 changes: 22 additions & 3 deletions server/serverLib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,9 +260,16 @@ class ServerLib {

async handleLoadFinishedCampaigns(req, res, Sentry, DB) {
try{
const myCollection = await DB.collection('campaigns');
const campaigns = await myCollection.find({successful: true}, {limit:3, sort:{raisedAmount: -1, raisedOnCoinbase: -1}});
const result = await campaigns.toArray();

let pipeline = [
{ $match: {successful: true, deleted:{ $exists : false}}},
{$sort: {raisedAmount: -1, raisedOnCoinbase: -1, _id: 1}},
{ $skip : req.body.startRec},
{ $limit:req.body.compaignsCount}
];
let curArr = await DB.collection('campaigns').aggregate(pipeline).toArray();
let arCount = await DB.collection('campaigns').count({successful: true, deleted:{ $exists : false }});
let result = {curArr:curArr, arCount:arCount};
res.send(result);
} catch (err) {
console.log(err);
Expand Down Expand Up @@ -462,6 +469,18 @@ class ServerLib {
res.sendStatus(500);
}
}

async handleGetCountInFinashpage(res, Sentry, DB) {
try {
let configCollection = await DB.collection('global_configs');
let fiatSettingsRAW = await configCollection.find({_id : 'finish_canpaigns_per_page'});
let fiatSettings = await fiatSettingsRAW.toArray();
res.send(fiatSettings[0].count);
} catch (err){
Sentry.captureException(new Error(err));
res.sendStatus(500);
}
}
}

module.exports = ServerLib;
6 changes: 5 additions & 1 deletion src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,20 @@ class App extends Component {
};
window.curPg = 1;
window.pgCount = 0;
window.finishCompCount = 0;
window.finishCompPerPg = 0;
window.firstFinishComp = 0;
}

async componentDidMount() {
let result;
console.log("email");
console.log(document.cookie);
let lang = GetLanguage();
this.setState({language : lang});
if(!window.connect)
window.connect = false;
let result = await axios.post('/api/campaign/getCountInPage', {headers: {"Content-Type": "application/json"}});
result = await axios.post('/api/campaign/getCountInPage', {headers: {"Content-Type": "application/json"}});
window.pgCount = result.data;
await this.checkAutorisation();
this.props.history.listen((location, action) => {
Expand Down
22 changes: 11 additions & 11 deletions src/components/CampaignList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ class CampaignList extends Component {
})
})
campaigns.forEach( campaign => {
const found = donates.find(element => element._id == campaign._id);
const found = donates.find(element => element._id === campaign._id);
let totalQuantity = found ? found.totalQuantity : 0;
let raisedAmount = campaign.raisedAmount ? parseFloat(campaign.raisedAmount) : 0;
let fiatDonations = campaign.fiatDonations ? parseFloat(campaign.fiatDonations) : 0;
Expand All @@ -158,7 +158,7 @@ class CampaignList extends Component {
let dedupedCoinNames = [];
for(var chain in campaign.addresses){
for(let i = 0; i < that.state.coinslist.length; i++){
if (that.state.coinslist[i].chain == chain){
if (that.state.coinslist[i].chain === chain){
let coinName = that.state.coinslist[i].coin.name;
if(!dedupedCoinNames.includes(coinName)) {
dedupedCoinNames.push(coinName);
Expand Down Expand Up @@ -211,17 +211,17 @@ class CampaignList extends Component {
<Col className='buttonCol'>
<div id='acceptingBtn' className='cardButtons'><p><Trans i18nKey='accepting'/></p>
<p id='currencyName'>
{this.state.fiatPaymentEnabled && item.stripeURL && <span className='coinRewardInfo'><img src={visaMcLogo} width={21} height={20} style={{marginRight:5, marginLeft:5}} /> </span>}
{this.state.fiatPaymentEnabled && item.stripeURL && <span className='coinRewardInfo'><img src={visaMcLogo} width={21} height={20} alt="for sell" style={{marginRight:5, marginLeft:5}} /> </span>}
{item.dedupedCoinNames.map((coin, j) =>
<span key={item._id + "-" + coin}><img src={IMG_MAP[coin]} width={20} height={20} style={{marginLeft:5, marginRight:5}} /> </span>
<span key={item._id + "-" + coin}><img src={IMG_MAP[coin]} width={20} height={20} alt="for sell" style={{marginLeft:5, marginRight:5}} /> </span>
)}

<span className='coinRewardInfo'><img src={ethIcon} width={20} height={20} style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={btcLogo} width={20} height={20} style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={daiLogo} width={20} height={20} style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={usdcIcon} width={20} height={20} style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={usdtLogo} width={20} height={20} style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={ltcLogo} width={20} height={20} style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={ethIcon} width={20} height={20} alt="for sell" style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={btcLogo} width={20} height={20} alt="for sell" style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={daiLogo} width={20} height={20} alt="for sell" style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={usdcIcon} width={20} height={20} alt="for sell" style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={usdtLogo} width={20} height={20} alt="for sell" style={{marginRight:5, marginLeft:5}} /> </span>
<span className='coinRewardInfo'><img src={ltcLogo} width={20} height={20} alt="for sell" style={{marginRight:5, marginLeft:5}} /> </span>

</p>
</div></Col>
Expand Down Expand Up @@ -268,4 +268,4 @@ class CampaignList extends Component {
}
}

export default CampaignList;
export default CampaignList;
95 changes: 77 additions & 18 deletions src/components/FinishedCampaigns.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
// React component for displaying finished campaigns
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import React, { Component, createRef } from 'react';
import { ChevronLeft, ChevronRight} from 'react-bootstrap-icons';
import '../css/finishedCampaigns.css';
import { Card, Container, ProgressBar } from 'react-bootstrap';
import cn from "classnames";
import "../css/styles.css";
import { Card, Container, ProgressBar,Row, Button, Col } from 'react-bootstrap';
import { i18nString, DescriptionPreview } from '../util/Utilities';
import { Trans } from 'react-i18next';
import i18n from '../util/i18n';
import ReactGA from "react-ga4";
import axios from 'axios';

class FinishedCampaigns extends Component {
Expand All @@ -16,22 +16,62 @@ class FinishedCampaigns extends Component {
campaigns: [],
showError:false,
errorMessage:"",
lang:''
lang:'',
canScrollLeft:true,
canScrollRight:false,
};
this.scrollRef = createRef(null);
}



async componentDidMount() {
this.setState({
let result = await axios.post('/api/campaign/getCountInFinishPage', {headers: {"Content-Type": "application/json"}});
window.finishCompPerPg = result.data;
this.setState({
campaigns : (await this.getCampaigns())
});
}


checkForScrollPosition = async(e) => {
let scrollLeft = e.target.scrollLeft;
let scrollWidth = e.target.scrollWidth;
let clientWidth = e.target.clientWidth;
let canScrollRight = (scrollLeft > 0);
let canScrollLeft = (scrollWidth > (scrollLeft + clientWidth + 2));
if (canScrollLeft !== this.state.canScrollLeft)
this.setState({canScrollLeft:canScrollLeft});
if (canScrollRight !== this.state.canScrollRight)
this.setState({canScrollRight:canScrollRight});
if ((canScrollLeft === false)&&((window.firstFinishComp + window.finishCompPerPg) < window.finishCompCount)){
if((window.firstFinishComp + window.finishCompPerPg + 3)> window.finishCompCount){
window.firstFinishComp = window.finishCompCount+ window.firstFinishComp - window.finishCompPerP;
}
else window.firstFinishComp = window.firstFinishComp +3;
e.target.scrollLeft = 10;
this.setState({
campaigns : (await this.getCampaigns())
});
}

else if((canScrollRight === false)&&(window.firstFinishComp > 0)){
window.firstFinishComp = window.firstFinishComp - 3;
if (window.firstFinishComp < 0) window.firstFinishComp = 0;
e.target.scrollLeft = 10;
this.setState({
campaigns : (await this.getCampaigns())
});
}

}

async getCampaigns() {
var campaigns = [];
var errorMessage = 'Failed to load campaigns';
await axios.post('/api/campaign/loadFinishedCampaigns')
let data = {startRec : window.firstFinishComp, compaignsCount:window.finishCompPerPg};
await axios.post('/api/campaign/loadFinishedCampaigns', data, {headers: {"Content-Type": "application/json"}})
.then(res => {
campaigns = res.data;
campaigns = res.data.curArr;
window.finishCompCount = res.data.arCount;
}).catch(err => {
if (err.response) {
errorMessage = 'Failed to load campaigns. We are having technical difficulties'}
Expand All @@ -44,7 +84,6 @@ class FinishedCampaigns extends Component {
errorMessage,
})
})

campaigns.forEach( campaign => {
let raisedAmount = campaign.raisedAmount ? parseFloat(campaign.raisedAmount) : 0;
let fiatDonations = campaign.fiatDonations ? parseFloat(campaign.fiatDonations) : 0;
Expand All @@ -60,10 +99,13 @@ class FinishedCampaigns extends Component {

render() {
return (

<Container id="finishedCampaignsMainDiv">
{this.state.campaigns.map((item, i) =>
<Card key={i}>
<div>
<div className="finishedCampaignsMainDiv" >
<ul className="list" ref = {this.scrollRef} onScroll={this.checkForScrollPosition}>
{this.state.campaigns.map((item, i) =>
<Container id="finishedCampaignsMainDiv">
<li className="item">
<Card key={i}>
<Card.Body>
<div id='finishedCardHeader'>
<Card.Img src={item.mainImageURL} fluid='true' />
Expand All @@ -78,16 +120,33 @@ class FinishedCampaigns extends Component {
</svg>
</div>
<Card.Title>{i18nString(item.title, i18n.language)}</Card.Title>
<Card.Text>
<Card.Text><span className={"h2"}>{i18nString(item.org, i18n.language)}</span><br/>
{`${DescriptionPreview(item.description, i18n.language)}...`}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</Card.Text>
<p id='progressBarLabel'><span id='progressBarLabelStart'>
&#36;{item.raisedAmount}</span>{i18n.t('raised')}&#36;{item.maxAmount} {i18n.t('goal')}</p>
<ProgressBar now={100 * item.raisedAmount/item.maxAmount} />
</Card.Body>
</Card>

</li>
</Container>
)}
</Container>
</ul>
</div>

{(this.state.campaigns.length > 3)&&<Row>
<Col>
<Button style={{cursor:"pointer"}} onClick={() => this.scrollRef.current?.scrollBy({ left: 350, behavior: "smooth" })}
className={cn("button","buttonLeft",{"button--hidden":!this.state.canScrollLeft})} disabled = {!this.state.canScrollLeft}>
<span><ChevronLeft/></span></Button>
<Button style={{cursor:"pointer"}}onClick={() => this.scrollRef.current?.scrollBy({ left: -350, behavior: "smooth" })}
className={cn("button","buttonRight",{"button--hidden":!this.state.canScrollRight})} disabled={!this.state.canScrollRight}>
<span><ChevronRight/></span></Button>
</Col>
</Row>}
<Row><Col><Button style={{backgroundColor : "rgba(255,255,255,.1)", borderColor : "rgba(255,255,255,.1)"}}></Button></Col></Row>
</div>

);
};
Expand Down
103 changes: 103 additions & 0 deletions src/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
.App {
font-family: sans-serif;
text-align: center;
max-width: 540px;
margin: 0 auto;
}

.scrollableContainer {
position: relative;
height: auto;
}

.list {
display: flex;
overflow-x: auto;
list-style: none;
height: auto;
}

.item {
display: flex;
width: 22rem;
height: auto;
background-color: rgba(34, 157, 116, 0.163);
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.item:not(:last-child) {
margin-right: 1em;
}

.shadowWrapper {
width: 30px;
height: 100%;
overflow: hidden;
z-index: 1;
position: absolute;
top: 0;
}

.leftShadowWrapper {
left: 0;
}

.rightShadowWrapper {
right: 0;
}

.shadow {
position: absolute;
box-shadow: 0 0 30px -8px #232628;
position: absolute;
z-index: 1;
top: 50%;
right: -25px;
width: 24px;
height: 80%;
border-radius: 50%;
transform: translateY(-50%);
}

.leftShadow {
box-shadow: 0 0 30px -8px #232628;
left: -25px;
}

.rightShadow {
box-shadow: 0 0 30px -8px #232628;
right: -25px;
}

.shadow--hidden {
display: none;
}

.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background-color: #fff;
box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
font-size: 1.2rem;
cursor: pointer;
z-index: 2;
}

.buttonLeft {
left: -20px;
}

.buttonRight {
right: -20px;
}

.button--hidden {
display: none;
}

0 comments on commit 6cd4c33

Please sign in to comment.