Merge branch 'master' of github.com:pennlabs/pennbasics

src/shared/components/home/App.js

@@ -4,22 +4,28 @@ import s from 'styled-components'
 import { connect } from 'react-redux'
 
 import { Row, Col, ColSpace } from '../shared'
+import { maxWidth, PHONE, TABLET, minWidth } from '../../styles/sizes'
 
 import Filter from './Filter/Filter'
 import Weather from './Weather'
 import News from './News'
 import Dining from './Dining'
 import Laundry from './Laundry'
-import Studyspaces from './Studyspaces'
 import Notification from './Notification'
 import ExternalLinks from './ExternalLinks'
+import Quotes from './Quotes'
 import Events from './Events'
 import Footer from '../footer'
 
 const HOME_FILTER = 'homeFilter'
 
 const Wrapper = s.div`
-  padding: 1rem;
+  padding-top: 1rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  ${maxWidth(PHONE)} {
+    padding: 1rem;
+  }
 `
 
 class Home extends Component {
@@ -52,12 +58,12 @@ class Home extends Component {
 
         this.setState({
           componentList: [
+            <Quotes/>,
             <Weather />,
             <Events />,
             <News />,
             <Laundry />,
             <Dining show={this.state.dining} />,
-            <Studyspaces />,
           ],
         })
       })

src/shared/components/home/ExternalLinks.js

@@ -1,5 +1,71 @@
 import React, { Component } from 'react'
