Skip to content
This repository has been archived by the owner on Aug 6, 2024. It is now read-only.

Commit

Permalink
Merge pull request #562 from stuysu/restyled/promoted-club
Browse files Browse the repository at this point in the history 
Restyle Add promoted club frontend features
  • Loading branch information
@frank-cywong
frank-cywong authored Feb 21, 2022
2 parents 2bda494 + 2244767 commit 0873712
Show file tree
Hide file tree
Showing 6 changed files with 320 additions and 329 deletions.
124 changes: 58 additions & 66 deletions src/comps/pages/explore/PromotedClubCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,58 @@
import React from "react";
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import UnstyledLink from "../../ui/UnstyledLink";
import { Typography } from "@material-ui/core";
import PromotedClubDeleteButton from "./PromotedClubDeleteButton";

const useStyles = makeStyles({
clubCard: {
position: "relative",
width: "100%",
margin: "0.5rem 0"
},
orgHeading: {
cursor: "pointer",
"&:hover": {
opacity: 0.9
}
},
content: {
padding: "0 1rem"
}
});

const PromotedClubCard = ({
id,
blurb,
organization,
showDelete = false,
refetch = () => {}
}) => {
const classes = useStyles();

return (
<Card variant={"outlined"} className={classes.clubCard}>
<List>
<UnstyledLink to={`/${organization.url}`}>
<ListItem className={classes.orgHeading}>
<ListItemAvatar>
<Avatar alt={organization?.name} src={organization?.charter?.picture?.thumbnail} />
</ListItemAvatar>
<ListItemText primary={organization?.name}/>
</ListItem>
</UnstyledLink>
{showDelete && (
<ListItemSecondaryAction>
<PromotedClubDeleteButton promotionId={id} refetch={refetch}/>
</ListItemSecondaryAction>
)}
</List>
<div className={classes.content}>
<Typography paragraph>
{blurb}
</Typography>
</div>
</Card>
);
};

export default PromotedClubCard;
import React from "react";
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import UnstyledLink from "../../ui/UnstyledLink";
import { Typography } from "@material-ui/core";
import PromotedClubDeleteButton from "./PromotedClubDeleteButton";

const useStyles = makeStyles({
clubCard: {
position: "relative",
width: "100%",
margin: "0.5rem 0"
},
orgHeading: {
cursor: "pointer",
"&:hover": {
opacity: 0.9
}
},
content: {
padding: "0 1rem"
}
});

const PromotedClubCard = ({ id, blurb, organization, showDelete = false, refetch = () => {} }) => {
const classes = useStyles();

return (
<Card variant={"outlined"} className={classes.clubCard}>
<List>
<UnstyledLink to={`/${organization.url}`}>
<ListItem className={classes.orgHeading}>
<ListItemAvatar>
<Avatar alt={organization?.name} src={organization?.charter?.picture?.thumbnail} />
</ListItemAvatar>
<ListItemText primary={organization?.name} />
</ListItem>
</UnstyledLink>
{showDelete && (
<ListItemSecondaryAction>
<PromotedClubDeleteButton promotionId={id} refetch={refetch} />
</ListItemSecondaryAction>
)}
</List>
<div className={classes.content}>
<Typography paragraph>{blurb}</Typography>
</div>
</Card>
);
};

export default PromotedClubCard;
108 changes: 54 additions & 54 deletions src/comps/pages/explore/PromotedClubDeleteButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
import React from "react";
import { IconButton } from "@material-ui/core";
import { Menu as MenuIcon } from "@material-ui/icons";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { gql, useMutation } from "@apollo/client";

const MUTATION = gql`
mutation ($promotionId: Int!){
deletePromotedClub(promotedClubId: $promotionId)
}
`;

const PromotedClubDeleteButton = ({ promotionId, refetch }) => {
const [deletePromotion] = useMutation(MUTATION, {
variables: { promotionId },
update(cache){
cache.reset();
refetch();
}
});

const [anchorEl, setAnchorEl] = React.useState(null);

const handleDelete = () => {
setAnchorEl(null);
if (window.confirm("Are you sure you want to delete this promotion? This is irreversible.")) {
deletePromotion().catch(er => alert("There was an issue: " + er.message));
}
};

const handleClose = () => {
setAnchorEl(null);
};

return (
<div>
<IconButton onClick={ev => setAnchorEl(ev.target)}>
<MenuIcon />
</IconButton>
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
transformOrigin={"center top"}
>
<MenuItem onClick={handleDelete}>Delete</MenuItem>
</Menu>
</div>
);
};

export default PromotedClubDeleteButton;
import React from "react";
import { IconButton } from "@material-ui/core";
import { Menu as MenuIcon } from "@material-ui/icons";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { gql, useMutation } from "@apollo/client";

const MUTATION = gql`
mutation ($promotionId: Int!) {
deletePromotedClub(promotedClubId: $promotionId)
}
`;

