Refactoring the settings view

ui/src/App.tsx

@@ -8,7 +8,7 @@ import {
 import Home from "./views/home"
 import Repo from "./views/Repo"
 import Deployment from "./views/Deployment"
-import Settings from "./views/Settings"
+import Settings from "./views/settings"
 import Members from "./views/members"
 
 function App(): JSX.Element {

ui/src/views/settings/SlackDescriptions.tsx

@@ -0,0 +1,20 @@
+import { shallowEqual } from "react-redux"
+import { Button, Descriptions } from "antd"
+
+import { useAppSelector } from "../../redux/hooks"
+
+export default function SlackDescriptions(): JSX.Element {
+    const { user } = useAppSelector(state => state.settings, shallowEqual)
+
+    const connected = (user?.chatUser)? true : false
+
+    return (
+        <Descriptions title="Slack">
+            <Descriptions.Item>
+                {(connected)? 
+                    <Button href="/slack/signout" type="primary" danger>DISCONNECTED</Button>:
+                    <Button href="/slack/" type="primary">CONNECT</Button>}
+            </Descriptions.Item>
+        </Descriptions>
+    )
+}

ui/src/views/settings/UserDescriptions.tsx

@@ -0,0 +1,35 @@
+import { shallowEqual } from "react-redux"
+import { Tag, Descriptions, Input } from "antd"
+
+import { useAppSelector } from "../../redux/hooks"
+
+export default function UserDescriptions(): JSX.Element {
+    const { user } = useAppSelector(state => state.settings, shallowEqual)
+
+    return (
+        <Descriptions 
+            title="User Info" 
+            column={2} 
+            layout="vertical"
+            style={{marginTop: "40px"}} 
+        >
+            <Descriptions.Item label="Login">
+                {user?.login}
+            </Descriptions.Item>
+            <Descriptions.Item label="Role">
+                {(user?.admin)? 
+                    <Tag color="purple">Admin</Tag> 
+                    : 
+                    <Tag color="purple">Member</Tag>}
+            </Descriptions.Item>
+            <Descriptions.Item label="Token">
+                <Input.Password 
+                    value={user?.hash}
+                    style={{width: 200, padding:0 }}
+                    readOnly
+                    bordered={false}
+                />
+            </Descriptions.Item>
+        </Descriptions>
+    )
+}

ui/src/views/settings/index.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from "react"
+import { shallowEqual } from "react-redux"
+import { Helmet } from "react-helmet"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { fetchMe, checkSlack } from "../../redux/settings"
+
+import Main from "../main"
+import UserDescription from "./UserDescriptions"
+import SlackDescriptions from "./SlackDescriptions"
+
+export default function Settings(): JSX.Element {
+    const { isSlackEnabled } = useAppSelector(state => state.settings, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        dispatch(fetchMe())
+        dispatch(checkSlack())
+    }, [dispatch])
+
+    return (
+        <Main>
+            <Helmet>
+                <title>Settings</title>
+            </Helmet>
+            <h1>Settings</h1>
+            <div>
+                <UserDescription />
+            </div>
+            {(isSlackEnabled)?
+                <div style={{marginTop: "40px", marginBottom: "20px"}}>
+                    <SlackDescriptions />
+                </div>
+                :
+                <></>}
+        </Main>
+    )
+}