Purged css styles, added a shadow root and reduced plugin size from 1…

…3MB to 308Kb
Kehinded · Sep 24, 2021 · 5a6a4b5 · 5a6a4b5
1 parent 7bf2157
commit 5a6a4b5
Show file tree

Hide file tree

Showing 13 changed files with 12,164 additions and 12,480 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,7 +5,7 @@
     "start:standalone": "webpack serve --env standalone",
     "build": "concurrently yarn:build:*",
     "build-npm": "concurrently npm:build:*",
-    "build:webpack": "webpack --mode=production",
+    "build:webpack": "cross-env NODE_ENV=production webpack --mode=production",
     "analyze": "webpack --mode=production --env analyze",
     "lint": "eslint src --ext js",
     "format": "prettier --write .",
@@ -91,6 +91,7 @@
     "react-onclickoutside": "^6.12.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-shadow": "^19.0.2",
     "single-spa-react": "^4.3.1",
     "swr": "^1.0.1",
     "web-vitals": "^1.0.1"

diff --git a/frontend/src/Index.css b/frontend/src/Index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/src/components/Home/Files/index.js b/frontend/src/components/Home/Files/index.js
@@ -17,12 +17,22 @@ async function fetcher(url) {
   const res = await axios.get(url);
   return res.data;
 }
-const API_URL = window.location.hostname.includes("zuri.chat")
-  ? "https://companyfiles.zuri.chat/api/v1"
-  : "http://localhost:5500/api/v1";
+// const API_URL = window.location.hostname.includes("zuri.chat")
+//   ? "https://companyfiles.zuri.chat/api/v1"
+//   : "http://localhost:5500/api/v1";
+
+// const index = () => {
+//   const { data, error } = useSWR(
+//     "https://companyfiles.zuri.chat/api/v1/files/nonDeletedFiles",
+//     fetcher
+//   );
+
+  const API_URL = window.location.hostname.includes("localhost")
+  ? "http://localhost:5500/api/v1"
+  : "https://companyfiles.zuri.chat/api/v1";
 const index = () => {
   const { data, error } = useSWR(
-    "https://companyfiles.zuri.chat/api/v1/files/nonDeletedFiles",
+    `${API_URL}/files/NonDeletedFiles`,
     fetcher
   );
 

diff --git a/frontend/src/components/ImagePreview/index.js b/frontend/src/components/ImagePreview/index.js
@@ -22,7 +22,6 @@ function index({ file, setOpenStatus }) {
               className="bg-black rounded-full md:h-14 md:w-14 w-5 h-5 p-1 md:p-3"
             />
           </div>
-
           <div className="flex items-center justify-center">
             <img
               src={file.url}

diff --git a/frontend/src/components/VideoPreview/Index.js b/frontend/src/components/VideoPreview/Index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Nav from "../Subcomponents/nav";
 import active from "../../../public/Icons/arrow-left/active.svg";
 import imageIcon from "../../../public/Icons/image/active.svg";
 import downloadIcon from "../../../public/Icons/download/active.svg";
@@ -14,32 +15,7 @@ function index({ file, setOpenStatus }) {
 
   return (
     <div className="bg-gray-800 bg-opacity-70 overflow-auto h-full w-full flex-auto flex flex-col justify-between pb-6 absolute z-10 top-0 left-0 bottom-0 right-0">
-      <nav className="h-10 w-full flex flex-row justify-between py-3 px-3 md:px-5 lg:px-7">
-        <div className="flex">
-          <div>
-            <img
-              src={active}
-              alt="arrow-left"
-              className="mr-5"
-              onClick={() => setOpenStatus(false)}
-            />
-          </div>
-          <div>
-            <div className="flex flex-row">
-              <img src={imageIcon} alt="image-icon" className="mr-2" />
-              <p className="text-white">{file.fileName}</p>
-            </div>
-          </div>
-        </div>
-        <div className="flex">
-          <div>
-            <img src={downloadIcon} alt="download-icon" />
-          </div>
-          <div>
-            <img src={Vertical} alt="more-icon" className="ml-2" />
-          </div>
-        </div>
-      </nav>
+      <Nav file={file} setOpenStatus={setOpenStatus} />
       <div className="flex flex-col justify-between items-center w-full">
         <div className="flex justify-between w-full md:px-6 px-2">
           <div className="flex self-center">

diff --git a/frontend/src/components/VideoPreviewNew/Index.js b/frontend/src/components/VideoPreviewNew/Index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Nav from "../Subcomponents/nav";
 import active from "../../../public/Icons/arrow-left/active.svg";
 import imageIcon from "../../../public/Icons/image/active.svg";
 import downloadIcon from "../../../public/Icons/download/active.svg";
@@ -14,7 +15,7 @@ function index({ file, setOpenStatus }) {
 
   return (
     <div className="bg-gray-800 bg-opacity-70 overflow-auto h-full w-full flex-auto flex flex-col justify-between pb-6 absolute z-10 top-0 left-0 bottom-0 right-0">
-      <nav className="h-10 w-full flex flex-row justify-between py-3 px-3 md:px-5 lg:px-7">
+      {/* <nav className="h-10 w-full flex flex-row justify-between py-3 px-3 md:px-5 lg:px-7">
         <div className="flex">
           <div>
             <img
@@ -39,7 +40,8 @@ function index({ file, setOpenStatus }) {
             <img src={Vertical} alt="more-icon" className="ml-2" />
           </div>
         </div>
-      </nav>
+      </nav> */}
+      <Nav file={file} setOpenStatus={setOpenStatus} />
       <div className="flex flex-col justify-between items-center w-full">
         <div className="flex justify-between w-full md:px-6 px-2">
           <div className="flex self-center">
@@ -50,13 +52,7 @@ function index({ file, setOpenStatus }) {
             />
           </div>
           <div className="flex items-center justify-center">
-            {/* <img
-              src="../../../public/Icons/zoom-out/active.svg"
-              alt="image"
-              className="md:min-w-0 min-w-full w-60 md:w-10/12"
-            /> */}
             <video className="md:min-w-0 min-w-full w-60 md:w-10/12" src={file.url}  controls  autoPlay />
-
           </div>
           <div className="flex self-center">
             <img

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -1,7 +1,14 @@
 
-import App from "./App"
+import App from "./App";
+import root from 'react-shadow';
+import styles from  "./index.css"
 
 
 export default function Root(props) {
-  return (<App />);
+  return (
+    <root.div>
+      <style type="text/css">{styles.toString()}</style>
+        <App />
+    </root.div>
+  );
 }
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
@@ -18,7 +18,7 @@ module.exports = (webpackConfigEnv, argv) => {
     },
   })(defaultConfig, {
     // customize the webpack config here
-    devtool: "inline-source-map",
+    //devtool: "inline-source-map",
     devServer: {
       historyApiFallback: true,
       // https: true,
@@ -28,9 +28,6 @@ module.exports = (webpackConfigEnv, argv) => {
         {
           test: /\.css$/i,
           use: [
-            require.resolve("style-loader", {
-              paths: [require.resolve("webpack-config-single-spa")],
-            }),
             require.resolve("css-loader", {
               paths: [require.resolve("webpack-config-single-spa")],
             }),
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,7 +22,6 @@ function index({ file, setOpenStatus }) { @@
                   className="bg-black rounded-full md:h-14 md:w-14 w-5 h-5 p-1 md:p-3"
                 />
               </div>
               <div className="flex items-center justify-center">
                 <img
                   src={file.url}
@@ Expand Down @@