Added content to README and About, styled elements

Also added back buttons to pages

README.md

@@ -4,16 +4,26 @@
 **Hello! Thank you for taking the time to check out my app! This app was created because I love tattoos and looking at them online makes me really happy. After getting my most recent tattoo, I noticed that I had a slight reaction to the brand of ink I got and I thought that for my next one, I would like to have the artist probably use a different brand of ink, except since this was a couple months after the fact, I had no idea what type of ink the artist had used. I also realized that while some people only stick to one tattoo artist for all of their tattoos, many people with multiple tattoos have different artists (like myself) and I want a way to keep track of all of them so when people ask me about them I can just pull out my app and see the info all about it!**
 
 ### **Important Links**:
-
-* [My Live App hosted on Github Pages]()
-* [My front-end repository on Github]()
-* [My API repository on Github]()
-* [My API hosted on Heroku]()
+* [My Live App hosted on Github Pages](https://reginapizza.github.io/TatToo-App/)
+* [My front-end repository on Github](https://github.com/reginapizza/TatToo-React-Client)
+* [My API repository on Github](https://github.com/reginapizza/TatToo-Backend)
+* [My API hosted on Heroku](https://morning-earth-83765.herokuapp.com/)
 
 ### **Technologies Used (Backend):**
 * Ruby
 * Rails
 
+### **Technologies Used (Frontend):**
+* React
+* Javascript
+* CSS
+* React-Bootstrap
+* npm react-icons
+
+### **Technologies Used (Other):**
+* Postman
+* Sketch
+
 ### **User Stories:**
 
 1. As a user, I want to be able to sign up, sign-in, change password, and sign out.
@@ -36,28 +46,31 @@
 
 
 ### **Planning Story:**
+I wanted to create an app that was easy to use and intuitive, so I designed my app to be almost like an instagram-style with a home page for content that the user just has to scroll through to get a quick sense of the post, and if they like it they have the option to click on it for view more info. I also wanted it have a user profile, and a button to make a new post. In my original wireframe I did not have some of these things, and my nav bar was originally words because I didn't think about all the different options I would need. As my navbar quickly got more and more cramped, I decided to go with familiar icons for each page redirect to make it more user-friendly.
+
+For this app I started with my backend because I knew that I would have to create all the attributes for each tattoo and assign them data types, and I didn't want to start working with the front-end until I knew those things were more solidly laid out to avoid having to go back in and change things on my front-end. Once I had my backend working, I started building out the front-end and styling along the way so I would know what worked with my layout and what didn't work.
 
+### **Problems I Ran Into (Front-end):**
 
-### **Problems I Ran Into:**
+Most of my problems with both the front end and the back end came from authenticated errors. I wasn't including proper headers when I was coding my axios requests and that caused me a lot of headaches but after I figured it out the first time, the rest of it wasn't so bad.
+
+Another big issue I had was getting my update function to work. I ran into an error where even though I was setting a default value for my `day` (which holds the date and has a data type of `Date`) in my state, it was getting set to `null` when I was udpating it without a value. Rather than mess with my backend, I fixed it by adding `|| ''` to my input value, that way if there wasn't a given value for day (meaning it would be set to null, or 'falsey') it would go to '' instead that would be 'truthy' and it wouldn't give me an error.
+
+Some other issues included resizing my images to be responsive to the page size. I had to implement many different methods of StackOverflow solutions including changing the images to background images before I found a solution that worked for me. It's still not perfect, but ideally in the future I would like users to be able to upload the actual image and not have to link to it, so I decided to not try to make this perfect if I'm just going to get rid of it in future updates.
 
 
 ### **Future Updates:**
 
-1. I would really like user's to be able to 'heart'/'like' tattoo posts and have that save them to a collection that is only viewable to that user.
+1.  I would really like user's to be able to 'heart'/'like' tattoo posts and have that save them to a collection that is only viewable to that user.
+2.  I would like users to be able to directly upload an image as opposed to just sending in a link to their image hosted somewhere on the web.
+3.  I would like this app to be mobile-friendly
+4.  I would like to be able to mark images as NSFW and have that create a blur effect on the image until you tap on it. Additionally, I would like to have users that are under the age of 18 not be able to see any images that are marked as NSFW.
 
 
 ### **Original Wireframe Sketch:**
 
-![Original Wireframe drawing for Paranormal Encounters SPA](https://i.imgur.com/TE5KPpD.jpg)
-![Original Wireframe drawing for Create-An-Encounter Modal](https://i.imgur.com/ryNPuml.jpg)
-
-<!-- <div className="landing-page">
-  <div className="title">
-    <img src="TatToo.gif"/>
-  </div>
-  <div className="slogan">
-    <img src="slogan.gif"/>
-  </div>
-  <div href="#sign-up">Sign Up</div>
-  <div href="#sign-in">Sign In</div>
-</div> -->
+![Original Wireframe drawing for landing page](https://i.imgur.com/tGA2bye.png)
+![Original Wireframe drawing for authenticated content-viewing](https://i.imgur.com/biuMUpd.png)
+
+![Final Landing Page Screenshot](https://i.imgur.com/AUuKHrk.png)
+![Final Home Page](https://i.imgur.com/oguWMFb.png)

src/components/About.js

@@ -1,25 +1,47 @@
 import React, { Fragment } from 'react'
+import Button from 'react-bootstrap/Button'
 
 const About = (props) => (
   <Fragment>
-    <h1 className="page-headers">About <span className="nickainley"> Tat, Too</span></h1>
+    <h1 className="page-headers">About Tat, Too</h1>
+    <div>
+      <Button href="#tattoos" className="submit-button">Back</Button>
+    </div>
+    <div className="description">
+      <h3>How to use this app:</h3>
+      <br />
+      <h5>Adding a Tattoo</h5>
+      <ol>
+        <li>Navigate to the + icon in the navigation bar</li>
+        <li>Add a title for your tattoo, this should be very short.</li>
+        <li>Add a link to an image that is upload on the internet. Hint: the best way to add an image is by right clicking your image and selecting &quot;Copy Link Address&quot; and then pasting in the form. The more square the picture is, the better.  </li>
+        <li>Add a description to your image, such as what it is, why you got it or the meaning behind it.</li>
+        <li>Add the date you got your tattoo. If it was done on multiple appointments, just add one date such as the most recent one. Format should be in YYYY-MM-DD.</li>
+        <li>Add the full name of your artist. If you do not add an artist&apos;s name but do list their instagram handle, their name will show up as their instagram link with a hyperlink to their profile.</li>
+        <li>Add your artist&apos;s instagram handle. If their instagram account hyperlink was &quot;https://www.instagram.com/thekatvond/&quot;, you would enter &quot;thekatvond&quot; in order to properly hyperlink it.</li>
+        <li>Add the location you got your tattoo, such as the name of the shop and/or the physical address.</li>
+        <li>Add the ink brand used (if you know it). This can be helpful later if you notice problems with the ink and want to avoid that brand for future tattoos.</li>
+      </ol>
 
-    <h3>How to use this app:</h3>
-    <h5>Adding a Tattoo</h5>
-    <p></p>
-
-    <h5>Editing a Tattoo</h5>
-    <p></p>
-
-    <h5>Deleting a Tattoo</h5>
-    <p></p>
-
-    <h5>Changing Password</h5>
-    <p></p>
-
-    <h3>Help! I...</h3>
-    <h5>Don&apos;t see my image!</h5>
-    <p>Answer...</p>
+      <h5>Editing a Tattoo</h5>
+      <br />
+      <p>To edit a tattoo, navigate to either your tattoos or the home page, click on the tattoo you would like to edit. If you are the owner of that tattoo, you should see an update button on the page. Click it, and then fill out the information you would like to change. Things you don&apos;t change will stay the same as they were before.</p>
+      <br />
+      <h5>Deleting a Tattoo</h5>
+      <br />
+      <p>To edit a tattoo, navigate to either your tattoos or the home page, click on the tattoo you would like to edit. If you are the owner of that tattoo, you should see a delete button on the page. Clicking delete will delete the tattoo permanently and you will not be able to get it back, so be sure!</p>
+      <br />
+      <h5>Changing Password</h5>
+      <br />
+      <p>To change your password, navigate to your profile which is indicated by the person icon in the navigation bar. There will be two buttons right under My Tattoos, one of which should be &quot;Change Password&quot;. Click on that, enter your old password and your new password, and then click submit. If you don&apos;t get an error and are redirected back to your own tattoos page, you have successfully changed your password. </p>
+      <br />
+      <h3>Help! I...</h3>
+      <br />
+      <h5>Don&apos;t see my image!</h5>
+      <ul>
+        <li>Make sure you are linking to the <strong>image address</strong> and not the link to the page it&aposs on. The url should have the file type at the end of it, such as .jpeg, .png, etc... Please see step #3 under &quot;Adding a Tattoo&quot; if you run into issues.  </li>
+      </ul>
+    </div>
   </Fragment>
 )
 

src/components/ChangePassword/ChangePassword.js

@@ -27,12 +27,7 @@ class ChangePassword extends Component {
     const { alert, history, user } = this.props
 
     changePassword(this.state, user)
-      .then(() => alert({
-        heading: 'Change Password Success',
-        message: messages.changePasswordSuccess,
-        variant: 'success'
-      }))
-      .then(() => history.push('/'))
+      .then(() => history.push('/my-tattoos'))
       .catch(error => {
         console.error(error)
         this.setState({ oldPassword: '', newPassword: '' })
@@ -83,6 +78,7 @@ class ChangePassword extends Component {
             >
               Submit
             </Button>
+            <Button href="#my-tattoos" className="submit-button">Back</Button>
           </Form>
         </div>
       </div>

src/components/SignIn/SignIn.js

@@ -28,11 +28,6 @@ class SignIn extends Component {
 
     signIn(this.state)
       .then(res => setUser(res.data.user))
-      .then(() => alert({
-        heading: 'Sign In Success',
-        message: messages.signInSuccess,
-        variant: 'success'
-      }))
       .then(() => history.push({
         pathname: '/tattoos',
         state: {}
@@ -87,6 +82,7 @@ class SignIn extends Component {
             >
               Submit
             </Button>
+            <Button href="#/" className="submit-button">Back</Button>
           </Form>
         </div>
       </div>

src/components/SignOut/SignOut.js

@@ -2,18 +2,12 @@ import { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 
 import { signOut } from '../../api/auth'
-import messages from '../AutoDismissAlert/messages'
 
 class SignOut extends Component {
   componentDidMount () {
-    const { alert, history, clearUser, user } = this.props
+    const { history, clearUser, user } = this.props
 
     signOut(user)
-      .finally(() => alert({
-        heading: 'Signed Out Successfully',
-        messagE: messages.signOutSuccess,
-        variant: 'success'
-      }))
       .finally(() => history.push('/'))
       .finally(() => clearUser())
   }

src/components/SignUp/SignUp.js

@@ -30,11 +30,6 @@ class SignUp extends Component {
     signUp(this.state)
       .then(() => signIn(this.state))
       .then(res => setUser(res.data.user))
-      .then(() => alert({
-        heading: 'Sign Up Success',
-        message: messages.signUpSuccess,
-        variant: 'success'
-      }))
       .then(() => history.push({
         pathname: '/tattoos',
         state: {}
@@ -101,6 +96,7 @@ class SignUp extends Component {
             >
               Submit
             </Button>
+            <Button href="#/" className="submit-button">Back</Button>
           </Form>
         </div>
       </div>

src/components/Tattoos/MyTattoos.js

@@ -18,7 +18,6 @@ const Tattoos = props => {
       .then(response => {
         setTattoos(response.data.tattoos)
       })
-      .then(() => props.alert({ heading: 'Success', message: 'Here are your tats!', variant: 'success' }))
       .catch(() => props.alert({ heading: 'Oops!', message: 'Sorry, something went wrong...', variant: 'danger' }))
   }, [])
 
@@ -29,32 +28,37 @@ const Tattoos = props => {
       href={`#tattoos/${tattoo.id}`}
       className="container-fluid tattoo-teaser"
     >
-      <div className="row">
+      <div className="row center">
         {tattoo.title}
       </div>
       <div className="row">
         {tattoo.picture
-          ? <img src={tattoo.picture} alt={'Tattoo of ' + tattoo.title} height="350" width="350"></img>
-          : <img src="no-image-available.png" height="350" width="350"></img>
+          ? <img src={tattoo.picture} alt={'Tattoo of ' + tattoo.title} className="tattoo-image"></img>
+          : <img src="no-image-available.png" className="tattoo-image"></img>
         }
       </div>
     </ListGroup.Item>
   ))
 
   return (
-    <div className='row'>
-      <div className='col'>
-        <div>
-          <div className="page-headers">
-            <p> My Tattoos</p>
-            <span className="profile-buttons">{props.user && <Button href="/create-tattoo">Add your own tattoo!</Button>}
-              <Button href="#change-password">Change Password</Button>
-            </span>
-          </div>
+    <div className="container-fluid">
+      <div className="row">
+        <div className="page-headers col-12">
+          <p> My Tattoos</p>
+        </div>
+      </div>
+      <div className="row">
+        <div className="profile-buttons col-12 center">
+          {props.user && <Button href="#create-tattoo" className="submit-button">Add your own tattoo!</Button>}
+          <Button href="#change-password" className="submit-button">Change Password</Button>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-6 col-sm-12">
+          <ListGroup>
+            {tattoosJsx}
+          </ListGroup>
         </div>
-        <ListGroup>
-          {tattoosJsx}
-        </ListGroup>
       </div>
     </div>
   )

src/components/Tattoos/Tattoo.js

@@ -19,7 +19,6 @@ const Tattoo = props => {
       }
     })
       .then(response => setTattoo(response.data.tattoo))
-      .then(() => props.alert({ heading: 'Success!', message: 'You got the tat!', variant: 'success' })) // probaby get rid of this once it's working
       .catch(console.error)
   }, [])
 
@@ -62,7 +61,7 @@ const Tattoo = props => {
     <div className="tattoo-full">
       <div className="row">
         <div className="col-6">
-          <h2>{tattoo.title}</h2>
+          <h2 className="center">{tattoo.title}</h2>
           {tattoo.description
             ? <p>{tattoo.description}</p>
             : <p>No description given for this tattoo.</p>
@@ -83,8 +82,8 @@ const Tattoo = props => {
         </div>
         <div className="col-6">
           {tattoo.picture
-            ? <img src={tattoo.picture} alt={'Tattoo of ' + tattoo.title} height="400" width="300"></img>
-            : <img src="no-image-available.png"></img>
+            ? <img src={tattoo.picture} alt={'Tattoo of ' + tattoo.title} className="tattoo-image"></img>
+            : <img src="no-image-available.png" className="tattoo-image"></img>
           }
         </div>
       </div>

src/components/Tattoos/TattooCreate.js

@@ -25,8 +25,6 @@ const TattooCreate = props => {
       data: { tattoo }
     })
       .then(response => {
-        console.log(response)
-        props.alert({ heading: 'Success', message: 'You added your tattoo!', variant: 'success' })
         props.history.push(`/tattoos/${response.data.tattoo.id}`)
       })
       .catch(console.error)

src/components/Tattoos/TattooEdit.js

@@ -21,8 +21,6 @@ const TattooEdit = (props) => {
       .catch(console.error)
   }, [])
 
-  console.log(props)
-
   const handleChange = event => {
     event.persist()
     setTattoo(tattoo => ({ ...tattoo, [event.target.name]: event.target.value }))
@@ -40,7 +38,6 @@ const TattooEdit = (props) => {
       data: { tattoo }
     })
       .then(response => {
-        props.alert({ heading: 'Success', message: 'You updated your tattoo!', variant: 'success' })
         setUpdated(true)
       })
       .catch(() => props.alert({ heading: 'Oops!', message: 'Sorry, something went wrong...', variant: 'danger' }))