Restructured components and pages

client/App.tsx

@@ -19,7 +19,7 @@ function NavContainer() {
 
             <Switch>
                 <Route path={route.device(":deviceId")} component={p.DevicePage}/>
-                <Route path={route.messagesTest} component={p.MessagesTestPage}/>
+                <Route path={route.messagesTest} component={p.MessageTest}/>
                 <Redirect to="/"/>
             </Switch>
 

client/components/index.ts

@@ -1,5 +1,3 @@
-export { default as App } from "./App";
-export { default as DevicesView } from "./DevicesView";
 export { default as DeviceView } from "./DeviceView";
 export { default as DurationView } from "./DurationView";
 export { default as MessagesView } from "./MessagesView";
@@ -9,6 +7,5 @@ export { default as ScheduleView } from "./ScheduleView";
 export { default as SectionRunnerView } from "./SectionRunnerView";
 export { default as SectionTable } from "./SectionTable";
 export { default as NavBar } from "./NavBar";
-export { default as MessageTest } from "./MessageTest";
 export { default as ProgramSequenceView } from "./ProgramSequenceView";
 export { default as SectionChooser } from "./SectionChooser";

client/index.tsx

@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 import { AppContainer } from "react-hot-loader";
 import { Router } from "react-router-dom";
 
-import App from "@client/components/App";
+import App from "@client/App";
 import { AppState, ProvideState } from "@client/state";
 import logger from "@common/logger";
 
@@ -30,8 +30,8 @@ const doRender = (Component: React.ComponentType) => {
 doRender(App);
 
 if (module.hot) {
-    module.hot.accept("@client/components/App", () => {
-        const NextApp = require<any>("@client/components/App").default as typeof App;
+    module.hot.accept("@client/App", () => {
+        const NextApp = require<any>("@client/App").default as typeof App;
         doRender(NextApp);
     });
 }

client/pages/DevicePage.tsx

@@ -5,14 +5,15 @@ import { Item } from "semantic-ui-react";
 import DeviceView from "@client/components/DeviceView";
 import { RouteComponentProps, withRouter } from "react-router";
 
-class DevicesView extends React.Component<{deviceId: string} & RouteComponentProps<any>> {
+class DevicePage extends React.Component<RouteComponentProps<{ deviceId: string }>> {
     render() {
+        const { match: { params: { deviceId } } } = this.props;
         return (
             <Item.Group divided>
-                <DeviceView deviceId={this.props.deviceId} />
+                <DeviceView deviceId={deviceId} />
             </Item.Group>
         );
     }
 }
 
-export default withRouter(observer(DevicesView));
+export default withRouter(observer(DevicePage));

client/pages/LoginPage.tsx

@@ -78,5 +78,4 @@ class LoginPage extends React.Component<{ appState: AppState }> {
     }
 }
 
-const DecoratedLoginPage = injectState(observer(LoginPage));
-export { DecoratedLoginPage as LoginPage };
+export default injectState(observer(LoginPage));

client/pages/LogoutPage.tsx

@@ -3,7 +3,7 @@ import { Redirect } from "react-router";
 
 import { AppState, ConsumeState } from "@client/state";
 
-export function LogoutPage() {
+export default function LogoutPage() {
     function consumeState(appState: AppState) {
         appState.tokenStore.clear();
         return (

client/pages/index.tsx

@@ -1,20 +1,5 @@
-import * as React from "react";
-import { RouteComponentProps } from "react-router";
-
-import { DevicesView, MessageTest} from "@client/components";
-
-export { LoginPage } from "./LoginPage";
-export { LogoutPage } from "./LogoutPage";
+export { default as DevicePage } from "./DevicePage";
+export { default as LoginPage } from "./LoginPage";
+export { default as LogoutPage } from "./LogoutPage";
+export { default as MessageTest } from "./MessageTest";
 export { default as ProgramPage } from "./ProgramPage";
-
-export function DevicePage({ match }: RouteComponentProps<{ deviceId: string }>) {
-    return (
-        <DevicesView deviceId={match.params.deviceId}/>
-    );
-}
-
-export function MessagesTestPage() {
-    return (
-        <MessageTest/>
-    );
-}