CITi-UFPE · amandasavluchinske · Oct 23, 2019 · Oct 23, 2019
diff --git a/public/index.html b/public/index.html
@@ -1,39 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#8cba4e" />
+    <link rel="manifest" href="./manifest.json" />
+    <link href="https://fonts.googleapis.com/css?family=Barlow:400,400i,500" rel="stylesheet" />
+    <title>CITi's #library</title>
+    <!-- Hotjar Tracking Code -->
+    <script>
+      ;(function(h, o, t, j, a, r) {
+        h.hj =
+          h.hj ||
+          function() {
+            ;(h.hj.q = h.hj.q || []).push(arguments)
+          }
+        h._hjSettings = { hjid: 1332564, hjsv: 6 }
+        a = o.getElementsByTagName('head')[0]
+        r = o.createElement('script')
+        r.async = 1
+        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv
+        a.appendChild(r)
+      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')
+    </script>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-140893167-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || []
+      function gtag() {
+        dataLayer.push(arguments)
+      }
+      gtag('js', new Date())
+      gtag('config', 'UA-140893167-2')
+    </script>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#8cba4e">
-  <link rel="manifest" href="./manifest.json">
-  <link href="https://fonts.googleapis.com/css?family=Barlow:400,400i,500" rel="stylesheet">
-  <title>CITi's #library</title>
-  <!-- Hotjar Tracking Code -->
-  <script>
-    (function (h, o, t, j, a, r) {
-      h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
-      h._hjSettings = { hjid: 1332564, hjsv: 6 };
-      a = o.getElementsByTagName('head')[0];
-      r = o.createElement('script'); r.async = 1;
-      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
-      a.appendChild(r);
-    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
-  </script>
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-140893167-2"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
-    gtag('config', 'UA-140893167-2');
-  </script>
-</head>
-
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-</body>
-
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
 </html>
diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -12,12 +12,17 @@ const Header = () => (
       <NavLink activeClassName={styles.active} to="/tags">
         Tags
       </NavLink>
+      <NavLink activeClassName={styles.active} to="/authors">
+        Autores
+      </NavLink>
       <NavLink activeClassName={styles.active} to="/leaderboards">
         Leaderboards
       </NavLink>
     </nav>
     <div className={styles.title}>
-      <span role="img" aria-label="Título">📗🐷</span>
+      <span role="img" aria-label="Título">
+        📗🐷
+      </span>
     </div>
     <p className={styles.intro}>
       Todos os aprendizados do CITi no <a href="https://discord.gg/XMMrkVJ">#library</a> em um só

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ import { Provider, connect } from 'react-redux'
 import React, { Component } from 'react'
 import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'
 import Tags, { SingleTag } from 'pages/tags'
+import Authors, { SingleAuthor } from 'pages/authors'
 
 import Footer from 'components/footer'
 import Header from 'components/header'
@@ -16,25 +17,27 @@ import store from 'store'
 import styles from 'styles/main.scss'
 
 class App extends Component {
-  componentDidMount () {
+  componentDidMount() {
     this.props.getLibrary()
     this.props.getAuthors()
   }
 
-  render () {
+  render() {
     const { store } = this.props
     return (
-      <Router basename='/library'>
+      <Router basename="/library">
         <Provider store={store}>
           <div className={styles.body}>
             <div className={styles.container}>
               <Header />
               <Switch>
-                <Route exact path='/' component={Home} />
-                <Route exact path='/tags' component={Tags} />
-                <Route exact path='/tag/:tagName' component={SingleTag} />
-                <Route exact path='/learning/:learningId' component={LearningPage} />
-                <Route exact path='/leaderboards' component={Leaderboard} />
+                <Route exact path="/" component={Home} />
+                <Route exact path="/tags" component={Tags} />
+                <Route exact path="/tag/:tagName" component={SingleTag} />
+                <Route exact path="/authors" component={Authors} />
+                <Route exact path="/author/:authorName" component={SingleAuthor} />
+                <Route exact path="/learning/:learningId" component={LearningPage} />
+                <Route exact path="/leaderboards" component={Leaderboard} />
                 <Route render={() => <div>Página não encontrada</div>} />
               </Switch>
               <Footer />
@@ -46,16 +49,14 @@ class App extends Component {
   }
 }
 
-const mapDispatchToProps = dispatch => (
-  bindActionCreators({ getLibrary, getAuthors }, dispatch)
-)
+const mapDispatchToProps = dispatch => bindActionCreators({ getLibrary, getAuthors }, dispatch)
 
-const ConnectedApp = connect(null, mapDispatchToProps)(App)
+const ConnectedApp = connect(
+  null,
+  mapDispatchToProps
+)(App)
 
-ReactDOM.render(
-  <ConnectedApp store={store} />,
-  document.getElementById('root')
-)
+ReactDOM.render(<ConnectedApp store={store} />, document.getElementById('root'))
 
 // Disable for now
 // registerServiceWorker()
diff --git a/src/pages/authors/authors.jsx b/src/pages/authors/authors.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { map, isEmpty } from 'lodash'
+
+import { NavLink } from 'react-router-dom'
+import Page from 'components/page'
+import Title from 'components/title'
+import { connect } from 'react-redux'
+import { urlfyAuthorUsername } from 'utils/helpers'
+import styles from './style.scss'
+
+const Authors = props => {
+  const { authors } = props
+  return (
+    <Page>
+      <Title>Filtrar por autores</Title>
+      <div className={styles.authorList}>
+        {!isEmpty(authors) &&
+          map(authors, author => (
+            <NavLink
+              className={styles.author}
+              key={author.id}
+              to={`/author/${urlfyAuthorUsername(author.data.username)}`}
+            >
+              {author.data.username}
+            </NavLink>
+          ))}
+      </div>
+    </Page>
+  )
+}
+
+const mapStateToProps = state => ({
+  authors: state.authors.items || []
+})
+
+export default connect(mapStateToProps)(Authors)
diff --git a/src/pages/authors/index.js b/src/pages/authors/index.js
@@ -0,0 +1,4 @@
+import SingleAuthor from './single-author'
+import Authors from './authors'
+export default Authors
+export { SingleAuthor }
diff --git a/src/pages/authors/single-author.jsx b/src/pages/authors/single-author.jsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { isEmpty, find, replace, deburr, get } from 'lodash'
+
+import Learning from 'components/learning'
+import { Link } from 'react-router-dom'
+import Page from 'components/page'
+import Title from 'components/title'
+import { connect } from 'react-redux'
+import emoji from 'react-easy-emoji'
+import { urlfyAuthorUsername } from 'utils/helpers'
+import styles from './style.scss'
+
+const SingleAuthor = props => {
+  const { items, author } = props
+  if (isEmpty(author)) return null
+  return (
+    <Page>
+      <Link to="/authors" className={styles.back}>
+        {emoji('👈')}
+      </Link>
+      <Title>Filtrando por {!isEmpty(author) && get(author.data, 'username')}</Title>
+      <div>
+        {items.length ? (
+          items.map(item => <Learning key={item.id} id={item.id} data={item.data} />)
+        ) : (
+          <div>Nenhum item encontrado.</div>
+        )}
+      </div>
+    </Page>
+  )
+}
+
+const mapStateToProps = (state, { match }) => {
+  const { authors } = state
+  const authorName = match.params.authorName
+  const author =
+    !!authors && find(authors.items, i => urlfyAuthorUsername(i.data.username) === authorName)
+  const filteredItems =
+    !!author &&
+    !!state.library.items &&
+    state.library.items.filter(i => i.data.authorId === get(author.data, 'id'))
+  return { author: author, items: filteredItems, isLoading: state.isLoading }
+}
+
+export default connect(mapStateToProps)(SingleAuthor)
diff --git a/src/pages/authors/style.scss b/src/pages/authors/style.scss
@@ -0,0 +1,15 @@
+.author-list {
+  line-height: 28px;
+
+  .author {
+    margin-right: 10px;
+    font-size: 1.2em;
+    display: inline-block;
+  }
+}
+
+.back {
+  font-size: 2em;
+  display: block;
+  margin-bottom: 10px;
+}
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
@@ -0,0 +1,5 @@
+import { replace, deburr, toLower } from 'lodash'
+
+export const urlfyAuthorUsername = username => {
+  return replace(toLower(deburr(username)), ' ', '')
+}
diff --git a/src/utils/parsing.js b/src/utils/parsing.js
@@ -4,6 +4,6 @@ export const parseTags = tagsList => {
   const tags = tagsList
     .map(i => i.data.tags)
     .filter(i => i !== '')
-    .map(i => i.includes(',') ? i.split(',') : i)
+    .map(i => (i.includes(',') ? i.split(',') : i))
   return _.uniq(_.flatten(tags))
 }