diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 6b95f8b..ed88c6e 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.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. diff --git a/README.md b/README.md index 82066c9..1915886 100644 --- a/README.md +++ b/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 - , 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 for instructions on how to run -ABE) and run the following: - - yarn dev - -Then visit 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%">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 diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md new file mode 100644 index 0000000..af2410c --- /dev/null +++ b/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 + , 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 for instructions on how to run +ABE) and run the following: + + yarn dev + +Then visit 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 diff --git a/src/data/auth.js b/src/data/auth.js index ff2b0e4..172b99f 100644 --- a/src/data/auth.js +++ b/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) { diff --git a/src/sidebar/footer.jsx b/src/sidebar/footer.jsx index 3d514fd..d1861a8 100644 --- a/src/sidebar/footer.jsx +++ b/src/sidebar/footer.jsx @@ -2,7 +2,7 @@ import * as React from 'react'; -const Footer = _props => ( +const Footer = props => (

@@ -20,6 +20,12 @@ const Footer = _props => ( View on GitHub

+ {props.onSignOut && ( + +  |  + Sign Out + + )}
); diff --git a/src/sidebar/sidebar.jsx b/src/sidebar/sidebar.jsx index 0fecb24..3302afa 100644 --- a/src/sidebar/sidebar.jsx +++ b/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) => { ); + const onSignOut = () => { + clearAccessToken(); + window.location.reload(); + }; const sidebarClasses = `app-sidebar${props.isCollapsed ? ' collapsed' : ' expanded'}`; return (
@@ -90,7 +95,7 @@ const Sidebar = (props) => { toggleSidebarCollapsed={props.toggleSidebarCollapsed} />
{content}
-
);