Merge f0dd23d into 69d4ddb

.gitignore

@@ -2,7 +2,7 @@
 /.idea/
 coverage/
 package-lock.json
-dist/
-src/tests/__snapshots__/*
+dist/*
+*/__snapshots__/*
 .DS_Store
 src/.DS_Store/*

package.json

@@ -30,10 +30,10 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "axios": "^0.18.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",
     "bootstrap": "^4.3.1",
     "classnames": "^2.2.6",
-    "bootstrap": "^4.3.1",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "express": "^4.16.4",

src/actions/LoginAction.js

@@ -23,7 +23,10 @@ export const userLoginRequest = userData => async dispatch => {
 
     sessionStorage.setItem("token", response.data.user.token);
     sessionStorage.setItem("username", response.data.user.username);
+    sessionStorage.setItem("email", response.data.user.email);
+
     dispatch(successLogin(response));
+
     toast.success(`Welcome ${response.data.user.username}. Login Successful`, {
       position: toast.POSITION.TOP_RIGHT,
       autoClose: 2000,

src/actions/SocialAuthActions.js

@@ -38,6 +38,7 @@ export const facebooklogin = token => dispatch => {
             }
           );
           sessionStorage.setItem("username", data.data["auth_token"].username);
+          sessionStorage.setItem("email", data.data["auth_token"].email);
           dispatch({
             type: FACEBOOK_LOGIN,
             payload: data.data["auth_token"]
@@ -82,6 +83,7 @@ export const googlelogin = token => dispatch => {
             }
           );
           sessionStorage.setItem("username", data.data["auth_token"].username);
+          sessionStorage.setItem("email", data.data["auth_token"].email);
           dispatch({
             type: GOOGLE_LOGIN,
             payload: data.data["auth_token"]

src/actions/articleCreateEditAction.js

@@ -0,0 +1,44 @@
+import axios from "axios";
+import { ARTICLE_SUCCESS, ARTICLE_FAIL } from "./types";
+import { toast } from "react-toastify";
+
+export const successCreateArticle = data => {
+  return {
+    type: ARTICLE_SUCCESS,
+    payload: data.article.slug
+  };
+};
+
+export const articleCreateEditAction = (article, url, method, props) => {
+  return async dispatch => {
+    try {
+      const response = await axios({
+        method: method,
+        url: url,
+        data: article,
+        headers: {
+          Authorization: `Bearer ${sessionStorage.getItem("token")}`
+        }
+      });
+
+      toast.dismiss();
+      dispatch(successCreateArticle(response.data));
+      props.history.push("/article/" + response.data.article.slug);
+    } catch (error) {
+      if (error.response) {
+        dispatch({
+          type: ARTICLE_FAIL
+        });
+        toast.dismiss();
+        const errors = error.response.data.errors;
+        for (var key in errors) {
+          toast.error(`${key}: ${errors[key]}`, {
+            position: toast.POSITION.TOP_RIGHT,
+            autoClose: false,
+            hideProgressBar: false
+          });
+        }
+      }
+    }
+  };
+};

src/actions/getArticle.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { FETCH_ARTICLE_SUCCESS } from "./types";
+
+export const getArticleAction = slug => dispatch => {
+  return axios
+    .get(
+      "https://ah-backend-prime-staging.herokuapp.com/api/v1/articles/" + slug
+    )
+    .then(response => {
+      dispatch(fetchArticlesSuccess(response.data));
+    });
+};
+
+const fetchArticlesSuccess = payload => {
+  return {
+    type: FETCH_ARTICLE_SUCCESS,
+    payload: payload
+  };
+};

src/actions/getArticles.js

@@ -1,13 +1,19 @@
 import axios from "axios";
 import { FETCH_ARTICLES_SUCCESS } from "./types";
 
-export const getArticlesAction = () => dispatch => {
+export const getArticlesAction = (kwargs = " ") => dispatch => {
   return axios
-    .get("https://my-json-server.typicode.com/patrickf949/demo/posts")
+    .get(
+      "https://ah-backend-prime-staging.herokuapp.com/api/v1/articles/" + kwargs
+    )
     .then(response => {
-      dispatch({
-        type: FETCH_ARTICLES_SUCCESS,
-        payload: response.data
-      });
+      dispatch(fetchArticlesSuccess(response.data.results));
     });
 };
+
+const fetchArticlesSuccess = payload => {
+  return {
+    type: FETCH_ARTICLES_SUCCESS,
+    payload: payload
+  };
+};

src/actions/types.js

@@ -17,3 +17,6 @@ export const PROFILE_FETCHING = "PROFILE_FETCHING";
 export const PROFILE_FETCHED = "PROFILE_FETCHED";
 export const PROFILE_FETCH_FAILED = "PROFILE_FETCH_FAILED";
 export const PROFILE_EDIT_SUCCESS = "PROFILE_EDIT_SUCCESS";
+export const ARTICLE_SUCCESS = "ARTICLE_SUCCESS";
+export const ARTICLE_FAIL = "ARTICLE_FAIL";
+export const FETCH_ARTICLE_SUCCESS = "FETCH_ARTICLE_SUCCESS";

src/components/articles/createArticleComponent.js

@@ -0,0 +1,78 @@
+import React from "react";
+import "../../styles/createArticles.scss";
+import "../../styles/singleArticle.scss";
+const CreateArticleComponent = props => {
+  const { onChange, onSubmit, onUpload, image } = props;
+  return (
+    <div className="container-fluid mt-5">
+      <div className="row">
+        <div className="col col-lg-3" />
+        <div className="col col-lg-6">
+          <h1>Tell A story</h1>
+          <form>
+            <div className="form-group">
+              <input
+                onChange={onChange}
+                className="form-control"
+                placeholder="title"
+                name="title"
+                id="title"
+              />
+            </div>
+            <div className="form-group">
+              <input
+                onChange={onChange}
+                className="form-control"
+                placeholder="description"
+                name="description"
+                id="description"
+              />
+            </div>
+            <div className="form-group">
+              <textarea
+                onChange={onChange}
+                className="form-control"
+                placeholder="Body"
+                name="body"
+                id="body"
+              />
+            </div>
+            <div className="form-group">
+              <input
+                onChange={onChange}
+                className="form-control"
+                placeholder="tags"
+                name="tags"
+                id="tags"
+              />
+              <div>
+                <i>Separate your tags with a comma</i>
+              </div>
+            </div>
+            <div className="image-div">
+              <div className="actual-image">
+                <img src={image} className="image-fluid" />
+              </div>
+              <input
+                type="file"
+                name="imageUpload"
+                onChange={event => onUpload(event.target.files)}
+                id="fitz"
+              />
+            </div>
+
+            <input name="image" />
+            <div className="form-group">
+              <button onClick={onSubmit} className="btn btn-primary">
+                Publish Story
+              </button>
+            </div>
+          </form>
+        </div>
+        <div className="col col-lg-3" />
+      </div>
+    </div>
+  );
+};
+
+export default CreateArticleComponent;

src/components/articles/createArticlePage.js

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import "../../styles/app.scss";
+import { articleCreateEditAction } from "../../actions/articleCreateEditAction";
+import CreateArticleComponent from "./createArticleComponent";
+import firebase from "../../firebase/config";
+
+export class CreateArticlePage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title: "",
+      body: "",
+      description: "",
+      tags: "",
+      image: "",
+      isUploaded: false
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onUpload = this.onUpload.bind(this);
+  }
+
+  /* istanbul ignore next */
+  onUpload(files) {
+    const image = URL.createObjectURL(event.target.files[0]);
+    this.setState({ image });
+
+    const task = firebase
+      .storage()
+      .ref(`images/${files[0].name}`)
+      .put(files[0]);
+
+    task.then(res => {
+      firebase
+        .storage()
+        .ref(`images/${files[0].name}`)
+        .getDownloadURL()
+        .then(url => {
+          console.log(url);
+          this.setState({ isUploaded: true, image: url });
+        });
+    });
+
+    task.on("state_changed", snapshot => {
+      const isUploaded = true;
+      this.setState({ isUploaded: isUploaded });
+    });
+  }
+
+  onChange(e) {
+    this.setState({ [e.target.name]: e.target.value });
+  }
+  onSubmit(e) {
+    e.preventDefault();
+    const { title, body, description, tags, image } = this.state;
+    const messageObject = {
+      title: title,
+      body: body,
+      description: description,
+      tags: tags.split(","),
+      image: image
+    };
+
+    this.props.articleCreateEditAction(
+      messageObject,
+      "https://ah-backend-prime-staging.herokuapp.com/api/v1/articles/",
+      "post",
+      this.props
+    );
+  }
+
+  render() {
+    const { image } = this.state;
+    return (
+      <div>
+        <CreateArticleComponent
+          onChange={this.onChange}
+          onUpload={this.onUpload}
+          onSubmit={this.onSubmit}
+          image={image}
+        />
+      </div>
+    );
+  }
+}
+
+export default connect(
+  null,
+  { articleCreateEditAction }
+)(CreateArticlePage);