Merge pull request #242 from olinlibrary/dev

Tune OAuth

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,11 +1,9 @@
 ## Description
-Describe your changes here.
-## Required
-Changes must conform to these requirements:
-* [ ] `yarn test` passes.  All new and existing tests pass.
-* [ ] `yarn lint` passes. All new code follows the code style of this project.
 
-## Aspirational
-We don't yet require these, but they are nice to have:
-* [ ] New code is covered by new or existing tests.
-* [ ] Changed code is covered by new or existing tests.
+Replace this text by a description of your changes.
+Fixes #.
+
+## Testing
+
+How should the reviewer test this PR?
+Write out any special testing steps here.

README.md

@@ -7,125 +7,38 @@ This is a Web front end to the [Olin College of Engineering
 Library](http://www.olin.build)'s [Amorphous Blob of
 Events](https://github.com/olinlibrary/ABE).
 
-## Development
+## Contributing
 
-### Setup
+Design, developer, Olin community member — you can help:
 
-#### Clone This Repo
+### Olin Community
 
-You first need to clone the code from this repository to your computer. To do that, run the following:
+* Use ABE
+* Tell people about ABE
+* Enter events into the calendar
+* Give us feedback
+  * Submit bug reports [here][issues]
+  * Submit ideas for new features [here][issues]
+  * Usability criticisms, suggestions, and improvements
 
-```shell
-git clone https://github.com/olinlibrary/abe-web.git
-cd abe-web
-```
+### Designers
 
-#### Install Node.js and yarn
+Usability and design issues are labeled with
+[`usability`](https://github.com/olinlibrary/abe-web/issues?q=is%3Aopen+is%3Aissue+label%3Ausability)
+and
+[`design`](https://github.com/olinlibrary/abe-web/issues?q=is%3Aopen+is%3Aissue+label%3Adesign).
 
-Then you'll need to install the Node.js server and a package manager (yarn).
+### Developers
 
-Install nodejs [from
-here](http://nodesource.com/blog/installing-node-js-tutorial-using-nvm-on-mac-os-x-and-ubuntu/),
-and yarn [here](https://yarnpkg.com/en/).
+The [contribution guidelines](./docs/CONTRIBUTING.md) describe how to run the project on your development machine.
 
-On macOS running [Homebrew](https://brew.sh/), you can install both nodejs and
-yarn via `brew install yarn`.
+Please check out the [the open issues][issues]. Good first issues are labeled with [`good first issue`][good-first-issue].
 
-On Ubuntu:
+## Contributors
 
-    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
-    nvm install node
-    nvm use node
-    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
-    echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
-    sudo apt-get update && sudo apt-get install yarn
+Built during the Software of Summer by @kylecombes, @audreywl, and @aidankmcl.
 
-#### Install Package Dependencies
-
-Once you have Node installed, you can use `yarn` to install the necessary packages (read from `package.json`).
-
-`cd` into the `abe-web` directory that the `git clone` command, above, created,
-and run `yarn install`:
-
-```shell
-cd abe-web
-yarn install
-```
-
-#### (Optional) Configure Environment variables
-
-Certain environment variables may be set before running the server. In
-particular, set `ABE_URL` to the URL of an [ABE server](https://github.com/olinlibrary/abe).
-
-* `ABE_URL` (optional) - the URL of the ABE back-end instance you'd like to
-   connect to. (Please use a dev instance when developing.) This defaults to
-   <http://localhost:3000/>, which is the URL of a local ABE server instance.
-* `DEBUG` (optional) - set to `true` to use the [Redux
-  devtools](https://github.com/zalmoxisus/redux-devtools-extension)
-* `GA_ID` (optional) - set to your Google Analytics tracking ID
-
-Set these variables by setting environment variables, or by creating a text file
-called `.env` in the root of the repository.
-
-If you are a member of Hacking the Library, use [this starter `.env`
-file](https://docs.google.com/document/d/1CZ45xYT33sTi5xpFJF8BkEeniCRszaxcfwiBmvMdmbk/edit).
-
-Otherwise, create your own `.env` file. You may copy `.env.template` to `.env`
-and the values in that file.
-
-### Run
-
-To launch the web app, make sure you have a local ABE instance running on port
-3000 (go to <https://github.com/olinlibrary/ABE> for instructions on how to run
-ABE) and run the following:
-
-    yarn dev
-
-Then visit <http://localhost:8080/> in your browser.
-
-Changes should be reflected in your browser every time you save a file (except
-CSS files, which currently require a manual refresh), but it may take a couple
-seconds for Webpack to recompile everything.
-
-### Test
-
-`yarn test` runs [Jest](https://facebook.github.io/jest/).
-
-`yarn test:watch` runs Jest in watch mode.
-
-`yarn test:coverage` creates a test coverage report. View the HTML at `./coverage/lcov-report/index.html`.
-
-### Lint
-
-`yarn lint` runs [ESLint](https://eslint.org/). This verifies that the code
-matches the project style conventions — mostly the [Airbnb JavaScript style
-guide](https://github.com/airbnb/javascript), with [some
-exceptions](./eslintrc.yml).
-
-`yarn format` fixes some lint errors, such as indentation and spacing.
-
-### Built With
-
-A familiarity with some of these technologies is helpful for working on the project,
-although by no means do you need to know all of them to work on just some parts.
-
-General web development:
-
-* [React](https://facebook.github.io/react/) lets JavaScript code create and
-  update HTML presentation elements.
-* [Redux](https://redux.js.org/) enables a [reactive programming
-  style](https://en.wikipedia.org/wiki/Reactive_programming).
-* [Babel](https://babeljs.io/) enables modern JavaScript features on older
-  browsers.
-* The [Ionic Framework](https://ionicframework.com/docs/) is a software
-  development kit for mobile web views (and native apps). Thie project uses CSS
-  files from the framework.
-
-For working on the server or the build system:
-
-* [Node.js](https://nodejs.org/en/https://nodejs.org/en/) runs JavaScript on the
-  server.
-* [Webpack](https://webpack.js.org/) combines and optimizes source files.
+Additional contributions during Hacking the Library '18 by @osteele, @HALtheWise, and @iblancett.
 
 ## License
 
@@ -141,3 +54,6 @@ width="40%"></a>We'd like to extend a special thank you to
 service free of charge. BrowserStack allows us to test our project in a
 multitude of browsers on various platforms, including IE, Safari, Android and
 iOS, to ensure compatibility with as many as possible.
+
+[issues]: https://github.com/olinlibrary/abe-web/issues
+[good-first-issue]: https://github.com/olinlibrary/abe-web/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22

docs/CONTRIBUTING.md

@@ -0,0 +1,127 @@
+# Contributing to ABE
+
+:+1::tada: First off, thanks for taking the time to contribute to ABE! :tada::+1:
+
+## Help Needed
+
+Please check out the [the open issues][issues].
+
+## Project setup
+
+#### Clone This Repo
+
+You first need to clone the code from this repository to your computer. To do that, run the following:
+
+```shell
+git clone https://github.com/olinlibrary/abe-web.git
+cd abe-web
+```
+
+#### Install Node.js and yarn
+
+Then you'll need to install the Node.js server and a package manager (yarn).
+
+Install nodejs [from
+here](http://nodesource.com/blog/installing-node-js-tutorial-using-nvm-on-mac-os-x-and-ubuntu/),
+and yarn [here](https://yarnpkg.com/en/).
+
+On macOS running [Homebrew](https://brew.sh/), you can install both nodejs and
+yarn via `brew install yarn`.
+
+On Ubuntu:
+
+    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
+    nvm install node
+    nvm use node
+    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+    echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+    sudo apt-get update && sudo apt-get install yarn
+
+#### Install Package Dependencies
+
+Once you have Node installed, you can use `yarn` to install the necessary packages (read from `package.json`).
+
+`cd` into the `abe-web` directory that the `git clone` command, above, created,
+and run `yarn install`:
+
+```shell
+cd abe-web
+yarn install
+```
+
+#### (Optional) Configure Environment variables
+
+Certain environment variables may be set before running the server. In
+particular, set `ABE_URL` to the URL of an [ABE server](https://github.com/olinlibrary/abe).
+
+* `ABE_URL` (optional) - the URL of the ABE back-end instance you'd like to
+   connect to. (Please use a dev instance when developing.) This defaults to
+   <http://localhost:3000/>, which is the URL of a local ABE server instance.
+* `DEBUG` (optional) - set to `true` to use the [Redux
+  devtools](https://github.com/zalmoxisus/redux-devtools-extension)
+* `GA_ID` (optional) - set to your Google Analytics tracking ID
+
+Set these variables by setting environment variables, or by creating a text file
+called `.env` in the root of the repository.
+
+If you are a member of Hacking the Library, use [this starter `.env`
+file](https://docs.google.com/document/d/1CZ45xYT33sTi5xpFJF8BkEeniCRszaxcfwiBmvMdmbk/edit).
+
+Otherwise, create your own `.env` file. You may copy `.env.template` to `.env`
+and the values in that file.
+
+### Run
+
+To launch the web app, make sure you have a local ABE instance running on port
+3000 (go to <https://github.com/olinlibrary/ABE> for instructions on how to run
+ABE) and run the following:
+
+    yarn dev
+
+Then visit <http://localhost:8080/> in your browser.
+
+Changes should be reflected in your browser every time you save a file (except
+CSS files, which currently require a manual refresh), but it may take a couple
+seconds for Webpack to recompile everything.
+
+### Test
+
+`yarn test` runs [Jest](https://facebook.github.io/jest/).
+
+`yarn test:watch` runs Jest in watch mode.
+
+`yarn test:coverage` creates a test coverage report. View the HTML at `./coverage/lcov-report/index.html`.
+
+### Lint
+
+`yarn lint` runs [ESLint](https://eslint.org/). This verifies that the code
+matches the project style conventions — mostly the [Airbnb JavaScript style
+guide](https://github.com/airbnb/javascript), with [some
+exceptions](./eslintrc.yml).
+
+`yarn format` fixes some lint errors, such as indentation and spacing.
+
+### Built With
+
+A familiarity with some of these technologies is helpful for working on the project,
+although by no means do you need to know all of them to work on just some parts.
+
+General web development:
+
+* [React](https://facebook.github.io/react/) lets JavaScript code create and
+  update HTML presentation elements.
+* [Redux](https://redux.js.org/) enables a [reactive programming
+  style](https://en.wikipedia.org/wiki/Reactive_programming).
+* [Babel](https://babeljs.io/) enables modern JavaScript features on older
+  browsers.
+* The [Ionic Framework](https://ionicframework.com/docs/) is a software
+  development kit for mobile web views (and native apps). Thie project uses CSS
+  files from the framework.
+
+For working on the server or the build system:
+
+* [Node.js](https://nodejs.org/en/https://nodejs.org/en/) runs JavaScript on the
+  server.
+* [Webpack](https://webpack.js.org/) combines and optimizes source files.
+
+[issues]: https://github.com/olinlibrary/abe-web/issues

src/data/auth.js

@@ -2,22 +2,18 @@ import axios from 'axios';
 
 const ACCESS_TOKEN_KEY = 'abeAccessToken';
 
-// axios.interceptors.request.use((config) => {
-//   if (accessToken) {
-//     // eslint-disable-next-line no-param-reassign
-//     config.headers.common.Authorization = `Bearer ${accessToken}`;
-//   }
-//   return config;
-// }, Promise.reject);
+export function clearAccessToken() {
+  localStorage.removeItem(ACCESS_TOKEN_KEY);
+  axios.defaults.headers.common.Authorization = null;
+}
 
 export function setAccessToken(accessToken) {
   localStorage[ACCESS_TOKEN_KEY] = accessToken;
   axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
 }
 
-export function clearAccessToken() {
-  localStorage.removeItem(ACCESS_TOKEN_KEY);
-  axios.defaults.headers.common.Authorization = null;
+export function canSignOut() {
+  return Boolean(localStorage[ACCESS_TOKEN_KEY]);
 }
 
 export function removeOauthParams(url) {

src/sidebar/footer.jsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-const Footer = _props => (
+const Footer = props => (
   <footer>
     <div className="footer-message">
       <p>
@@ -20,6 +20,12 @@ const Footer = _props => (
           View on GitHub
         </a>
       </p>
+      {props.onSignOut && (
+        <span>
+          &nbsp;|&nbsp;
+          <a onClick={props.onSignOut}>Sign Out</a>
+        </span>
+      )}
     </div>
   </footer>
 );

src/sidebar/sidebar.jsx

@@ -11,6 +11,7 @@ import GenerateICSPane from './generate-ics-pane';
 import LinkPane from './link-pane';
 import MarkdownGuide from './markdown-guide';
 import SidebarItemContainer from './sidebar-item-wrapper';
+import { canSignOut, clearAccessToken } from '../data/auth';
 
 const Sidebar = (props) => {
   const {
@@ -81,6 +82,10 @@ const Sidebar = (props) => {
     </div>
   );
 
+  const onSignOut = () => {
+    clearAccessToken();
+    window.location.reload();
+  };
   const sidebarClasses = `app-sidebar${props.isCollapsed ? ' collapsed' : ' expanded'}`;
   return (
     <div className={sidebarClasses}>
@@ -90,7 +95,7 @@ const Sidebar = (props) => {
           toggleSidebarCollapsed={props.toggleSidebarCollapsed}
         />
         <div className="sidebar-content">{content}</div>
-        <Footer class="sidebar-footer" />
+        <Footer class="sidebar-footer" onSignOut={canSignOut() && onSignOut} />
       </div>
     </div>
   );