restructured components folders and layout (#1886)

web/components/layouts/main.tsx

@@ -1,61 +1,19 @@
-import { useRecoilValue } from 'recoil';
-import { Layout, Row, Col } from 'antd';
-import { useState } from 'react';
-import { ServerStatus } from '../../interfaces/server-status.model';
-import { ServerStatusStore, serverStatusState } from '../stores/ServerStatusStore';
-import { ClientConfigStore, clientConfigState } from '../stores/ClientConfigStore';
-import { ClientConfig } from '../../interfaces/client-config.model';
-
-const { Header, Content, Footer, Sider } = Layout;
+import { Layout } from 'antd';
+import { ServerStatusStore } from '../stores/ServerStatusStore';
+import { ClientConfigStore } from '../stores/ClientConfigStore';
+import { Content, Footer, Header, Sidebar } from '../ui';
 
 function Main() {
-  const serverStatus = useRecoilValue<ServerStatus>(serverStatusState);
-  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
-
-  const { name, version, extraPageContent } = clientConfig;
-  const [chatCollapsed, setChatCollapsed] = useState(false);
-
-  const toggleChatCollapsed = () => {
-    setChatCollapsed(!chatCollapsed);
-  };
-
   return (
     <>
       <ServerStatusStore />
       <ClientConfigStore />
-
       <Layout>
-        <Sider
-          collapsed={chatCollapsed}
-          width={300}
-          style={{
-            position: 'fixed',
-            right: 0,
-            top: 0,
-            bottom: 0,
-          }}
-        />
+        <Sidebar />
+        <Header />
         <Layout className="site-layout" style={{ marginRight: 200 }}>
-          <Header
-            className="site-layout-background"
-            style={{ position: 'fixed', zIndex: 1, width: '100%' }}
-          >
-            {name}
-            <button onClick={toggleChatCollapsed}>Toggle Chat</button>
-          </Header>
-          <Content style={{ margin: '80px 16px 0', overflow: 'initial' }}>
-            <div>
-              <Row>
-                <Col span={24}>Video player goes here</Col>
-              </Row>
-              <Row>
-                <Col span={24}>
-                  <Content dangerouslySetInnerHTML={{ __html: extraPageContent }} />
-                </Col>
-              </Row>
-            </div>
-          </Content>
-          <Footer style={{ textAlign: 'center' }}>Footer: Owncast {version}</Footer>
+          <Content />
+          <Footer />
         </Layout>
       </Layout>
     </>

web/components/ui/Content/Content.tsx

@@ -0,0 +1,26 @@
+import { useRecoilValue } from 'recoil';
+import { clientConfigState } from '../../stores/ClientConfigStore';
+import { ClientConfig } from '../../../interfaces/client-config.model';
+import { Layout, Row, Col } from 'antd';
+
+const { Content } = Layout;
+
+export default function FooterComponent() {
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
+  const { extraPageContent } = clientConfig;
+
+  return (
+    <Content style={{ margin: '80px 16px 0', overflow: 'initial' }}>
+      <div>
+        <Row>
+          <Col span={24}>Video player goes here</Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <Content dangerouslySetInnerHTML={{ __html: extraPageContent }} />
+          </Col>
+        </Row>
+      </div>
+    </Content>
+  );
+}

web/components/ui/Content/index.ts

@@ -0,0 +1 @@
+export { default } from "./Content"

web/components/ui/Footer/Footer.tsx

@@ -0,0 +1,13 @@
+import { useRecoilValue } from 'recoil';
+import { clientConfigState } from '../../stores/ClientConfigStore';
+import { ClientConfig } from '../../../interfaces/client-config.model';
+import { Layout } from 'antd';
+
+const { Footer } = Layout;
+
+export default function FooterComponent() {
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
+  const { version } = clientConfig;
+
+  return <Footer style={{ textAlign: 'center' }}>Footer: Owncast {version}</Footer>;
+}

web/components/ui/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from './Footer';

web/components/ui/Header/Header.module.scss

@@ -0,0 +1,4 @@
+.header {
+  @apply fixed w-full bg-red;
+  z-index: 1;
+}

web/components/ui/Header/Header.tsx

@@ -0,0 +1,31 @@
+import s from './Header.module.scss';
+import { Layout } from 'antd';
+import { ServerStatusStore, serverStatusState } from '../../stores/ServerStatusStore';
+import {
+  ClientConfigStore,
+  clientConfigState,
+  chatCurrentlyVisible,
+} from '../../stores/ClientConfigStore';
+import { ClientConfig } from '../../../interfaces/client-config.model';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { useEffect } from 'react';
+
+const { Header } = Layout;
+
+export default function HeaderComponent() {
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
+  const [chatOpen, setChatOpen] = useRecoilState(chatCurrentlyVisible);
+
+  const { name } = clientConfig;
+
+  useEffect(() => {
+    console.log({ chatOpen });
+  }, [chatOpen]);
+
+  return (
+    <Header className={`${s.header}`}>
+      {name}
+      <button onClick={() => setChatOpen(!chatOpen)}>Toggle Chat</button>
+    </Header>
+  );
+}

web/components/ui/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header';

web/components/ui/Sidebar/Sidebar.tsx

@@ -0,0 +1,19 @@
+import Sider from 'antd/lib/layout/Sider';
+import { useRecoilValue } from 'recoil';
+import { chatCurrentlyVisible } from '../../stores/ClientConfigStore';
+
+export default function Sidebar() {
+  let chatOpen = useRecoilValue(chatCurrentlyVisible);
+  return (
+    <Sider
+      collapsed={!chatOpen}
+      width={300}
+      style={{
+        position: 'fixed',
+        right: 0,
+        top: 0,
+        bottom: 0,
+      }}
+    />
+  );
+}

web/components/ui/Sidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './Sidebar';

web/components/ui/index.tsx

@@ -0,0 +1,4 @@
+export { default as Header } from './Header/index'
+export { default as Sidebar } from './Sidebar/index'
+export { default as Footer } from './Footer/index'
+export { default as Content } from './Content/index'