Add banner container (Closes #50) (#52)

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@firebase/storage": "^0.3.10",
     "antd": "^3.21.2",
     "babel-plugin-import": "^1.12.0",
     "connected-react-router": "^6.5.2",
     "customize-cra": "^0.4.1",
+    "firebase": "^6.4.2",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "react": "^16.8.6",

src/actions/bannerActions.js

@@ -0,0 +1,32 @@
+import firebase from '@firebase/app';
+import '@firebase/storage';
+
+import { FETCH_BANNER } from './types';
+
+const config = {
+  apiKey: process.env.REACT_APP_API_KEY,
+  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_DATABASE_URL,
+  projectId: process.env.REACT_APP_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+};
+
+firebase.initializeApp(config);
+
+const storage = firebase.storage();
+
+export const fetchBanner = () => dispatch => {
+  storage
+    .ref(`/banner.png`)
+    .getDownloadURL()
+    .then(url =>
+      dispatch({
+        type: FETCH_BANNER,
+        payload: url,
+      })
+    )
+    .catch(err => {
+      console.error('Failed to load banner image');
+    });
+};

src/actions/types.js

@@ -0,0 +1 @@
+export const FETCH_BANNER = 'FETCH_BANNER';

src/components/Banner/index.jsx

@@ -2,15 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import './style.less';
+import DefaultBanner from '../../assets/graphics/default-banner.svg';
 
-const Banner = (props) => {
-  return (
-    <img className="banner" src={props.src}></img>
-  );
+const Banner = props => {
+  const onError = e => {
+    e.target.src = DefaultBanner;
+  };
+
+  return <img alt="banner" className="banner" src={props.src} onError={onError} />;
 };
 
 Banner.propTypes = {
-  src: PropTypes.string.isRequired
+  src: PropTypes.string.isRequired,
 };
 
 export default Banner;

src/components/NavBarHorizontal/index.jsx

@@ -4,10 +4,10 @@ import { Divider } from 'antd';
 
 import './style.less';
 import NavTileItem from './NavTileItem';
-import { ReactComponent as DashboardIcon } from '../../assets/graphics/dashboard-icon.svg';
-import { ReactComponent as DiscordIcon } from '../../assets/graphics/discord-icon.svg';
-import { ReactComponent as LBIcon } from '../../assets/graphics/lb-icon.svg';
-import { ReactComponent as ProfileIcon } from '../../assets/graphics/profile-icon.svg';
+import { ReactComponent as DashboardIcon } from '../../assets/icons/dashboard-icon.svg';
+import { ReactComponent as DiscordIcon } from '../../assets/icons/discord-icon.svg';
+import { ReactComponent as LBIcon } from '../../assets/icons/lb-icon.svg';
+import { ReactComponent as ProfileIcon } from '../../assets/icons/profile-icon.svg';
 
 export default () => {
   return (

src/components/NavBarVertical/index.jsx

@@ -3,12 +3,12 @@ import { NavLink } from 'react-router-dom';
 
 import './style.less';
 import NavListItem from '../NavListItem';
-import { ReactComponent as ACMIcon } from '../../assets/graphics/acm-icon.svg';
-import { ReactComponent as DashboardIcon } from '../../assets/graphics/dashboard-icon.svg';
-import { ReactComponent as DiscordIcon } from '../../assets/graphics/discord-icon.svg';
-import { ReactComponent as LBIcon } from '../../assets/graphics/lb-icon.svg';
-import { ReactComponent as ProfileIcon } from '../../assets/graphics/profile-icon.svg';
-import { ReactComponent as SwagIcon } from '../../assets/graphics/swag-icon.svg';
+import { ReactComponent as ACMIcon } from '../../assets/icons/acm-icon.svg';
+import { ReactComponent as DashboardIcon } from '../../assets/icons/dashboard-icon.svg';
+import { ReactComponent as DiscordIcon } from '../../assets/icons/discord-icon.svg';
+import { ReactComponent as LBIcon } from '../../assets/icons/lb-icon.svg';
+import { ReactComponent as ProfileIcon } from '../../assets/icons/profile-icon.svg';
+import { ReactComponent as SwagIcon } from '../../assets/icons/swag-icon.svg';
 
 export default () => {
   return (

src/components/NavProfile/index.jsx

@@ -4,27 +4,21 @@ import { Avatar, Icon, Dropdown, Progress } from 'antd';
 import { NavLink } from 'react-router-dom';
 
 import './style.less';
-import { ReactComponent as Caret } from '../../assets/graphics/caret-icon.svg';
+import { ReactComponent as Caret } from '../../assets/icons/caret-icon.svg';
 
-const NavProfile =(props) => {
+const NavProfile = props => {
   return (
     <div className="nav-width">
-    <Dropdown overlay={props.menu} trigger={['click']}>
-      <a className="ant-dropdown-link">
-        <div className="nav-profile">
-          <Progress
-            percent={props.exp}
-            showInfo={false}
-            strokeColor="#22ACEA"
-            type="circle"
-            width={55}
-          />
-          <Avatar size={55} icon="user" className="avatar" src={props.src} />
-          <span>{props.name}</span>
-          <Icon component={Caret} className='arrow'/>
-        </div>
-      </a>
-    </Dropdown>
+      <Dropdown overlay={props.menu} trigger={['click']}>
+        <a className="ant-dropdown-link">
+          <div className="nav-profile">
+            <Progress percent={props.exp} showInfo={false} strokeColor="#22ACEA" type="circle" width={55} />
+            <Avatar size={55} icon="user" className="avatar" src={props.src} />
+            <span>{props.name}</span>
+            <Icon component={Caret} className="arrow" />
+          </div>
+        </a>
+      </Dropdown>
     </div>
   );
 };
@@ -33,7 +27,7 @@ NavProfile.propTypes = {
   exp: PropTypes.number.isRequired,
   menu: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired
+  src: PropTypes.string.isRequired,
 };
 
 export default NavProfile;

src/containers/Banner.jsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+
+import Banner from '../components/Banner';
+import { fetchBanner } from '../actions/bannerActions';
+
+const BannerContainer = props => {
+  useEffect(() => {
+    props.fetchBanner();
+  });
+
+  return <Banner src={props.src} />;
+};
+
+const mapStateToProps = state => ({
+  src: state.banner.url,
+});
+
+export default connect(
+  mapStateToProps,
+  { fetchBanner }
+)(BannerContainer);

src/reducers/BannerReducer.js

@@ -0,0 +1,19 @@
+import { FETCH_BANNER } from '../actions/types';
+
+const initialState = {
+  url: '',
+};
+
+const BannerReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_BANNER:
+      return {
+        ...state,
+        url: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export default BannerReducer;

src/reducers/index.js

@@ -1,10 +1,10 @@
 import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';
 
-import TempReducer from './TempReducer';
+import BannerReducer from './BannerReducer';
 
 export default history =>
   combineReducers({
     router: connectRouter(history),
-    TempReducer,
+    banner: BannerReducer,
   });