Skip to content

Commit

Permalink
[docs] Fix showcase (#14494)
Browse files Browse the repository at this point in the history 
* [docs] Fix showcase

* matt review
  • Loading branch information
@oliviertassinari
oliviertassinari authored Feb 11, 2019
1 parent 440c9f6 commit 0001318
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 91 deletions.
130 changes: 65 additions & 65 deletions docs/src/pages/discover-more/showcase/Showcase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,96 +44,96 @@ const styles = theme => ({
},
});

function byTitle(a, b) {
return a.title.localeCompare(b.title);
function stableSort(array, cmp) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = cmp(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
return stabilizedThis.map(el => el[0]);
}

// Returns a function that sorts reverse numerically by value of `key`
function sortFactory(key) {
return function sortNumeric(a, b) {
if (!b[key]) {
if (b[key] < a[key]) {
return -1;
}
return a[key] ? b[key] - a[key] : 1;
if (b[key] > a[key]) {
return 1;
}
return 0;
};
}

const byNewest = sortFactory('index');
const byVisits = sortFactory('similarWebVisits');
const byStars = sortFactory('stars');
const sortFunctions = {
index: sortFactory('index'),
similarWebVisits: sortFactory('similarWebVisits'),
stars: sortFactory('stars'),
};

function Showcase(props) {
const { classes, t } = props;
const [sortFunction, setSortFunction] = React.useState(() => byVisits);
const [sortFunctionName, setSortFunctionName] = React.useState('byVisits');
const [sortFunctionName, setSortFunctionName] = React.useState('index');
const sortFunction = sortFunctions[sortFunctionName];

function handleChangeSort(event) {
const { value } = event.target;
setSortFunctionName(value);

switch (value) {
case 'byNewest':
setSortFunction(() => byNewest);
break;
case 'byStars':
setSortFunction(() => byStars);
break;
case 'byTitle':
setSortFunction(() => byTitle);
break;
default:
setSortFunction(() => byVisits);
break;
}
setSortFunctionName(event.target.value);
}

return (
<div className={classes.root}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="sort">Sort by</InputLabel>
<Select value={sortFunctionName} onChange={handleChangeSort} inputProps={{ id: 'sort' }}>
<MenuItem value="byVisits">{t('traffic')}</MenuItem>
<MenuItem value="byNewest">{t('newest')}</MenuItem>
<MenuItem value="byStars">{t('stars')}</MenuItem>
<MenuItem value="byTitle">{t('alphabetical')}</MenuItem>
<MenuItem value="index">{t('newest')}</MenuItem>
<MenuItem value="similarWebVisits">{t('traffic')}</MenuItem>
<MenuItem value="stars">{t('stars')}</MenuItem>
</Select>
</FormControl>
{appList.sort(sortFunction).map(app => (
<div key={app.title}>
<Typography component="h2" variant="h4" gutterBottom className={classes.title}>
<span>{app.title}</span>
{app.source ? (
<IconButton href={app.source} target="_blank" aria-label={`${app.title} source code`}>
<GithubIcon />
</IconButton>
) : null}
</Typography>
{app.image ? (
<Card className={classes.card}>
<CardMedia
component="a"
href={app.link}
rel="noopener"
{stableSort(appList.filter(item => item[sortFunctionName] !== undefined), sortFunction).map(
app => (
<div key={app.title}>
<Typography component="h2" variant="h4" gutterBottom className={classes.title}>
<span>{app.title}</span>
{app.source ? (
<IconButton
href={app.source}
target="_blank"
aria-label={`${app.title} source code`}
>
<GithubIcon />
</IconButton>
) : null}
</Typography>
{app.image ? (
<Card className={classes.card}>
<CardMedia
component="a"
href={app.link}
rel="noopener"
target="_blank"
className={classes.cardMedia}
image={`/static/images/showcase/${app.image}`}
title={app.title}
/>
</Card>
) : (
<Link
variant="body2"
target="_blank"
className={classes.cardMedia}
image={`/static/images/showcase/${app.image}`}
title={app.title}
/>
</Card>
) : (
<Link
variant="body2"
target="_blank"
rel="noopener nofollow"
href={app.link}
gutterBottom
>
Visit the website
</Link>
)}
<Typography className={classes.description}>{app.description}</Typography>
</div>
))}
rel="noopener nofollow"
href={app.link}
gutterBottom
>
Visit the website
</Link>
)}
<Typography className={classes.description}>{app.description}</Typography>
</div>
),
)}
</div>
);
}
Expand Down
35 changes: 10 additions & 25 deletions docs/src/pages/discover-more/showcase/appList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ const appList = [
image: 'eostoolkit.jpg',
link: 'https://www.eostoolkit.io/',
source: 'https://github.com/generEOS/eostoolkit',
stars: 43,
similarWebVisits: 123,
index: 30,
},
Expand Down Expand Up @@ -333,9 +334,9 @@ const appList = [
'theming. The UI is responsive. The code is open-source!',
image: 'posters-galore.jpg',
link: 'https://marmelab.com/react-admin-demo/',
source:
'https://github.com/marmelab/react-admin/tree/be23a1a8ebc4e2293b57898adcb2f359e836f0fd/examples/demo',
source: 'https://github.com/marmelab/react-admin',
index: 21,
stars: 6786,
},
{
title: 'Builder Book',
Expand All @@ -345,6 +346,7 @@ const appList = [
image: 'builderbook.jpg',
link: 'https://builderbook.org/',
source: 'https://github.com/builderbook/builderbook',
stars: 1042,
index: 5,
},
{
Expand Down Expand Up @@ -533,6 +535,7 @@ const appList = [
image: 'typekev.jpg',
link: 'https://typekev.com/',
source: 'https://github.com/typekev/typekev-site',
stars: 8,
index: 23,
},
{
Expand Down Expand Up @@ -564,23 +567,13 @@ const appList = [
image: 'tentu.jpg',
index: 22,
},
{
title: 'Misheneye',
description:
'Creates custom brand guides for companies. It walks you through creating your ' +
'mission, vision, values, colors, typography and imagery choices, then displays them in ' +
'a beautiful brand guide for your organization.',
image: 'misheneye.jpg',
link: 'https://www.misheneye.com',
index: 36,
},
{
title: 'Swimmy',
description: 'An open source forum PWA. 🇯🇵 (Github docs are in English)',
image: 'swimmy.jpg',
link: 'https://swimmy.io/',
source: 'https://github.com/swimmy/swimmy.io',
stars: 3,
stars: 4,
index: 27,
},
{
Expand Down Expand Up @@ -643,7 +636,7 @@ const appList = [
image: 'snippets.jpg',
link: 'https://chrome.google.com/webstore/detail/snippets/dcibnkkafifbanoclgjbkmkbogijndin',
source: 'https://github.com/richardscarrott/snippets',
stars: 36,
stars: 38,
index: 19,
},
{
Expand All @@ -665,7 +658,7 @@ const appList = [
link: 'https://tree.valleyease.me/',
image: 'tree.jpg',
source: 'https://github.com/ValleyZw/tree',
stars: 7,
stars: 9,
index: 35,
},
{
Expand All @@ -676,7 +669,7 @@ const appList = [
'You can also reorder your playlist tracks and upload new playlist cover images.',
link: 'https://componofy.herokuapp.com/',
source: 'https://github.com/DalerAsrorov/componofy',
stars: 5,
stars: 6,
index: 8,
},
{
Expand All @@ -690,20 +683,12 @@ const appList = [
link: 'https://justaskusers.com/',
index: 24,
},
{
title: 'Gadr',
description:
'Follow top performing crypto traders. ' +
'Get notifications from your favorite traders. Get a full overview of your crypto assets.' +
'Share your portfolio with the world and see how you stack up to the best',
link: 'https://gadr.io/',
index: 33,
},
{
title: 'Persona',
description: 'Zero knowledge digital identity management system built on blockchain.',
link: 'https://persona.im/',
image: 'persona.jpg',
index: 0,
},
];

Expand Down
1 change: 0 additions & 1 deletion docs/translations/translations.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@
"traffic": "Traffic",
"newest": "Newest",
"stars": "GitHub stars",
"alphabetical": "Alphabetical",
"dashboardTitle": "Dashboard",
"dashboardDescr": "A minimal dashboard with taskbar and mini variant draw. The chart is courtesy of Recharts, but it is simple to substitute an alternative.",
"signInTitle": "Sign-in",
Expand Down
Binary file removed static/images/showcase/misheneye.jpg
View file
Binary file not shown.

0 comments on commit 0001318

Please sign in to comment.