Move components to room module, use absolute imports.

src/components/RoomListHeader.js

@@ -1,20 +0,0 @@
-import React, { PropTypes } from "react";
-
-const RoomListHeader = ({ refresh }) => {
-  return (
-    <div id="room-list-header">
-      <div>
-        <h2>Room List</h2>
-      </div>
-      <div>
-        <button onClick={refresh}>Refresh</button>
-      </div>
-    </div>
-  );
-};
-
-RoomListHeader.propTypes = {
-  refresh: PropTypes.func.isRequired,
-};
-
-export default RoomListHeader;

src/components/SolsticeApp.tsx

@@ -8,11 +8,11 @@ import {
   useRouteMatch,
 } from "react-router-dom";
 
-import { selectSocket, SocketState } from "../modules/websocket/slice";
 import Header from "./Header";
 import ConnectPage from "../containers/ConnectPage";
 import Footer from "../containers/Footer";
-import RoomsPane from "../containers/RoomsPane";
+import RoomsPane from "../modules/room/RoomsPane";
+import { selectSocket, SocketState } from "../modules/websocket/slice";
 
 const MainPane: FC = () => {
   const { path } = useRouteMatch();

src/components/Room.tsx → src/modules/room/Room.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
-import { encode } from "../modules/base64";
-import { RoomMembership, Room as RoomState } from "../modules/room/slice";
+import { encode } from "modules/base64";
+import { RoomMembership, Room as RoomState } from "modules/room/slice";
 
 interface Props {
   name: string;

src/components/RoomChat.tsx → src/modules/room/RoomChat.tsx

@@ -1,10 +1,10 @@
 import { FC, useEffect } from "react";
 import { useDispatch } from "react-redux";
 
-import { Room, RoomMembership, roomSetMembership } from "../modules/room/slice";
-import RoomChatForm from "../components/RoomChatForm";
-import RoomChatHeader from "../components/RoomChatHeader";
-import RoomChatMessageList from "../components/RoomChatMessageList";
+import { Room, RoomMembership, roomSetMembership } from "modules/room/slice";
+import RoomChatForm from "modules/room/RoomChatForm";
+import RoomChatHeader from "modules/room/RoomChatHeader";
+import RoomChatMessageList from "modules/room/RoomChatMessageList";
 
 interface Props {
   loginUserName: string;

src/components/RoomChatForm.tsx → src/modules/room/RoomChatForm.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch } from "react-redux";
 
-import { roomMessage } from "../modules/room/slice";
+import { roomMessage } from "modules/room/slice";
 
 interface Props {
   roomName: string;

src/components/RoomChatHeader.tsx → src/modules/room/RoomChatHeader.tsx

@@ -2,7 +2,7 @@ import { FC, ReactEventHandler } from "react";
 import { useDispatch } from "react-redux";
 import { useHistory } from "react-router";
 
-import { Room, RoomMembership, roomSetMembership } from "../modules/room/slice";
+import { Room, RoomMembership, roomSetMembership } from "modules/room/slice";
 
 interface InnerProps {
   title: string;

src/components/RoomChatMessageList.tsx → src/modules/room/RoomChatMessageList.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import { RoomMessage } from "../modules/room/slice";
+import { RoomMessage } from "modules/room/slice";
 
 interface Props {
   loginUserName: string;

src/components/RoomList.tsx → src/modules/room/RoomList.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react";
 import { useDispatch } from "react-redux";
 
-import RoomComponent from "./Room";
-import SearchableList from "./SearchableList";
-import { RoomSliceState, roomGetAll } from "../modules/room/slice";
+import SearchableList from "components/SearchableList";
+import RoomComponent from "modules/room/Room";
+import { RoomSliceState, roomGetAll } from "modules/room/slice";
 
 const SearchableRoomList = SearchableList(RoomComponent);
 

src/components/RoomUserList.js → src/modules/room/RoomUserList.js

@@ -1,6 +1,10 @@
-import React, { PropTypes } from "react";
+import { FC } from "react";
 
-const RoomUserList = ({ users }) => {
+interface Props {
+  users: string[];
+}
+
+const RoomUserList: FC<Props> = ({ users }) => {
   // Append all users
   const children = [];
   let i = 0;

src/containers/RoomsPane.tsx → src/modules/room/RoomsPane.tsx

@@ -3,11 +3,11 @@ import { useSelector } from "react-redux";
 import { useParams, useRouteMatch } from "react-router";
 import { Switch, Route } from "react-router-dom";
 
-import RoomChat from "../components/RoomChat";
-import RoomList from "../components/RoomList";
-import { decode } from "../modules/base64";
-import { selectLogin } from "../modules/login/slice";
-import { RoomMap, selectAllRooms } from "../modules/room/slice";
+import { decode } from "modules/base64";
+import { selectLogin } from "modules/login/slice";
+import { RoomMap, selectAllRooms } from "modules/room/slice";
+import RoomChat from "modules/room/RoomChat";
+import RoomList from "modules/room/RoomList";
 
 interface ChatProps {
   loginUserName: string;

src/modules/room/message.ts

@@ -1,6 +1,9 @@
-import { AppDispatch } from "../../app/store";
-import { roomMessage, roomGetAll, roomSetAll } from "./slice";
-import { SocketMessage, SocketMessageMiddleware } from "../websocket/message";
+import { AppDispatch } from "app/store";
+import { roomMessage, roomGetAll, roomSetAll } from "modules/room/slice";
+import {
+  SocketMessage,
+  SocketMessageMiddleware,
+} from "modules/websocket/message";
 
 function roomListRequest(): SocketMessage {
   return {

src/modules/room/slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-import { RootState } from "../../app/store";
+import { RootState } from "app/store";
 
 export enum RoomMembership {
   Joining,

tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": "src"
   },
   "include": ["src"]
 }