render contacts of the logged user

package.json

@@ -36,10 +36,12 @@
     "webpack-hot-middleware": "^2.20.0"
   },
   "dependencies": {
+    "axios": "^0.17.0",
     "express": "^4.16.2",
     "knex": "^0.13.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-materialize": "^1.0.16",
     "sqlite3": "^3.1.13"
   },
   "quokka": {

server/data-access/users.js

@@ -7,8 +7,8 @@ function updateUser() {
   throw Error();
 }
 
-async function getUsersOfEmail(email) {
-  return await db.select().from("users").whereNot({ email: email });
+async function getUsersOfId(id) {
+  return await db.select().from("users").whereNot({ id: id });
 }
 
 async function getUsers() {
@@ -18,6 +18,6 @@ async function getUsers() {
 export default {
   createUser,
   updateUser,
-  getUsersOfEmail,
+  getUsersOfId,
   getUsers
 };

server/router/rest.js

@@ -15,6 +15,10 @@ router.get('/users', function(req, res) {
         .then(users => res.json(users));
   }
 });
+router.get('/users/:id/users', function(req, res) {
+    api.users.getUsersOfId(req.params.id)
+      .then(users => res.json(users));
+});
 
 /*
 router.post('/users', function(req, res) {

src/app/components/chat-room/chat-room.css

@@ -0,0 +1,3 @@
+.chat-messages {
+  height: 300px;
+}

src/app/components/chat-room/index.js

@@ -0,0 +1,38 @@
+import "./chat-room.css";
+import type { User } from "../data/user";
+import type { Conversation } from "../data/conversation";
+
+import React from "react";
+import axios from "axios";
+import { Row, Input, Button } from "react-materialize"
+
+
+type UserProps = {
+  from: User,
+  to: User,
+  conversation: Conversation
+};
+
+class ChatRoom extends React.Component<UserProps, any> {
+
+  render() {
+    const toName = this.props.to.email;
+
+    return (
+      <Row>
+        <Row>
+          <h2>Chat with {toName}</h2>
+          <div className="chat-messages">
+            <div></div>
+          </div>
+        </Row>
+        <Row>
+          <Input s={10} label="Message"></Input>
+          <Button s={2} waves='light'>Send</Button>
+        </Row>
+      </Row>)
+  }
+
+}
+
+export default ChatRoom;

src/app/components/user-item.js

@@ -0,0 +1,22 @@
+import React from "react";
+import axios from "axios";
+import type { User } from "../data/user";
+import { CollectionItem, Badge } from "react-materialize"
+
+type UserProps = {
+  user: User
+};
+
+class UserItem extends React.Component<UserProps, any> {
+
+  render() {
+    const name = this.props.user.email;
+    return (
+      <CollectionItem>
+  		{name} <Badge>1</Badge>
+    </CollectionItem>)
+  }
+
+}
+
+export default UserItem;

src/app/components/user-list.js

@@ -0,0 +1,77 @@
+//@flow
+import React from "react";
+import axios from "axios";
+import type { User } from "../data/user";
+import { Collection, Preloader } from "react-materialize"
+import UserItem from "./user-item";
+
+type UserProps = {
+  user: User
+};
+
+type State = {
+  message: string,
+  userList: User[],
+  status: "LOADING" | "ERROR" | "READY"
+};
+
+const STATUS = {
+  LOADING: "LOADING",
+  ERROR: "ERROR",
+  READY: "READY"
+}
+
+
+class UsersList extends React.Component<UserProps, State> {
+  constructor(props: UserProps) {
+    super();
+    this.props = props;
+    this.state = { status: STATUS.LOADING, message: "", userList: [] };
+  }
+
+  componentDidMount() {
+    this.fetchUsers();
+  }
+
+  async fetchUsers() {
+    const userId = this.props.user.id;
+    try {
+      const response = await axios.get(`/api/users/${userId}/users`);
+      this.setState({
+        userList: response.data,
+        status: STATUS.READY
+      });
+    } catch(ex) {
+      this.setState({
+        message: "Error loading users",
+        status: STATUS.ERROR
+      })
+    }
+  }
+
+  renderUsers() {
+    const items = this.state.userList.map((user, id) => <UserItem user={user} key={id}></UserItem>)
+
+    return (<Collection>
+      {items}
+    </Collection>)
+  }
+
+  renderLoading() {
+    return <Preloader size='small'/>
+  }
+
+  render() {
+    console.log()
+    switch (this.state.status) {
+      case STATUS.LOADING:
+        return this.renderLoading();
+      case STATUS.READY:
+        return this.renderUsers();
+      default:
+        throw Error('State not found');
+    }
+  }
+}
+
+export default UsersList;

src/app/data/user.js

@@ -2,6 +2,6 @@
 
 export type User = {
   id: number,
-  email: "string",
+  email: string,
   is_online: bool
 }

src/app/index.js

@@ -1,13 +1,55 @@
 //@flow
+import type { User } from "./data/user";
+import type { Conversation } from "./data/conversation";
+
 import React from "react";
+import { Row, Col } from "react-materialize";
+import UsersList from "./components/user-list";
+import ChatRoom from "./components/chat-room";
 
+const loggedUser: User = { id: 1, email: "[email protected]", is_online: true };
 
-class App extends React.Component<any, any> {
-  render() {
+type State = {
+  loggedUser: User,
+  activeConversation: ?Conversation
+};
+
+class App extends React.Component<any, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      loggedUser: loggedUser,
+      activeConversation: null
+    };
+  }
+
+  renderNoConversation() {
     return (<div>
-      Chat App!
+      No Active Conversation
     </div>)
   }
+
+  renderChat() {
+    if(this.state.activeConversation) {
+      return (<ChatRoom />)
+    } else {
+      return this.renderNoConversation();
+    }
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col s={3}>
+          <UsersList user={loggedUser} />
+        </Col>
+        <Col s={9}>
+          {this.renderChat()}
+        </Col>
+      </Row>
+    );
+  }
 }
 
 export default App;

src/index.html

@@ -6,13 +6,12 @@
         <title>A simple chat application</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
         <!--
-        <link rel="manifest" href="site.webmanifest">
         <link rel="apple-touch-icon" href="icon.png">
          Place favicon.ico in the root directory
-
-        <link rel="stylesheet" href="css/normalize.css">
-        <link rel="stylesheet" href="css/main.css">
         -->
     </head>
     <body>
@@ -21,5 +20,7 @@
         <![endif]-->
 
         <div id="root"></div>
+        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+	    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
     </body>
 </html>

yarn.lock

@@ -221,6 +221,13 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.0.tgz#7da747916db803f761651d6091d708789b953c6a"
+  dependencies:
+    follow-redirects "^1.2.3"
+    is-buffer "^1.1.5"
+
 babel-cli@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
@@ -803,6 +810,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 [email protected]:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -1009,6 +1020,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-class@^15.6.0:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-env@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.1.tgz#b6d8ab97f304c0f71dae7277b75fe424c08dfa74"
@@ -1163,7 +1182,7 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-[email protected], debug@^2.1.3, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8:
+[email protected], debug@^2.1.3, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -1666,7 +1685,7 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
-fbjs@^0.8.16:
+fbjs@^0.8.16, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -1745,6 +1764,12 @@ flow-bin@^0.58.0:
   version "0.58.0"
   resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.58.0.tgz#62d5a776589419e5656800a0e5230a5e585ca65e"
 
+follow-redirects@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.5.tgz#ffd3e14cbdd5eaa72f61b6368c1f68516c2a26cc"
+  dependencies:
+    debug "^2.6.9"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3618,7 +3643,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -3735,6 +3760,15 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-dom@^15.4.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 react-dom@^16.0.0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
@@ -3744,6 +3778,24 @@ react-dom@^16.0.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-materialize@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-materialize/-/react-materialize-1.0.16.tgz#9bcc91b342801926d5f73ba228ce066bc734111f"
+  dependencies:
+    classnames "^2.2.5"
+    react "^15.4.2"
+    react-dom "^15.4.2"
+
+react@^15.4.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 react@^16.0.0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"