diff --git a/docs/src/pages/discover-more/showcase/Showcase.js b/docs/src/pages/discover-more/showcase/Showcase.js index 2ec4b0ff0f233b..f4cb9854dcdff4 100644 --- a/docs/src/pages/discover-more/showcase/Showcase.js +++ b/docs/src/pages/discover-more/showcase/Showcase.js @@ -44,47 +44,42 @@ 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 ( @@ -92,48 +87,53 @@ function Showcase(props) { Sort by - {appList.sort(sortFunction).map(app => ( -
- - {app.title} - {app.source ? ( - - - - ) : null} - - {app.image ? ( - - item[sortFunctionName] !== undefined), sortFunction).map( + app => ( +
+ + {app.title} + {app.source ? ( + + + + ) : null} + + {app.image ? ( + + + + ) : ( + - - ) : ( - - Visit the website - - )} - {app.description} -
- ))} + rel="noopener nofollow" + href={app.link} + gutterBottom + > + Visit the website + + )} + {app.description} +
+ ), + )} ); } diff --git a/docs/src/pages/discover-more/showcase/appList.js b/docs/src/pages/discover-more/showcase/appList.js index c2efd81b837dec..1dd4ede6d1d5b3 100644 --- a/docs/src/pages/discover-more/showcase/appList.js +++ b/docs/src/pages/discover-more/showcase/appList.js @@ -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, }, @@ -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', @@ -345,6 +346,7 @@ const appList = [ image: 'builderbook.jpg', link: 'https://builderbook.org/', source: 'https://github.com/builderbook/builderbook', + stars: 1042, index: 5, }, { @@ -533,6 +535,7 @@ const appList = [ image: 'typekev.jpg', link: 'https://typekev.com/', source: 'https://github.com/typekev/typekev-site', + stars: 8, index: 23, }, { @@ -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, }, { @@ -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, }, { @@ -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, }, { @@ -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, }, { @@ -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, }, ]; diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 4351fdae3e4e9a..386312610a557c 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -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", diff --git a/static/images/showcase/misheneye.jpg b/static/images/showcase/misheneye.jpg deleted file mode 100644 index 10322188f797d6..00000000000000 Binary files a/static/images/showcase/misheneye.jpg and /dev/null differ