JoinCODED · ahmedalsalman · Mar 29, 2020 · Mar 29, 2020 · Mar 30, 2020 · Mar 30, 2020
diff --git a/package.json b/package.json
@@ -8,16 +8,22 @@
     "@fortawesome/react-fontawesome": "^0.1.3",
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
+    "css-loader": "^3.4.2",
     "jquery": "^3.4.1",
     "jwt-decode": "^2.2.0",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
+    "node-sass": "^4.13.1",
     "popper.js": "^1.15.0",
     "react": "^16.10.1",
     "react-dom": "^16.10.1",
     "react-redux": "^7.1.1",
+    "react-responsive-modal": "^4.0.1",
     "react-router-dom": "^5.1.1",
     "react-scripts": "^3.1.2",
     "redux": "^4.0.4",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "style-loader": "^1.1.3"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 
     <title>Chatr2.0</title>
   </head>

diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,19 @@
 import React, { Component } from "react";
 import { Switch, Route, Redirect } from "react-router-dom";
-
+import "./assets/scss/styles.scss";
+import "./styles.css";
 // Scripts
 import main from "./assets/js/main";
 
 // Components
 import NavBar from "./components/Navigation/NavBar";
 import Footer from "./components/Footer";
 import Welcome from "./components/Welcome";
+import CreateChannel from "./components/CreateChannel";
+import ChannelDetail from "./components/ChannelDetail";
 import RegistrationForm from "./components/RegistrationForm";
 import SuperSecretPage from "./components/SuperSecretPage";
