Alerts are still not functional for some reason. Removed link from Na…

…vbar.Brand for now.

package.json

@@ -15,6 +15,7 @@
     "promise": "8.0.1",
     "raf": "3.4.0",
     "react": "^16.4.2",
+    "react-alert": "^6.0.0",
     "react-bootstrap": "^1.0.0-beta.5",
     "react-dom": "^16.4.2",
     "react-router-dom": "^4.3.1",

src/components/App/App.js

@@ -62,7 +62,7 @@ class App extends Component {
           <AuthenticatedRoute user={user} path='/change-password' render={() => (
             <ChangePassword alert={this.alert} user={user} />
           )} />
-          <AuthenticatedRoute user={user} exact path='/clubs' render={() => (
+          <AuthenticatedRoute user={user} exact path='/clubs' render={(props) => (
             <Clubs alert={this.alert} user={user} />
           )} />
           <AuthenticatedRoute user={user} exact path='/clubs/:id' render={(props) => (

src/components/AutoDismissAlert/messages.js

@@ -9,5 +9,6 @@ export default {
   // Club crud failure messages
   clubCreateFailure: 'Failed to create club! Make sure the club style is filled in, and that the club is unique and try again',
   clubCreateSuccess: 'Club was successfully created!',
-  clubDeleteFailure: 'Failed to delete club! Make sure the club style is filled in, and that the club is unique and try again'
+  clubDeleteFailure: 'Failed to delete club!',
+  clubDeleteSuccess: 'Club successfully deleted!'
 }

src/components/Clubs/Club.js

@@ -19,6 +19,12 @@ const Club = props => {
   // Removes a single resource via the axios call in api/clubs.js
   const destroy = () => {
     deleteClub(club._id, props.user)
+      // Alerts user to successful club deletion
+      .then(() => alert({
+        heading: 'Club deleted successfully!',
+        message: messages.clubDeleteSuccess,
+        variant: 'success'
+      }))
       .then(() => setDeleted(true))
       .catch(error => {
         console.error(error)

src/components/Clubs/Clubs.js

@@ -13,6 +13,15 @@ const Clubs = props => {
   useEffect(() => {
     index(props.user)
       .then(res => setClubs(res.data.clubs))
+      // Attempt at function to sort clubs alphabetically by style upon indexing
+      .then(clubs.sort(function (a, b) {
+        if (a.clubs.style < b.clubs.club.style) {
+          return -1
+        }
+        if (a.clubs.style > b.clubs.club.style) {
+          return 1
+        }
+      }))
       .catch(console.error)
   }, [])
 

src/components/Header/Header.js

@@ -25,7 +25,7 @@ const unauthenticatedOptions = (
 
 const Header = ({ user }) => (
   <Navbar bg="primary" variant="dark" expand="md">
-    <Navbar.Brand href="#">
+    <Navbar.Brand>
       Smash Factor: The Ultimate Golf Club Performance Tracker!
     </Navbar.Brand>
     <Navbar.Toggle aria-controls="basic-navbar-nav" />

src/components/Shared/TextAlerts.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import '../../index.scss'
+
+const TextAlert = message => {
+  return (
+    <div>
+      {message}
+    </div>
+  )
+}
+
+export default TextAlert

src/index.scss

@@ -91,8 +91,9 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  margin-top: 20%;
 
   * {
-    margin: auto;
+    margin: 1% auto;
   }
 }