footer and darktheme

src/client/components/app.tsx

@@ -14,6 +14,7 @@ import PageMyFollowers from "./pages/my/followers";
 import PageBetaHelp from "./pages/beta-help"
 import PageNotfound from "./pages/notfound"
 import PageMySettings from "./pages/my/settings"
+import Footer from "./footer";
 
 interface Props {
     userInfo: APIUser | undefined
@@ -23,9 +24,9 @@ export default class App extends React.Component<Props> {
     render() {
         return (
             <BrowserRouter>
-            <div>
+            <div className="all-container">
                 <Header userInfo={this.props.userInfo} />
-                <div className="container mt-2">
+                <main className="container mt-2">
                 <Switch>
                     <Route exact path="/" component={PageIndex}/>
                     <Route exact path="/latest" component={PageLatest}/>
@@ -40,7 +41,8 @@ export default class App extends React.Component<Props> {
                     <Route exact path="/@:user_id/questions/:question_id" component={PageUserQuestion}/>
                     <Route component={PageNotfound}/>
                 </Switch>
-                </div>
+                </main>
+                <Footer />
             </div>
             </BrowserRouter>
         )

src/client/components/footer.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { Link } from "react-router-dom";
+import { usingDarkTheme } from "../initial-state";
+
+export default class Footer extends React.Component {
+    render() {
+        return <footer className="container">
+            <p>Quesdon は AGPL-3.0 で提供されています。<a href="https://github.com/rinsuki/quesdon">ソースコード</a></p>
+            <p>公式アカウント: <a href="https://mstdn.jp/@quesdon">@quesdon@mstdn.jp</a> <Link to="/@quesdon@mstdn.jp">公式Quesdon (要望や不具合報告もこちらへどうぞ)</Link></p>
+            <p>開発者: <a href="https://mstdn.maud.io/@rinsuki">@rinsuki@mstdn.maud.io</a></p>
+            <p>
+                {usingDarkTheme
+                ?   <a href="#" onClick={this.leaveDarkTheme.bind(this)}>ダークテーマから戻す</a>
+                :   <a href="#" onClick={this.enterDarkTheme.bind(this)}>ダークテーマにする(β)</a>
+                }
+            </p>
+        </footer>
+    }
+
+    leaveDarkTheme() {
+        localStorage.removeItem("using-dark-theme")
+        location.reload()
+    }
+
+    enterDarkTheme() {
+        localStorage.setItem("using-dark-theme", "1")
+        location.reload()
+    }
+}

src/client/initial-state.ts

@@ -4,3 +4,5 @@ const w = <any>window
 
 export const me: APIUser | undefined = w.USER
 export const csrfToken: string = w.CSRFTOKEN
+
+export const usingDarkTheme: boolean = !!localStorage.getItem("using-dark-theme")

src/client/style.css

@@ -46,3 +46,13 @@
     left: 0;
     right: 0;
 }
+
+.all-container {
+    display:flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+main {
+    flex: 1 0 auto;
+}