Skip to content

Commit

Permalink
some extra style for subs on profile (ZcashFoundation#95)
Browse files Browse the repository at this point in the history 
Just want to stop pushing to main with little stuff ;0
  • Loading branch information
@skyl
skyl authored Feb 28, 2023
1 parent 21d3eee commit 8125246
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 90 deletions.
107 changes: 58 additions & 49 deletions ts/react/free2z/src/components/MySubscribers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import { useEffect, useState } from "react"
import { Link as RouterLink, useSearchParams } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import {
Avatar, Badge, Box, Divider, FormControlLabel, Grid, Link, List, ListItem, ListItemAvatar, ListItemSecondaryAction, ListItemText, ListSubheader, Pagination, Paper, Stack, Switch, Tooltip, Typography
Box, Divider, List, Pagination, Paper, Stack, Switch, Tooltip, Typography
} from "@mui/material"
import axios from "axios";
import { useGlobalState } from "../state/global";
import { count } from "console";
import moment from "moment";
import TuziIcon from "./TuziIcon";
import MySubscriptionRow from "./MySubscriptionRow";
import MySubscriberRow from "./MySubscriberRow";


Expand Down Expand Up @@ -86,6 +82,7 @@ export default function MySubscribers() {
padding: "3%",
width: "100%",
}}>

{!loading && subscribers.length === 0 &&
<Typography>
No one has subscribed to you!
Expand All @@ -96,58 +93,70 @@ export default function MySubscribers() {

<List>
{((!loading || loaded) && subscribers.length > 0) &&
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Typography
variant="subtitle1"
style={{ marginLeft: "0.5em" }}
<>
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
Who subscribes to you
</Typography>
<Typography
variant="subtitle1"
style={{ marginLeft: "0.5em" }}
>
Who subscribes to you
</Typography>

<Box component="div" sx={{ ml: 'auto' }}>
<Tooltip title="Sort by expiration rather than max price">
<Box component="div" sx={{ ml: 'auto' }}>
<Tooltip title="Sort by expiration rather than max price">

<Switch
checked={checked}
onChange={() => {
setPageQuery({
...pageQuery,
sort: checked ? '-max_price' : 'expires',
})
setChecked(!checked)
}}
name="sort-toggle"
color="primary"
/>
</Tooltip>
<Switch
checked={checked}
onChange={() => {
setPageQuery({
...pageQuery,
sort: checked ? '-max_price' : 'expires',
})
setChecked(!checked)
}}
name="sort-toggle"
color="primary"
/>
</Tooltip>
</Box>
</Box>
</Box>
<Divider
style={{
width: "100%",
padding: "0.25em",
margin: "0 auto",
}}
/>
</>
}
{
count > 20 &&
<Stack
direction="row" alignItems="center" justifyContent="center"
style={{ marginTop: "0.5em" }}
>
<Pagination
size="small"
// TODO: hardcoding breakds
count={Math.ceil(count / 20)}
page={pageQuery.page}
onChange={handleChangePage}
variant="outlined"
color="primary"
/>
</Stack>
}
{subscribers.map((sub, index) => {
return <MySubscriberRow sub={sub} index={index} />
})}
</List>
{
count > 20 &&
<Stack direction="row" alignItems="center" justifyContent="center">
<Pagination
size="small"
// TODO: hardcoding breakds
count={Math.ceil(count / 20)}
page={pageQuery.page}
onChange={handleChangePage}
variant="outlined"
color="primary"
/>
</Stack>
}
</Paper>
)
}
94 changes: 53 additions & 41 deletions ts/react/free2z/src/components/MySubscriptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
import { Link as RouterLink, useSearchParams } from 'react-router-dom'
import {
Box,
Divider,
FormControlLabel, Link, List, ListItem, ListItemSecondaryAction,
ListItemText,
Pagination, Paper, Stack, Switch, Tooltip, Typography
Expand Down Expand Up @@ -85,39 +86,63 @@ export default function MySubscriptions() {
<List>

{((!loading || loaded) && subscriptions.length > 0) &&
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Typography variant="subtitle1"
style={{ marginLeft: "0.5em" }}
<>
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
Who you subscribe to
</Typography>
<Typography variant="subtitle1"
style={{ marginLeft: "0.5em" }}
>
Who you subscribe to
</Typography>

<Box component="div" sx={{ ml: 'auto' }}>
<Tooltip title="Sort by expiration rather than max price">
<Switch
checked={checked}
onChange={() => {
setPageQuery({
...pageQuery,
sort: checked ? '-max_price' : 'expires',
})
setChecked(!checked)
}}
name="sort-toggle"
color="primary"
/>
</Tooltip>
</Box>

<Box component="div" sx={{ ml: 'auto' }}>
<Tooltip title="Sort by expiration rather than max price">
<Switch
checked={checked}
onChange={() => {
setPageQuery({
...pageQuery,
sort: checked ? '-max_price' : 'expires',
})
setChecked(!checked)
}}
name="sort-toggle"
color="primary"
/>
</Tooltip>
</Box>
</Box>
<Divider
style={{
width: "100%",
padding: "0.25em",
margin: "0 auto",
}}
/>
</>
}
{count > 20 &&
<Stack direction="row" alignItems="center" justifyContent="center">
<Pagination
size="small"
// TODO: hardcoding breakds
count={Math.ceil(count / 20)}
page={pageQuery.page}
onChange={handleChangePage}
variant="outlined"
color="primary"
/>
</Stack>
}


{subscriptions.map((sub, index) => {
return <MySubscriptionRow
sub={sub}
Expand All @@ -127,19 +152,6 @@ export default function MySubscriptions() {
/>
})}
</List>
{count > 20 &&
<Stack direction="row" alignItems="center" justifyContent="center">
<Pagination
size="small"
// TODO: hardcoding breakds
count={Math.ceil(count / 20)}
page={pageQuery.page}
onChange={handleChangePage}
variant="outlined"
color="primary"
/>
</Stack>
}
</Paper>
)
}

0 comments on commit 8125246

Please sign in to comment.