1 files changed, 136 insertions, 0 deletions
diff --git a/server/web/src/components/Sidebar.tsx b/server/web/src/components/Sidebar.tsx
new file mode 100644
index 0000000..d016a19
--- /dev/null
+++ b/server/web/src/components/Sidebar.tsx
@@ -0,0 +1,136 @@
+import { IProps, IState } from '../interfaces/components/Sidebar.interface';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { IStream } from '../interfaces/Stream.interface';
+import React, { Component } from 'react';
+import Card from './Card';
+import {
+    SidebarDropdown,
+    SidebarDropdownButton,
+    SidebarDropdownContent,
+    SidebarStreamContent,
+    SidebarStream,
+    SidebarStreamSection,
+    SidebarStreamInput,
+    SidebarStreamButton,
+    SidebarBlock
+} from '../design/components/Sidebar.design';
+
+class Sidebar extends Component<IProps, IState> {
+    sourceInput: any = React.createRef();
+    titleInput: any = React.createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            showContent: false,
+            streams: []
+        };
+    }
+
+    removeStream = (toRemove: IStream) =>
+        this.setState({
+            streams: this.state.streams.filter(
+                (stream: IStream) => (
+                    !(stream.source === toRemove.source
+                        && stream.title === toRemove.title)
+                )
+            )
+        });
+
+    addStream = () => {
+        const source = this.sourceInput.current;
+        const title = this.titleInput.current;
+        const sourceValue = source.value.trim();
+        const titleValue = title.value.trim();
+        let sourcePassed = true;
+        let titlePassed = true;
+
+        if (sourceValue === '') {
+            source.style.border = 'solid thin rgb(225, 53, 57)';
+            sourcePassed = false;
+        } else
+            source.style.border = 'solid thin rgb(31, 93, 117)';
+
+        if (titleValue === '') {
+            title.style.border = 'solid thin rgb(225, 53, 57)';
+            titlePassed = false;
+        } else
+            title.style.border = 'solid thin rgb(31, 93, 117)';
+
+        if (sourcePassed && titlePassed)
+            if (this.streamExists(sourceValue, titleValue))
+                alert('Stream Already Exists!')
+            else {
+                this.state.streams.push({
+                    source: sourceValue,
+                    title: titleValue
+                });
+                source.value = '';
+                title.value = '';
+            }
+    }
+
+    streamExists = (source: string, title: string) => {
+        for (const stream of this.state.streams)
+            if (stream.source === source && stream.title === title)
+                return true;
+        return false;
+    }
+
+    updateShowContent = () =>
+        this.setState({ showContent: !this.state.showContent });
+
+    render() {
+        const { showContent, streams } = this.state;
+
+        return (
+            <SidebarDropdown>
+                <SidebarDropdownButton onClick={this.updateShowContent}>
+                    {showContent ? (
+                        <FaChevronRight size=".8rem" />
+                    ) : (
+                            <FaChevronLeft size=".8rem" />
+                        )}
+                </SidebarDropdownButton>
+
+                <SidebarDropdownContent active={showContent}>
+                    <SidebarStream>
+                        <SidebarStreamInput
+                            type="search"
+                            placeholder="Flash video source..."
+                            ref={this.sourceInput}
+                        />
+                        <SidebarStreamSection>
+                            <SidebarStreamInput
+                                type="search"
+                                placeholder="Stream title..."
+                                ref={this.titleInput}
+                            />
+                            <SidebarStreamButton
+                                onClick={this.addStream}
+                            >
+                                Add
+                            </SidebarStreamButton>
+                        </SidebarStreamSection>
+                    </SidebarStream>
+                    {streams.length === 0 ? (
+                        <SidebarBlock>No Streams Available</SidebarBlock>
+                    ) : (
+                            <SidebarStreamContent>
+                                {streams.map((stream: IStream) => (
+                                    <Card
+                                        removeStream={this.removeStream}
+                                        source={stream.source}
+                                        title={stream.title}
+                                    />
+                                ))}
+                            </SidebarStreamContent>
+                        )}
+                </SidebarDropdownContent>
+            </SidebarDropdown>
+        );
+    }
+}
+
+export default Sidebar;