Skip to content

Commit

Permalink
fixed padding on ViewCollective page and did some touchups on steward…
Browse files Browse the repository at this point in the history 
…s list
  • Loading branch information
@krisbitney
krisbitney committed Dec 12, 2023
1 parent 2b506d9 commit a9ef6a9
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 132 deletions.
42 changes: 21 additions & 21 deletions packages/app/src/components/StewardsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import { Image, Text, View, StyleSheet } from 'react-native';
import { InterRegular, InterSemiBold } from '../utils/webFonts';
import { StewardBlueIcon, StewardGreenIcon, VerifiedIconUri } from '../@constants/ColorTypeIcons';
// import { NoAvatarIcon } from '../@constants/EmptyPicture';
import { useLocation } from 'react-router-native';
import { Colors } from '../utils/colors';
import profilePictureArray from '../@constants/pfps';
import { useMediaQuery } from 'native-base';

const placeholderUsers = [0, 1, 2, 3, 4, 5, 6];

interface StewardListProps {
hideTitle?: boolean;
imageUrl?: string;
listType: string;
listType: 'viewCollective' | 'viewStewards';
stewardData: {
username: string;
actions?: number;
Expand All @@ -30,39 +28,42 @@ function StewardList({ imageUrl, listType, stewardData, stewards, hideTitle }: S
return (
<View style={styles.stewardsHeader}>
{!hideTitle && (
<View style={styles.row}>
{/* {listType !== 'steward' && <Image source={{ uri: StewardGreenIcon }} style={styles.firstIcon} />}
{listType === 'steward' && <Image source={{ uri: StewardBlueIcon }} style={styles.firstIcon} />} */}
<Text style={styles.title}>Stewards {`(0)`}</Text>
<View style={[styles.row, { marginBottom: 24 }]}>
{listType === 'viewCollective' && <Image source={{ uri: StewardGreenIcon }} style={styles.titleIcon} />}
<Text style={styles.title}>Stewards{listType === 'viewCollective' ? ` (0)` : ''}</Text>
{listType === 'viewStewards' && <Image source={{ uri: StewardBlueIcon }} style={styles.titleIcon} />}
</View>
)}
<View style={styles.list}>
{listType == 'steward' &&
(isDesktopResolution ? placeholderUsers.slice(0, 6) : placeholderUsers.slice(0, 5)).map((item) => (
<View style={styles.row}>
<Image source={null as any} style={styles.rowImg} />
<Text style={styles.title}>
{stewardData.username}{' '}
{stewardData.isVerified && <Image source={{ uri: VerifiedIconUri }} style={styles.verifiedIcon} />}
</Text>
{stewardData.actions && <Text style={styles.totalActions}>{stewardData.actions} actions</Text>}
</View>
))}
{(isDesktopResolution ? placeholderUsers.slice(0, 6) : placeholderUsers.slice(0, 5)).map((item) => (
<View style={styles.row} key={item.toString()}>
<Image source={{ uri: StewardBlueIcon }} style={styles.rowImg} />
<Text style={styles.title}>
{stewardData.username}{' '}
{stewardData.isVerified && <Image source={{ uri: VerifiedIconUri }} style={styles.verifiedIcon} />}
</Text>
{listType === 'viewStewards' && stewardData.actions && (
<Text style={styles.totalActions}>{stewardData.actions} actions</Text>
)}
</View>
))}
</View>
</View>
);
}

const styles = StyleSheet.create({
stewardsHeader: { flex: 1 },
firstIcon: {
titleIcon: {
height: 32,
width: 32,
marginRight: 8,
},
rowImg: {
height: 48,
width: 48,
borderRadius: 26,
borderRadius: 24,
marginRight: 16,
},
verifiedIcon: {
height: 16,
Expand All @@ -87,7 +88,6 @@ const styles = StyleSheet.create({
title: {
fontSize: 16,
...InterSemiBold,
marginLeft: 16,
width: '100%',
color: Colors.black,
},
Expand Down
148 changes: 62 additions & 86 deletions packages/app/src/components/ViewCollective.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { useCallback } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { useState } from 'react';
// import oceanUri from '../@constants/SafariImagePlaceholder';
import RowItem from './RowItem';
import RoundedButton from './RoundedButton';
import StewardList from './StewardsList';
Expand All @@ -18,21 +16,19 @@ import { Colors } from '../utils/colors';
import { Link, useMediaQuery } from 'native-base';
import Breadcrumb from './Breadcrumb';
import { formatTime } from '../hooks/functions/formatTime';
import { formatAmount } from '../hooks/functions/formatUsdAmount';

interface ViewCollectiveProps {
imageUrl?: any;
title?: any;
imageUrl?: string;
title?: string;
description?: string;
stewardsDesc?: any;
creationDate?: any;
stewardsPaid?: any;
paymentsMade?: any;
donationsReceived?: any;
totalPaidOut?: any;
currentPool?: any;
route?: any;

stewardsDesc?: string;
creationDate?: number;
stewardsPaid?: number;
paymentsMade?: number;
donationsReceived?: number;
totalPaidOut?: number;
currentPool?: number;
route?: string;
stewards?: {};
recentTransactions?: {};
isDonating: boolean;
Expand Down Expand Up @@ -60,27 +56,27 @@ function ViewCollective({
const [isDesktopResolution] = useMediaQuery({
minWidth: 612,
});
// TODO: need actual token price
const tokenPrice = 0.00018672442844237;
const formattedDonations: any = (donationsReceived / 10 ** 18).toFixed(3);
const usdValue = tokenPrice * formattedDonations;
const renderDonorsButton = useCallback(
() =>
isDesktopResolution ? (
<></>
) : (
<RoundedButton
title="See all donors"
backgroundColor={Colors.purple[100]}
color={Colors.purple[200]}
fontSize={18}
seeType={true}
onPress={() => {
navigate(`/collective/${route}/donors`);
}}
/>
),
[navigate, isDesktopResolution, route]
)();
const decimalDonations = (donationsReceived ?? 0) / 10 ** 18;
const formattedDonations: string = decimalDonations.toFixed(3);
const usdValue = tokenPrice * decimalDonations;

const renderDonorsButton = () =>
isDesktopResolution ? (
<></>
) : (
<RoundedButton
title="See all donors"
backgroundColor={Colors.purple[100]}
color={Colors.purple[200]}
fontSize={18}
seeType={true}
onPress={() => {
navigate(`/collective/${route}/donors`);
}}
/>
);

if (isDesktopResolution) {
return (
Expand Down Expand Up @@ -143,7 +139,7 @@ function ViewCollective({
console.log(stopDonationModal);
}}
/>
{renderDonorsButton}
{renderDonorsButton()}
</View>
</View>
) : (
Expand All @@ -158,7 +154,7 @@ function ViewCollective({
navigate(`/donate/${route}`);
}}
/>
{renderDonorsButton}
{renderDonorsButton()}
</View>
)}
</View>
Expand All @@ -167,16 +163,12 @@ function ViewCollective({
<View style={styles.collectiveDesktopTimeline}>
<View style={{ flex: 1 }}>
<RowItem imageUrl={CalendarIcon} rowInfo="Creation Date" rowData={formatTime(creationDate as any)} />
<RowItem
imageUrl={StewardGreenIcon}
rowInfo="Stewards Paid"
rowData={stewardsPaid?.length ? stewardsPaid : 0}
/>
<RowItem imageUrl={StewardGreenIcon} rowInfo="Stewards Paid" rowData={stewardsPaid ?? 0} />

<RowItem
imageUrl={GreenListIcon}
rowInfo="# of Payments Made"
rowData={paymentsMade?.length ? paymentsMade : 0}
rowData={paymentsMade ?? 0}
currency=""
/>
</View>
Expand All @@ -199,28 +191,20 @@ function ViewCollective({
/>
)}

{totalPaidOut.length ? (
<RowItem
imageUrl={SendIcon}
rowInfo="Total Paid Out"
rowData={totalPaidOut}
currency="G$"
balance={0.00018672442844237 * totalPaidOut}
/>
) : (
<RowItem imageUrl={SendIcon} rowInfo="Total Paid Out" rowData={0} currency="G$" balance={0} />
)}
{currentPool.length ? (
<RowItem
imageUrl={SquaresIcon}
rowInfo="Current Pool"
rowData={currentPool}
currency="G$"
balance={0.00018672442844237 * currentPool}
/>
) : (
<RowItem imageUrl={SquaresIcon} rowInfo="Current Pool" rowData={0} currency="G$" balance={0} />
)}
<RowItem
imageUrl={SendIcon}
rowInfo="Total Paid Out"
rowData={totalPaidOut ?? 0}
currency="G$"
balance={tokenPrice * (totalPaidOut ?? 0)}
/>
<RowItem
imageUrl={SquaresIcon}
rowInfo="Current Pool"
rowData={currentPool ?? 0}
currency="G$"
balance={tokenPrice * (currentPool ?? 0)}
/>
</View>
</View>
</View>
Expand All @@ -233,7 +217,7 @@ function ViewCollective({
isVerified: null as any,
actions: null as any,
}}
listType="steward"
listType="viewCollective"
/>
<RoundedButton
title="See all stewards"
Expand Down Expand Up @@ -297,40 +281,32 @@ function ViewCollective({
<RowItem
imageUrl={StewardGreenIcon}
rowInfo="Stewards Paid"
rowData={stewardsPaid?.length ? stewardsPaid : 0}
rowData={stewardsPaid ?? 0}
currency="G$"
balance={stewardsPaid?.length ? 0.00018672442844237 * stewardsPaid : 0}
/>
<RowItem
imageUrl={GreenListIcon}
rowInfo="# of Payments Made"
rowData={paymentsMade?.length ? paymentsMade : 0}
currency=""
balance={tokenPrice * (stewardsPaid ?? 0)}
/>
<RowItem imageUrl={GreenListIcon} rowInfo="# of Payments Made" rowData={paymentsMade ?? 0} currency="" />
<RowItem
imageUrl={ReceiveLightIcon}
rowInfo="Total Donations Received"
rowData={donationsReceived?.length ? donationsReceived : 0}
rowData={donationsReceived ?? 0}
currency="G$"
balance={donationsReceived?.length ? 0.00018672442844237 * donationsReceived : 0}
balance={tokenPrice * (donationsReceived ?? 0)}
/>
<RowItem
imageUrl={SendIcon}
rowInfo="Total Paid Out"
rowData={totalPaidOut?.length ? totalPaidOut : 0}
rowData={totalPaidOut ?? 0}
currency="G$"
balance={totalPaidOut?.length ? 0.00018672442844237 * totalPaidOut : 0}
balance={tokenPrice * (totalPaidOut ?? 0)}
/>
<RowItem
imageUrl={SquaresIcon}
rowInfo="Current Pool"
rowData={currentPool?.length ? currentPool : 0}
rowData={currentPool ?? 0}
currency="G$"
balance={currentPool?.length ? 0.00018672442844237 * currentPool : 0}
balance={tokenPrice * (currentPool ?? 0)}
/>
In this code, we're checking if each of the values (donationsReceived, totalPaidOut, and currentPool) is
truthy (not null or undefined) before rendering the corresponding section. If the value is truthy, it will use
the actual value; otherwise, it will use 0 as the default value.
</View>

{isDonating ? (
Expand All @@ -350,7 +326,7 @@ function ViewCollective({
console.log(stopDonationModal);
}}
/>
{renderDonorsButton}
{renderDonorsButton()}
</View>
</View>
) : (
Expand All @@ -365,7 +341,7 @@ function ViewCollective({
navigate(`/donate/${route}`);
}}
/>
{renderDonorsButton}
{renderDonorsButton()}
</View>
)}
</View>
Expand All @@ -377,7 +353,7 @@ function ViewCollective({
isVerified: true,
actions: 730,
}}
listType="steward"
listType="viewCollective"
/>
<RoundedButton
title="See all stewards"
Expand Down Expand Up @@ -413,7 +389,7 @@ function ViewCollective({
const styles = StyleSheet.create({
container: {
width: '100%',
padding: 24,
padding: 16,
backgroundColor: Colors.white,
gap: 24,
shadowColor: Colors.black,
Expand Down
Loading

0 comments on commit a9ef6a9

Please sign in to comment.