-import { BorderedCard } from '../shared'
+import { BorderedCard, Row, Col, ColSpace, Line } from '../shared'
+
+const renderExternalLink = (pictureURL, websiteURL, productName) => {
+  return (
+    <BorderedCard>
+      <Row>
+        <Col width="20%">
+          <a href={websiteURL} target="_blank"> <img src={pictureURL} /> </a>
+        </Col>
+        <ColSpace />
+        <Col>
+          <a href={websiteURL} target="_blank"> {productName} </a>
+        </Col>
+      </Row>
+    </BorderedCard>
+  )
+}
+
+const renderUsefulLink = (websiteURL, description) => {
+  return (
+    <a href={websiteURL} target="_blank"> {description} </a>
+  )
+}
+
+const mapping = [
+  {
+    "pictureURL": "https://raw.githubusercontent.com/pennlabs/clubs/master/static/img/peoplelogo.png",
+    "websiteURL": "https://pennclubs.com/",
+    "productName": "Penn Clubs"
+  },
+  {
+    "pictureURL": "https://raw.githubusercontent.com/pennlabs/pennlabs.org/master/static/img/PCR.png",
+    "websiteURL": "https://penncoursereview.com/",
+    "productName": "Penn Course Review"
+  },
+  // {
+  //   "pictureURL": "https://raw.githubusercontent.com/pennlabs/pennlabs.org/master/static/img/PCA.png",
+  //   "websiteURL": "https://penncoursealert.com/"
+  // },
+  // {
+  //   "pictureURL": "https://raw.githubusercontent.com/pennlabs/pennlabs.org/master/static/img/PCS.png",
+  //   "websiteURL": "https://penncoursesearch.com/"
+  // }
+]
+
+const usefulLinks = [
+  {
+    "websiteURL": "https://pennlabs.org/",
+    "description": "Penn Labs"
+  },
+  {
+    "websiteURL": "https://www.upenn.edu/",
+    "description": "Penn Homepage"
+  },
+  {
+    "websiteURL": "https://prod.campusexpress.upenn.edu/",
+    "description": "CampusExpress"
+  },
+  {
+    "websiteURL": "https://canvas.upenn.edu",
+    "description": "Canvas"
+  },
+  {
+    "PennInTouch": "https://pennintouch.apps.upenn.edu/pennInTouch/jsp/fast2.do",
+    "description": "PennInTouch"
+  }
+]
 
 class ExternalLinks extends Component {
   constructor(props) {
@@ -12,29 +78,20 @@ class ExternalLinks extends Component {
     return (
       <BorderedCard>
         <h1 className="title is-4">More in the Penn Ecosystem</h1>
+        {mapping.map(({ pictureURL, websiteURL, productName }) => {
+          return renderExternalLink(pictureURL, websiteURL, productName)
+        })}
+        <Line />
         <br />
-        <h2 className="subtitle is-6">
-          Go to <a href="https://pennclubs.com">Penn Clubs</a> to explore
-          communities to join!
-        </h2>
-        <br />
-        <img
-          src="https://raw.githubusercontent.com/pennlabs/clubs/master/static/img/peoplelogo.png"
-          width="64"
-          height="64"
-        ></img>
-        <br />
-        <br />
-        <iframe
-          src={link}
-          width="200"
-          height="687"
-          scrolling="yes"
-          style={{ border: 'none' }}
-          frameborder="0"
-          allowTransparency="true"
-          allow="encrypted-media"
-        />
+        {usefulLinks.map(({ websiteURL, description }, index) => {
+          return (
+            <>
+              {renderUsefulLink(websiteURL, description)}
+              {index == usefulLinks.length - 1 ? <></> : <br/>}
+            </>
+          )
+        })}
+
       </BorderedCard>
     )
   }

src/shared/components/home/Filter/Filter.js

@@ -26,12 +26,12 @@ class Filter extends Component {
         onClick={toggleHomeCustomizeDispatch}
         onClickOption={filterHomeCustomizeDispatch}
         options={[
+          'Quotes',
           'Weather',
           'Events',
           'News',
           'Laundry',
-          'Dining',
-          'Studyspaces',
+          'Dining'
         ]}
         activeOptions={JSON.parse(localStorage.getItem('homeFilter'))}
         active={filterCustomizeActive}

src/shared/components/home/Laundry.js

@@ -44,13 +44,10 @@ class Laundry extends Component {
 
         return (
           <>
-            <div className="column">
-              <h1 className="title is-6">
-                {`${index + 1}. ${favorite.location}: ${favorite.hall_name}`}
-              </h1>
-            </div>
-            <div className="columns" key={uuid()}>
-              <Row justifyContent="space-between">
+            <h1 className="title is-6">
+              {`${favorite.location}: ${favorite.hall_name}`}
+            </h1>
+            <Row justifyContent="space-between">
                 {[
                   [open, 'Available', GREEN, LIGHT_GREEN],
                   [running, 'Busy', MUSTARD, LIGHT_YELLOW],
@@ -67,8 +64,8 @@ class Laundry extends Component {
                   </LaundryOverview>
                 ))}
               </Row>
-
               {index === favoritesHome.length - 1 ? null : <hr />}
+            <div className="columns" key={uuid()}>
             </div>
           </>
         )
@@ -83,9 +80,9 @@ class Laundry extends Component {
           <Link to="/laundry" className="link">
             <h1 className="title is-4">Laundry</h1>
           </Link>
-          <h3 className="subtitle is-6">Status of favorite halls</h3>
-          <br />
+          <h3 className="subtitle is-6">Status of your favorite halls</h3>
         </article>
+        <br/>
         {this.renderFavorites()}
       </BorderedCard>
     )

src/shared/components/home/News.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import axios from 'axios'
-import { BorderedCard, ImageZoom } from '../shared'
+import { BorderedCard, ImageZoom, Col, ColSpace, Row } from '../shared'
 
 class News extends Component {
   constructor(props) {
@@ -26,27 +26,27 @@ class News extends Component {
   renderNews() {
     const { picture, link, title, content, time } = this.state.data
     return (
-      <article className="media">
-        <div className="media-left" style={{ overflow: 'hidden' }}>
+      <Row>
+        <Col width="70%">
           <a href={link}>
-            <ImageZoom src={picture} alt="First" width="500px" />
+            <ImageZoom src={picture} alt="First" />
           </a>
-        </div>
-        <div className="media-content">
-          <div className="content">
-            <p className="is-size-6">
-              <strong>
-                <a href={link}>{title}</a>
-              </strong>
-              <br />
-              <small>{content}</small>
-              <br />
-              <br />
-              <small> {time} </small>
-            </p>
-          </div>
-        </div>
-      </article>
+        </Col>
+        <ColSpace />
+        <Col>
+          <p className="is-size-6">
+            <strong>
+              <a href={link}>{title}</a>
+            </strong>
+            <br />
+            <br />
+            <small>{content}</small>
+            <br />
+            <br />
+            <small> {time} </small>
+          </p>
+        </Col>
+      </Row>
     )
   }
 

src/shared/components/home/Quotes.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+import axios from 'axios'
+import s from 'styled-components'
+
+const Author = s.p`
+    font-size: 80%;
+    opacity: 0.75;
+    font-style: italic;
+`
+
+
+class Quotes extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            quotes: null,
+            greetings: [
+                'Hi There!',
+                'How Are You Doing?',
+                "Yo, What's Up?",
+                'Howdy!',
+            ],
+            emojis: ['😀', '😛', '😗', '🤠'],
+            greeting: '',
+            quote: '',
+            author: '',
+        }
+    }
+
+    componentDidMount() {
+        // TODO reduxify this
+        axios
+            .get('/api/quotes')
+            .then(res => {
+                const quotes = res.data
+                const { quote, author } = quotes[
+                    Math.floor(Math.random() * quotes.length)
+                ]
+                this.setState({ quote, author })
+            })
+            .catch(err => {
+                // TODO better error handling
+
+                console.log(err) // eslint-disable-line
+            })
+
+        const { greetings, emojis } = this.state
+
+        const greeting = greetings[Math.floor(Math.random() * greetings.length)]
+        const emoji = emojis[Math.floor(Math.random() * emojis.length)]
+        this.setState({ greeting: `${greeting} ${emoji}` })
+    }
+
+    render() {
+        const { quote, author, greeting } = this.state
+        return (
+            <>
+                <h1 className="title is-4">{greeting}</h1>
+                <div className="content is-medium" style={{ marginTop: '0.5rem' }}>
+                    <p className="has-text-centered">{`"${quote}"`}</p>
+                    <Author className="has-text-right">
+                        &#8212;
+                            {` `}
+                        {author}
+                    </Author>
+                </div>
+            </>
+        )
+    }
+}
+
+export default Quotes