created room skeleton, reorganized component file structure

client/src/components/index.jsx → client/src/components/Homepage/homepage.jsx

@@ -24,4 +24,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// ReactDOM.render(<App />, document.getElementById('homepage'));

client/src/components/Room/Playlist.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Playlist = () => (
+  <div>
+    <p>Playlist</p>
+  </div>
+);
+
+Playlist.propTypes = {
+};
+
+export default Playlist;

client/src/components/Room/RoomView.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import VideoPlayer from './VideoPlayer.jsx';
+import Playlist from './Playlist.jsx';
+import Search from './Search.jsx';
+import VideoDescription from './VideoDescription.jsx';
+
+class RoomView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      video: 'insert current video',
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Room</h3>
+        <VideoPlayer video={this.state.video} />
+        <VideoDescription />
+        <Playlist />
+        <Search />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<RoomView />, document.getElementById('room'));

client/src/components/Room/Search.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchResults from './SearchResults.jsx';
+
+const Search = () => (
+  <div>
+    <p>Search</p>
+    <SearchResults />
+  </div>
+);
+
+Search.propTypes = {
+};
+
+export default Search;

client/src/components/Room/SearchResults.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SearchResultsEntry from './SearchResultsEntry.jsx';
+
+const SearchResults = () => (
+  <div>
+    <p>SearchResults</p>
+    <SearchResultsEntry />
+  </div>
+);
+
+export default SearchResults;

client/src/components/Room/SearchResultsEntry.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const SearchResultsEntry = () => (
+  <div>
+    <p>SearchResultsEntry</p>
+  </div>
+);
+
+export default SearchResultsEntry;

client/src/components/Room/VideoDescription.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const VideoDescription = () => (
+  <div>
+    <p>VideoDescription</p>
+  </div>
+);
+
+export default VideoDescription;

client/src/components/Room/VideoPlayer.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 
-let VideoPlayer = (props) => (
-	<div>
-		<p>VideoPlayer</p>
-	</div>
-)
+const VideoPlayer = ({ video }) => (
+  <div>
+    <p>{video}</p>
+  </div>
+);
 
-export default VideoPlayer = VideoPlayer;
+VideoPlayer.propTypes = {
+  video: PropTypes.string.isRequired,
+};
+
+export default VideoPlayer;

webpack.config.js

@@ -4,7 +4,7 @@ const DIST_DIR = path.resolve(__dirname, './client/dist');
 const SRC_DIR = path.resolve(__dirname, './client/src');
 
 module.exports = {
-  entry: `${SRC_DIR}/components/index.jsx`,
+  entry: `${SRC_DIR}/components/Room/RoomView.jsx`,
   output: {
     path: DIST_DIR,
     filename: 'bundle.js',