const PromotedClubDeleteButton = ({ promotionId, refetch }) => {
const [deletePromotion] = useMutation(MUTATION, {
variables: { promotionId },
update(cache) {
cache.reset();
refetch();
}
});

const [anchorEl, setAnchorEl] = React.useState(null);

const handleDelete = () => {
setAnchorEl(null);
if (window.confirm("Are you sure you want to delete this promotion? This is irreversible.")) {
deletePromotion().catch(er => alert("There was an issue: " + er.message));
}
};

const handleClose = () => {
setAnchorEl(null);
};

return (
<div>
<IconButton onClick={ev => setAnchorEl(ev.target)}>
<MenuIcon />
</IconButton>
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
transformOrigin={"center top"}
>
<MenuItem onClick={handleDelete}>Delete</MenuItem>
</Menu>
</div>
);
};

export default PromotedClubDeleteButton;
111 changes: 57 additions & 54 deletions src/comps/ui/OrganizationPicker.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,57 @@
import React from 'react';
import { Typography, TextField }from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { gql, useQuery } from "@apollo/client";

const QUERY = gql`
query FindOrganization($keyword: String!){
organizations(keyword: $keyword, limit: 15){
id
name
}
}
`

const OrganizationPicker = ({ setOrgId }) => {
const [orgName, setOrgName] = React.useState("");
const [keyword, setKeyword] = React.useState("");
const {data, loading} = useQuery(QUERY, {
variables: {keyword}
});
const options = data === undefined ? [] : data.organizations;
return (
<div>
<Typography variant={"h5"}>Currently Selected Club: </Typography>
<div>
{orgName === "" ? <Autocomplete
options={options}
value={null}
getOptionLabel={_ => ""}
renderOption={option => <span>{option.name}</span>}
onChange={(ev, newvalue) => {
setOrgName(newvalue.name);
setOrgId(newvalue.id);
}}
loading={loading}
filterOptions={f => f}
renderInput={params => (
<TextField
{...params}
required = {true}
label = "Find Organization"
variant = "outlined"
value = {keyword}
onChange = {ev => setKeyword(ev.target.value)}
/>
)}
/> :
<Typography variant={"h5"}>{orgName}</Typography>}
</div>
</div>
);
}

export default OrganizationPicker;
import React from "react";
import { Typography, TextField } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { gql, useQuery } from "@apollo/client";

const QUERY = gql`
query FindOrganization($keyword: String!) {
organizations(keyword: $keyword, limit: 15) {
id
name
}
}
`;

const OrganizationPicker = ({ setOrgId }) => {
const [orgName, setOrgName] = React.useState("");
const [keyword, setKeyword] = React.useState("");
const { data, loading } = useQuery(QUERY, {
variables: { keyword }
});
const options = data === undefined ? [] : data.organizations;
return (
<div>
<Typography variant={"h5"}>Currently Selected Club: </Typography>
<div>
{orgName === "" ? (
<Autocomplete
options={options}
value={null}
getOptionLabel={_ => ""}
renderOption={option => <span>{option.name}</span>}
onChange={(ev, newvalue) => {
setOrgName(newvalue.name);
setOrgId(newvalue.id);
}}
loading={loading}
filterOptions={f => f}
renderInput={params => (
<TextField
{...params}
required={true}
label="Find Organization"
variant="outlined"
value={keyword}
onChange={ev => setKeyword(ev.target.value)}
/>
)}
/>
) : (
<Typography variant={"h5"}>{orgName}</Typography>
)}
</div>
</div>
);
};

export default OrganizationPicker;
23 changes: 15 additions & 8 deletions src/pages/admin/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@ import SignInRequired from "../../comps/ui/SignInRequired";
import Strikes from "./Strikes";
import OrgApprovals from "./approvals/OrgApprovals";
import AdminLog from "./AdminLog";
import { AssignmentTurnedIn, EmailOutlined, Assignment, SmsFailed, AttachMoney, FeaturedPlayList } from "@material-ui/icons";
import {
AssignmentTurnedIn,
EmailOutlined,
Assignment,
SmsFailed,
AttachMoney,
FeaturedPlayList
} from "@material-ui/icons";
import EmailClubLeaders from "./email";
import ManagePromotedClubs from "./promotedclub";

Expand Down Expand Up @@ -62,12 +69,12 @@ export default function AdminRouter({ match }) {
path: actualPath + "/email",
icon: <EmailOutlined />
},
{
label: "Manage Featured Clubs",
role: "promotedClubs",
path: actualPath + "/promotedclubs",
icon: <FeaturedPlayList />
}
{
label: "Manage Featured Clubs",
role: "promotedClubs",
path: actualPath + "/promotedclubs",
icon: <FeaturedPlayList />
}
].filter(tab => adminRoles.some(row => tab.role === row.role));

if (!tabs.length) {
Expand All @@ -86,7 +93,7 @@ export default function AdminRouter({ match }) {
<Route path={match.path + "/strikes"} component={Strikes} />
<Route path={match.path + "/log"} component={AdminLog} />
<Route path={match.path + "/email"} component={EmailClubLeaders} />
<Route path={match.path + "/promotedclubs"} component={ManagePromotedClubs} />
<Route path={match.path + "/promotedclubs"} component={ManagePromotedClubs} />
<Route path={match.path}>
<Redirect to={tabs[0].path} />
</Route>
Expand Down
Loading

0 comments on commit 0873712

Please sign in to comment.