+import BG from "./BG";
 
 class App extends Component {
   componentDidMount() {
@@ -18,14 +22,19 @@ class App extends Component {
 
   render() {
     return (
-      <div className="content-wrapper">
+      <div className=" background content-wrapper text-white">
         <NavBar />
+
         <Switch>
+          <Route path="/channels/:channelID" component={ChannelDetail} />
           <Route path="/welcome" component={Welcome} />
+          <Route path="/createChannel" component={CreateChannel} />
           <Route path="/(login|signup)" component={RegistrationForm} />
           <Route path="/private" component={SuperSecretPage} />
           <Redirect to="/welcome" />
         </Switch>
+        <Route path="/" component={BG} />
+
         <Footer />
       </div>
     );

diff --git a/src/BG.js b/src/BG.js
@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import "./assets/scss/styles.scss";
+
+class BG extends Component {
+  render() {
+    return (
+      <div className="background">
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+        <strong></strong>
+      </div>
+    );
+  }
+}
+
+export default BG;
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -512,27 +512,27 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {
     .navbar-sidenav
     > .nav-item
     .sidenav-third-level {
-    background: #343a40;
+    background: #792c97;
   }
 }
 
 #mainNav.navbar-light
   .navbar-collapse
   .navbar-sidenav
   .nav-link-collapse:after {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(255, 0, 255, 0.5);
 }
 
 #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(170, 21, 133, 0.5);
 }
 
 #mainNav.navbar-light
   .navbar-collapse
   .navbar-sidenav
   > .nav-item
   > .nav-link:hover {
-  color: rgba(0, 0, 0, 0.7);
+  color: rgba(115, 23, 201, 0.7);
 }
 
 #mainNav.navbar-light

diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss
@@ -0,0 +1,45 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+.background {
+  width: 100vw;
+  height: 100vh;
+  background: #54347e;
+}
+
+$particleSize: 10vmin;
+$animationDuration: 6s;
+$amount: 20;
+.background strong {
+  width: $particleSize;
+  height: $particleSize;
+  border-radius: $particleSize;
+  backface-visibility: hidden;
+  position: absolute;
+  animation-name: move;
+  animation-duration: $animationDuration;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  $colors: (#583c87, #e45a84, #ffacac);
+  @for $i from 1 through $amount {
+    &:nth-child(#{$i}) {
+      color: nth($colors, random(length($colors)));
+      top: random(100) * 1%;
+      right: random(100) * 1%;
+      animation-duration: (random($animationDuration * 10) / 10) * 1s + 10s;
+      animation-delay: random(($animationDuration + 10s) * 10) / 10 * -1s;
+      transform-origin: (random(50) - 25) * 1vw (random(50) - 25) * 1vh;
+      $blurRadius: (random() + 0.5) * $particleSize * 0.5;
+      $x: if(random() > 0.5, -1, 1);
+      box-shadow: ($particleSize * 2 * $x) 0 $blurRadius currentColor;
+    }
+  }
+}
+
+@keyframes move {
+  100% {
+    transform: translate3d(0, 0, 1px) rotate(360deg);
+  }
+}
diff --git a/src/components/ChannelDetail.js b/src/components/ChannelDetail.js
@@ -0,0 +1,109 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+// Components
+import Loading from "./Loading";
+import MessageForm from "./MessageForm";
+
+import { fetchMessages } from "../redux/actions";
+
+class ChannelDetail extends Component {
+  interval = null;
+  componentDidMount(interval) {
+    interval = setInterval(
+      () => (
+        this.props.fetchMessages(this.props.match.params.channelID),
+        console.log("didmount")
+      ),
+      1500
+    );
+  }
+
+  componentDidUpdate = (previousProps, interval) => {
+    if (
+      this.props.match.params.channelID !== previousProps.match.params.channelID
+    ) {
+      clearInterval(interval);
+
+      interval = setInterval(
+        () => (
+          this.props.fetchMessages(this.props.match.params.channelID),
+          console.log("didupdate")
+        ),
+        1500
+      );
+    }
+  };
+
+  componentWillUnmount = interval => {
+    console.log("willunmount");
+
+    clearInterval(interval);
+  };
+
+  render() {
+    if (this.props.loading) return <Loading />;
+    const { channelID } = this.props.match.params;
+    console.log(channelID);
+    const channel = this.props.channels.find(
+      channel => channel.id === +channelID
+    );
+
+    const channelName = `${channel.name}`;
+    const MessageList = this.props.messages.map(message => (
+      <article className="comment">
+        <a className="comment-img" href="#non">
+          <img
+            src="https://secure.gravatar.com/avatar/698ce814c8771e54b4821a23e086536a?s=100&r=g&d=mm"
+            alt=""
+            width="50"
+            height="50"
+          />
+        </a>
+        <div className="comment-body">
+          <div className="text" style={{ backgroundColor: "#2c134d" }}>
+            <p>{message.message}</p>
+          </div>
+          <p className="attribution">
+            by <a href="#non">{message.username}</a> at {message.timestamp}
+          </p>
+        </div>
+      </article>
+    ));
+    console.log(this.props.messages);
+
+    return (
+      <div className="container text-center my-auto z-1">
+        <center>
+          <div className="channel">
+            <div>
+              <h3>{channelName}</h3> <h6>owner: {channel.owner}</h6>
+              <img
+                src={channel.image_url}
+                className="img-thumbnail img-fluid"
+                alt={channelName}
+              />
+            </div>
+            <MessageForm channelID={channel.id} />
+            <section className="comments">{MessageList}</section>
+          </div>{" "}
+        </center>
+      </div>
+    );
+  }
+}
+const mapStateToProps = ({ channels, messages }) => {
+  return {
+    channels,
+    messages,
+    loading: !channels.length || !messages.length
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchMessages: channelID => dispatch(fetchMessages(channelID))
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChannelDetail);
diff --git a/src/components/CreateChannel.js b/src/components/CreateChannel.js
@@ -0,0 +1,69 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+// Actions
+import { postChannel } from "../redux/actions";
+import { Redirect } from "react-router-dom";
+
+class CreateChannelForm extends Component {
+  state = {
+    name: "",
+    image_url: "",
+    done: false
+  };
+
+  submitChannel = event => {
+    event.preventDefault();
+    this.props.postChannel(this.state);
+    this.setState({ done: true });
+  };
+
+  componentDidMount() {
+    this.setState({ done: false });
+  }
+
+  onTextchange = event =>
+    this.setState({ [event.target.name]: event.target.value });
+
+  render() {
+    return (
+      <div className="mt-5 p-2">
+        <form onSubmit={this.submitChannel}>
+          <div className="input-group mb-3">
+            <div className="input-group-prepend">
+              <span className="input-group-text">Channel Name</span>
+            </div>
+            <input
+              type="text"
+              className="form-control"
+              name="name"
+              onChange={this.onTextchange}
+            />
+          </div>
+
+          <div className="input-group mb-3">
+            <div className="input-group-prepend">
+              <span className="input-group-text">Image URL</span>
+            </div>
+            <input
+              type="text"
+              className="form-control"
+              name="image_url"
+              onChange={this.onTextchange}
+            />
+          </div>
+          <input type="submit" />
+        </form>
+        {this.state.done && <Redirect to="/private" />}
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    postChannel: newChannel => dispatch(postChannel(newChannel))
+  };
+};
+
+export default connect(null, mapDispatchToProps)(CreateChannelForm);
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -4,6 +4,7 @@ const Footer = () => (
   <footer className="sticky-footer">
     <div className="container">
       <div className="text-center">
+
         <small>Copyright © CODED Chatr 2019</small>
       </div>
     </div>