post-npm-error

MartsTech · Feb 24, 2021 · 4f3b5ab · 4f3b5ab
1 parent 2fd7e57
commit 4f3b5ab
Show file tree

Hide file tree

Showing 10 changed files with 924 additions and 164 deletions.
diff --git a/package.json b/package.json
@@ -6,18 +6,19 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@reduxjs/toolkit": "^1.2.5",
+    "firebase": "^8.2.9",
     "gen-env-types": "^1.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-firebase-hooks": "^2.2.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.2",
+    "react-scripts": "4.0.3",
     "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
-    "gen-env": "npx gen-env-types .env -o src/env.d.ts -e ."
+    "build": "react-scripts build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -41,6 +42,6 @@
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "@types/styled-components": "^5.1.7",
-    "typescript": "^4.1.5"
+    "typescript": "^4.2.2"
   }
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -18,6 +18,7 @@ export const Header: React.FC = () => {
           size="small"
           variant="filled"
           label="Search in MartsTech"
+          InputProps={{ disableUnderline: true }}
         />
       </HeaderSearch>
       <HeaderRight>
@@ -81,7 +82,8 @@ const HeaderInput = styled(TextField)`
 
   > div > input {
     background-color: var(--header-search-color);
-    color: gray;
+    color: white;
+    border: none !important;
   }
 `;
 

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -0,0 +1,107 @@
+import AppsIcon from "@material-ui/icons/Apps";
+import BookmarkBorderIcon from "@material-ui/icons/BookmarkBorder";
+import CreateIcon from "@material-ui/icons/Create";
+import DraftsIcon from "@material-ui/icons/Drafts";
+import ExpandLessIcon from "@material-ui/icons/ExpandLess";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import FileCopyIcon from "@material-ui/icons/FileCopy";
+import InboxIcon from "@material-ui/icons/Inbox";
+import InsertCommentIcon from "@material-ui/icons/InsertComment";
+import PeopleAltIcon from "@material-ui/icons/PeopleAlt";
+import React from "react";
+import styled from "styled-components";
+import { SidebarOption } from "./SidebarOption";
+import { StatusBadge } from "./StatusBadge";
+import AddIcon from "@material-ui/icons/Add";
+
+export const Sidebar: React.FC = () => {
+  return (
+    <SidebarContainer>
+      <SidebarHeader>
+        <SidebarInfo>
+          <h2>MartsTech HQ</h2>
+          <h3>
+            <SidebarStatus>
+              <StatusBadge />
+            </SidebarStatus>
+            Martin Velkov
+          </h3>
+        </SidebarInfo>
+        <CreateIcon />
+      </SidebarHeader>
+
+      <SidebarOption Icon={InsertCommentIcon} title="Threads" />
+      <SidebarOption Icon={InboxIcon} title="Mentions & reactions" />
+      <SidebarOption Icon={DraftsIcon} title="Saved items" />
+      <SidebarOption Icon={BookmarkBorderIcon} title="Channel browser" />
+      <SidebarOption Icon={PeopleAltIcon} title="People & user groups" />
+      <SidebarOption Icon={AppsIcon} title="Apps" />
+      <SidebarOption Icon={FileCopyIcon} title="File browser" />
+      <SidebarOption Icon={ExpandLessIcon} title="Show less" />
+      <hr />
+      <SidebarOption Icon={ExpandMoreIcon} title="Channels" />
+      <hr />
+      <SidebarOption Icon={AddIcon} title="Add Channel" addChannelOption />
+    </SidebarContainer>
+  );
+};
+
+const SidebarContainer = styled.div`
+  color: white;
+  background-color: var(--slack-color);
+  flex: 0.3;
+  border-top: 1px solid var(--sidebar-color);
+  max-width: 260px;
+  margin-top: 70px;
+
+  > hr {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid var(--sidebar-color);
+  }
+`;
+
+const SidebarHeader = styled.div`
+  display: flex;
+  border-bottom: 1px solid var(--sidebar-color);
+  padding: 13px;
+
+  > svg {
+    padding: 8px;
+    color: var(--sidebar-color);
+    font-size: 18px;
+    background-color: white;
+    border-radius: 50%;
+  }
+`;
+
+const SidebarInfo = styled.div`
+  flex: 1;
+
+  > h2 {
+    font-size: 1rem;
+    font-weight: 900;
+    margin-bottom: 5px;
+  }
+
+  > h3 {
+    display: flex;
+    font-size: 0.9rem;
+    font-weight: 400;
+    align-items: center;
+  }
+`;
+
+const SidebarStatus = styled.div`
+  > span {
+    margin-bottom: 3px !important;
+    margin-right: 12px !important;
+  }
+
+  > span > span {
+    object-fit: contain;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+  }
+`;
diff --git a/src/components/SidebarOption.tsx b/src/components/SidebarOption.tsx
@@ -0,0 +1,67 @@
+import { SvgIconTypeMap } from "@material-ui/core";
+import { OverridableComponent } from "@material-ui/core/OverridableComponent";
+import React from "react";
+import { db } from "../firebase";
+import styled from "styled-components";
+
+interface SidebarOptionProps {
+  Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">>;
+  title?: string;
+  addChannelOption?: boolean;
+}
+
+export const SidebarOption: React.FC<SidebarOptionProps> = ({
+  Icon,
+  title,
+  addChannelOption,
+}) => {
+  const addChannel = () => {
+    const channelName = prompt("Please enter the channel name");
+
+    if (channelName) {
+      db.collection("rooms").add({
+        name: channelName,
+      });
+    }
+  };
+
+  const selectChannel = () => {};
+
+  return (
+    <SidebarOptionContainer
+      onClick={addChannelOption ? addChannel : selectChannel}
+    >
+      {Icon && <Icon fontSize="small" style={{ padding: 10 }} />}
+      {Icon ? (
+        <h3>{title}</h3>
+      ) : (
+        <SidebarOptionChannel>
+          <span>#</span> {title}
+        </SidebarOptionChannel>
+      )}
+    </SidebarOptionContainer>
+  );
+};
+
+const SidebarOptionContainer = styled.div`
+  display: flex;
+  font-size: 0.75rem;
+  align-items: center;
+  padding-left: 2px;
+  cursor: pointer;
+
+  :hover {
+    opacity: 0.9;
+    background-color: var(--sidebar-option-color);
+  }
+
+  > h3 {
+    font-weight: 500;
+  }
+
+  > h3 > span {
+    padding: 15px;
+  }
+`;
+
+const SidebarOptionChannel = styled.div``;
diff --git a/src/components/StatusBadge.tsx b/src/components/StatusBadge.tsx
@@ -0,0 +1,33 @@
+import { Badge, createStyles, withStyles } from "@material-ui/core";
+
+export const StatusBadge: React.FC = () => {
+  const StyledBadge = withStyles(() =>
+    createStyles({
+      badge: {
+        backgroundColor: "green",
+        color: "green",
+        "&::after": {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          borderRadius: "50%",
+          animation: "$ripple 1.2s infinite ease-in-out",
+          border: "1px solid currentColor",
+          content: '""',
+        },
+      },
+      "@keyframes ripple": {
+        "0%": {
+          transform: "scale(.8)",
+          opacity: 1,
+        },
+        "100%": {
+          transform: "scale(2.4)",
+          opacity: 0,
+        },
+      },
+    })
+  )(Badge);
+
+  return <StyledBadge overlap="circle" variant="dot" />;
+};
diff --git a/src/firebase.ts b/src/firebase.ts
@@ -1,4 +1,5 @@
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+import firebase from "firebase";
+
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_API_KEY,
   authDomain: process.env.REACT_APP_AUTH_DOMAIN,
@@ -9,4 +10,9 @@ const firebaseConfig = {
   measurementId: process.env.REACT_APP_MEASUREMENT_ID,
 };
 
-export default firebaseConfig;
+const firebaseApp = firebase.initializeApp(firebaseConfig);
+const db = firebaseApp.firestore();
+const auth = firebase.auth();
+const provider = new firebase.auth.GoogleAuthProvider();
+
+export { db, auth, provider };
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { Header } from "../components/Header";
 import styled from "styled-components";
+import { Header } from "../components/Header";
+import { Sidebar } from "../components/Sidebar";
 
 const App: React.FC = () => {
   return (
@@ -10,6 +11,7 @@ const App: React.FC = () => {
         <>
           <Header />
           <AppBody>
+            <Sidebar />
             <Switch>
               <Route path="/" exact />
             </Switch>
@@ -22,4 +24,7 @@ const App: React.FC = () => {
 
 export default App;
 
-const AppBody = styled.div``;
+const AppBody = styled.div`
+  display: flex;
+  height: 100vh;
+`;
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -5,6 +5,9 @@
 body {
   --slack-color: #3f0f40;
   --header-search-color: #421f44;
+  --sidebar-color: #49274b;
+  --sidebar-option-color: #340e36;
+
   overflow: hidden;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

diff --git a/tsconfig.json b/tsconfig.json
@@ -4,11 +4,7 @@
     "outDir": "build/dist",
     "module": "esnext",
     "target": "es5",
-    "lib": [
-      "es6",
-      "dom",
-      "esnext.asynciterable"
-    ],
+    "lib": ["es6", "dom", "esnext.asynciterable"],
     "sourceMap": true,
     "allowJs": true,
     "jsx": "react-jsx",
@@ -39,7 +35,5 @@
     "jest",
     "src/setupTests.ts"
   ],
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }