MoSaCo-Group · SakoPak · May 2, 2022 · May 2, 2022 · May 2, 2022 · May 2, 2022
diff --git a/.env b/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "homepage": "http://MoSaCo-Group.github.io/chat-app-react-front",
+  "homepage": "http://MoSaCo-Group.github.io/",
   "name": "chat-app-react-front",
   "version": "0.1.0",
   "private": true,
@@ -21,12 +21,17 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.0-alpha.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-ticker": "^1.3.2",
+    "react-typist": "^2.0.5",
     "resolve": "^1.18.1",
-    "socket.io": "^4.5.0",
     "socket.io-client": "^4.5.0",
-    "web-vitals": "^1.1.2"
+    "styled-components": "^5.3.5",
+    "typewriter-effect": "^2.18.2",
+    "web-vitals": "^1.1.2",
+    "whatwg-fetch": "^3.6.2"
   },
   "scripts": {
     "start": "PORT=7165 react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -11,16 +11,20 @@
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+
     <script src="gh-pages-url-parser.js" type="text/javascript"></script>
 
-    <title>React App</title>
+    <title>ReAct</title>
 </head>
 
 <body>
     <noscript>
         You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+
 </body>
 
 </html>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,3 @@
+/* .bg {
+    image: url('./background.jpeg');
+}    */
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,8 @@
 /* eslint-disable no-tabs */
 import React, { Component, Fragment } from 'react'
-import { Route } from 'react-router-dom'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
+import './App.css'
 
 import AuthenticatedRoute from './components/AuthenticatedRoute/AuthenticatedRoute'
 import AutoDismissAlert from './components/AutoDismissAlert/AutoDismissAlert'
@@ -10,11 +11,16 @@ import SignUp from './components/auth/SignUp'
 import SignIn from './components/auth/SignIn'
 import SignOut from './components/auth/SignOut'
 import ChangePassword from './components/auth/ChangePassword'
+import CreateChat from './components/Chat/CreateChat'
 
 import CreateProfile from './components/Profile/CreateProfile'
 import ShowProfile from './components/Profile/ShowProfile'
 import UpdateProfile from './components/Profile/UpdateProfile'
-import IndexProfile from './components/Profile/IndexProfiles'
+
+// import IndexProfile from './components/Profile/IndexProfiles'
+
+import Container from './components/Landing/Container'
+import MoveStuffAround from './components/MoveStuffAround'
 
 class App extends Component {
   constructor (props) {
@@ -25,102 +31,125 @@ class App extends Component {
     }
   }
 
-  setUser = (user) => this.setState({ user })
+      setUser = (user) => this.setState({ user })
 
-  clearUser = () => this.setState({ user: null })
+      clearUser = () => this.setState({ user: null })
 
-  deleteAlert = (id) => {
-    this.setState((state) => {
-      return { msgAlerts: state.msgAlerts.filter((msg) => msg.id !== id) }
-    })
-  }
+      deleteAlert = (id) => {
+        this.setState((state) => {
+          return { msgAlerts: state.msgAlerts.filter((msg) => msg.id !== id) }
+        })
+      }
 
-  msgAlert = ({ heading, message, variant }) => {
-    const id = uuid()
-    this.setState((state) => {
-      return {
-        msgAlerts: [...state.msgAlerts, { heading, message, variant, id }]
+      msgAlert = ({ heading, message, variant }) => {
+        const id = uuid()
+        this.setState((state) => {
+          return {
+            msgAlerts: [...state.msgAlerts, { heading, message, variant, id }]
+          }
+        })
       }
-    })
-  }
+      // handleSignInClick() {
+      //   this.setState({isSignedIn: true})
+      // }
 
-  render () {
-    const { msgAlerts, user } = this.state
+      // handleSignOutClick() {
+      //   this.setState({isSignedIn: false})
+      // }
 
-    return (
-      <Fragment>
-        <Header user={user} />
-        {msgAlerts.map((msgAlert) => (
-          <AutoDismissAlert
-            key={msgAlert.id}
-            heading={msgAlert.heading}
-            variant={msgAlert.variant}
-            message={msgAlert.message}
-            id={msgAlert.id}
-            deleteAlert={this.deleteAlert}
-          />
-        ))}
-        <main className='container'>
-          <Route
-            path='/sign-up'
-            render={() => (
-              <SignUp msgAlert={this.msgAlert} setUser={this.setUser} />
-            )}
-          />
-          <Route
-            path='/sign-in'
-            render={() => (
-              <SignIn msgAlert={this.msgAlert} setUser={this.setUser} />
-            )}
-          />
-          <AuthenticatedRoute
-            user={user}
-            path='/sign-out'
-            render={() => (
-              <SignOut
-                msgAlert={this.msgAlert}
-                clearUser={this.clearUser}
-                user={user}
-              />
-            )}
-          />
-          <AuthenticatedRoute
-            user={user}
-            path='/change-password'
-            render={() => (
-              <ChangePassword msgAlert={this.msgAlert} user={user} />
-            )}
-          />
-          <AuthenticatedRoute
-            user={user}
-            path='/create-profile'
-            render={() => (
-              <CreateProfile msgAlert={this.msgAlert} user={user} />
-            )}
-          />
-          <AuthenticatedRoute
-            exact
-            user={user}
-            path='/profiles/:id'
-            render={() => <ShowProfile msgAlert={this.msgAlert} user={user} />}
-          />
-          <AuthenticatedRoute
-            user={user}
-            path='/profiles/:id/edit'
-            render={() => (
-              <UpdateProfile msgAlert={this.msgAlert} user={user} />
-            )}
-          />
-          <AuthenticatedRoute
-            user={user}
-            exact
-            path='/profiles'
-            render={() => <IndexProfile msgAlert={this.msgAlert} user={user} />}
-          />
-        </main>
-      </Fragment>
-    )
-  }
+      render () {
+        const { msgAlerts, user } = this.state
+        // const isSignedIn = this.state.isSignedIn
+
+        return (
+          <Fragment>
+            <Router>
+              <Header user={user} />
+              {msgAlerts.map((msgAlert) => (
+                <AutoDismissAlert
+                  key={msgAlert.id}
+                  heading={msgAlert.heading}
+                  variant={msgAlert.variant}
+                  message={msgAlert.message}
+                  id={msgAlert.id}
+                  deleteAlert={this.deleteAlert}
+                />
+              ))}
+              <main className='container'>
+                <Route
+                  exact path='/'
+                  render={() => (
+                    <Container/>
+                  )}
+                />
+                <Route
+                  path='/sign-up'
+                  render={() => (
+                    <SignUp msgAlert={this.msgAlert} setUser={this.setUser} />
+                  )}
+                />
+                <Route
+                  path='/sign-in'
+                  render={() => (
+                    <SignIn msgAlert={this.msgAlert} setUser={this.setUser} />
+                  )}
+                />
+                <Route path='/critics' render={() => <MoveStuffAround />} />
+                <AuthenticatedRoute
+                  user={user}
+                  path='/sign-out'
+                  render={() => (
+                    <SignOut
+                      msgAlert={this.msgAlert}
+                      clearUser={this.clearUser}
+                      user={user}
+                    />
+                  )}
+                />
+                <AuthenticatedRoute
+                  user={user}
+                  path='/change-password'
+                  render={() => (
+                    <ChangePassword msgAlert={this.msgAlert} user={user} />
+                  )}
+                />
+                <AuthenticatedRoute
+                  user={user}
+                  path='/create-profile'
+                  render={() => (
+                    <CreateProfile msgAlert={this.msgAlert} user={user} />
+                  )}
+                />
+                <AuthenticatedRoute
+                  exact
+                  user={user}
+                  path='/profile/:id'
+                  render={() => (
+                    <ShowProfile msgAlert={this.msgAlert} user={user} />
+                  )}
+                />
+                <AuthenticatedRoute
+                  user={user}
+                  path='/profile/:id/edit'
+                  render={() => (
+                    <UpdateProfile msgAlert={this.msgAlert} user={user} />
+                  )}
+                />
+                <AuthenticatedRoute
+                  user={user}
+                  exact
+                  path='/Chat'
+                  render={() => (
+                    <CreateChat msgAlert={this.msgAlert} user={user} />
+                  )}
+                />
+              </main>
+            </Router>
+            <>
+            </>
+          </Fragment>
+        )
+      }
 }
 
 export default App
diff --git a/src/Images/landingText.png b/src/Images/landingText.png
diff --git a/src/Images/mainLogo.png b/src/Images/mainLogo.png
diff --git a/src/Images/navLogo.png b/src/Images/navLogo.png
diff --git a/src/Images/rechatLogo.png b/src/Images/rechatLogo.png
diff --git a/src/Images/soloLogo.png b/src/Images/soloLogo.png
diff --git a/src/api/chat.js b/src/api/chat.js
@@ -2,13 +2,13 @@ import apiUrl from '../apiConfig'
 import axios from 'axios'
 
 export const createChat = (data, user) => {
+  console.log(data)
   return axios({
     method: 'POST',
-    url: apiUrl + '/chat/',
+    url: apiUrl + '/Chat/',
     data: {
       chat: {
-        name: data.name,
-        message: data.message
+        body: data.body
       }
     },
     headers: {
@@ -17,9 +17,15 @@ export const createChat = (data, user) => {
   })
 }
 
+// const data = {
+// chat: {
+// body: '',
+// },
+// }
+
 export const indexChat = (user) => {
   return axios({
-    url: apiUrl + '/chat/',
+    url: apiUrl + '/Chat',
     method: 'GET',
     headers: {
       Authorization: `Bearer ${user.token}`

diff --git a/src/api/profile.js b/src/api/profile.js
@@ -45,6 +45,16 @@ export const showProfile = (id, user) => {
   })
 }
 
+// export const indexProfiles = (user) => {
+//   return axios({
+//     url: apiUrl + '/profiles/',
+//     method: 'GET',
+//     headers: {
+//       Authorization: `Bearer ${user.token}`
+//     }
+//   })
+// }
+
 export const deleteProfile = (id, user) => {
   return axios({
     url: apiUrl + '/profile/' + id,
@@ -54,3 +64,12 @@ export const deleteProfile = (id, user) => {
     }
   })
 }
+export const indexProfiles = (id, user) => {
+  return axios({
+    url: apiUrl + '/profile/',
+    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${user.token}`
+    }
+  })
+}
diff --git a/src/apiConfig.js b/src/apiConfig.js
@@ -1,6 +1,6 @@
 let apiUrl
 const apiUrls = {
-  production: 'https://aqueous-atoll-85096.herokuapp.com',
+  production: 'https://sleepy-river-31745.herokuapp.com',
   development: 'http://localhost:4741'
 }
 

diff --git a/src/background.jpeg b/src/background.jpeg
diff --git a/src/components/AutoDismissAlert/AutoDismissAlert.scss b/src/components/AutoDismissAlert/AutoDismissAlert.scss
@@ -1,20 +1,25 @@
 .alert {
   align-items: center;
-  animation: .5s ease-in-out 0s 1 light-bounce-in;
-  bottom: 1rem;
+  animation: .3s ease-in-out 0s 1 light-bounce-in;
+  bottom: .5rem;
   display: flex;
   left: 0;
   margin: auto;
   max-width: 30rem;
   position: fixed;
   right: 0;
   z-index: 10000;
+  color: #253439;
+
 
   .alert-body {
+    width: 20%;
     margin-bottom: 0;
+    color: #253439;
   }
 }
 
+
 .close {
   &:active,
   &:focus {