+
+
+
+
+
+
);
diff --git a/src/BG.js b/src/BG.js
new file mode 100644
index 00000000..5fe41e99
--- /dev/null
+++ b/src/BG.js
@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import "./assets/scss/styles.scss";
+
+class BG extends Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default BG;
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 652002e5..65806a73 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -512,7 +512,7 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {
.navbar-sidenav
> .nav-item
.sidenav-third-level {
- background: #343a40;
+ background: #792c97;
}
}
@@ -520,11 +520,11 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {
.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
@@ -532,7 +532,7 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {
.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
new file mode 100644
index 00000000..ac2263b9
--- /dev/null
+++ 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
new file mode 100644
index 00000000..dad36003
--- /dev/null
+++ 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
;
+ 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 => (
+
+
+ 
+
+
+
+ ));
+ console.log(this.props.messages);
+
+ return (
+
+
+
+
+
{channelName}
owner: {channel.owner}
+
+
+
+
+
+
+ );
+ }
+}
+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
new file mode 100644
index 00000000..b8daf6d4
--- /dev/null
+++ 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 (
+
+
+ {this.state.done &&
}
+
+ );
+ }
+}
+
+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
index bcc84234..4f7407af 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -4,6 +4,7 @@ const Footer = () => (