Added Filter pane Functionality

client/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.2.0",
+    "@craco/craco": "^6.3.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",

client/src/components/Apps/GoogleDrive/Messages/Messages.js

@@ -1,33 +1,74 @@
 import styles from "./Messages.module.css";
+import AttachmentIcon from "../assets/message-icons/attachment.svg";
+import HideFormatIcon from "../assets/message-icons/hide-formatting.png";
+import ShortcutIcon from "../assets/message-icons/shortcut.png";
+import LinksIcon from "../assets/message-icons/links.svg";
+import ItalicsIcon from "../assets/message-icons/italic.svg";
+import BulletListIcon from "../assets/message-icons/bulletlist.svg";
+import AlignCenterIcon from "../assets/message-icons/align-center.svg";
+import AtIcon from "../assets/message-icons/at.svg";
+import EmojiIcon from "../assets/message-icons/emoji.svg";
+import SendIcon from "../assets/message-icons/send.svg";
+import ArrowIcon from "../assets/message-icons/arrow-down.svg";
 
 function Messages() {
-  return <div className={styles.wrapper}>
-  <div className={styles.child}>
-      <div className={styles.driveimg}>
-      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Google_Drive_icon_%282020%29.svg/1147px-Google_Drive_icon_%282020%29.svg.png"/>
-      </div>
-      <div className={styles.info}>
-       <p><b>This conversation is just between the two of you.</b></p>
-       <p>Here you can post and receive comments with <a href="#">@GDrive</a>.</p>
+  return (
+    <div className={`${styles.height} w-full py-1`}>
+      <div className=" h-100vh w-full h-5/6"></div>
+      <div className="w-full h-1/6 border-2 border-gray-500 px-4 mx-4 rounded-sm">
+        <textarea className="h-2/6 border-gray-700 outline-none mx-3 bg-transparent px-4" placeholder="Send a message to Google Drive"></textarea>
+        <div className="flex w-full  px-3 p-1">
+          <div className="flex items-center mr-auto">
+              <img className=" h-4 mx-2 cursor-pointer" src={ShortcutIcon} alt="" />
+              <div className=" h-5 border-r mx-2 cursor-pointer border-gray-900"></div>
+              <p className=" mx-2 cursor-pointer">B</p>
+              <img className="mx-2 cursor-pointer h-4" src={ItalicsIcon} alt="" />
+              <img className=" h-4 mx-2 cursor-pointer" src={LinksIcon} alt="" />
+              <img className=" h-4 mx-2 cursor-pointer" src={BulletListIcon} alt="" />
+              <img className=" h-4 mx-2 cursor-pointer" src={AlignCenterIcon} alt="" />
+          </div>
+          <div className="flex items-center">
+                <img className=" h-4 mx-2 cursor-pointer" src={HideFormatIcon} alt="" />
+                <img className=" h-4 mx-2 cursor-pointer" src={AtIcon} alt="" />
+                <img className=" h-4 mx-2 cursor-pointer" src={EmojiIcon} alt="" />
+                <img className=" h-4 mx-2 cursor-pointer" src={AttachmentIcon} alt="" />
+                <img className=" h-4 mx-2 cursor-pointer" src={SendIcon} alt="" />
+                <div className=" h-5 border-r mx-2 cursor-pointer border-gray-900"></div>
+                <img className=" h-4 mx-2 cursor-pointer" src={ArrowIcon} alt="" />
+          </div>
+        </div>
       </div>
+    </div>
+
+  )
+
+//   <div className={styles.wrapper}>
+//   <div className={styles.child}>
+//       <div className={styles.driveimg}>
+//       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Google_Drive_icon_%282020%29.svg/1147px-Google_Drive_icon_%282020%29.svg.png"/>
+//       </div>
+//       <div className={styles.info}>
+//        <p><b>This conversation is just between the two of you.</b></p>
+//        <p>Here you can post and receive comments with <a href="#">@GDrive</a>.</p>
+//       </div>g
 
-</div>
-  <div className={styles.chat}>
-      <ul>
-          <li>Type <b>"off"</b> or <b>"stop"</b> to turn off notifications.</li>
-          <li>Type <b>"on"</b> or <b>"start"</b> to turn on notifications.</li>
-          <li>Type <b>"help"</b> for assistance.</li>
-          <li>Type <b>"feedback"</b> followed by what's on your mind to share your comments with Drive's customer service team. See Google's <a href="#">Privacy Policy</a> and <a href="#">Terms of Service.</a></li>
-      </ul>
-  </div>
-  <div>
-  <textarea id="story" name="story"
- rows="5" cols="33" placeholder="Send a message to Google Drive">
+// </div>
+//   <div className={styles.chat}>
+//       <ul>
+//           <li>Type <b>"off"</b> or <b>"stop"</b> to turn off notifications.</li>
+//           <li>Type <b>"on"</b> or <b>"start"</b> to turn on notifications.</li>
+//           <li>Type <b>"help"</b> for assistance.</li>
+//           <li>Type <b>"feedback"</b> followed by what's on your mind to share your comments with Drive's customer service team. See Google's <a href="#">Privacy Policy</a> and <a href="#">Terms of Service.</a></li>
+//       </ul>
+//   </div>
+//   <div>
+//   <textarea id="story" name="story"
+//  rows="5" cols="33" placeholder="Send a message to Google Drive">
 
-  </textarea>
-  </div>
+//   </textarea>
+//   </div>
 
-</div>;
+// </div>;
 }
 
 export default Messages;

client/src/components/Apps/GoogleDrive/Messages/Messages.module.css

@@ -1,4 +1,7 @@
-.wrapper{
+.height {
+    height: 70vh;
+}
+/* .wrapper{
     width: 100%;
     margin-top: 5px;
     top: 144px;
@@ -49,4 +52,4 @@ textarea {
     .driveimg, .info, .chat {
         margin: 0 5%;
     }
-}
+} */

client/src/components/ToolsSection/RecommendTools.js

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
 import Tools from "../fragments/tools/Tools";
 import Tool from "../fragments/tools/Tool";
 import TitleBox from "../fragments/TitleBox";
 import LoaderGif from "../fragments/LoaderGif";
 
 const RecommendTools = ({ list, text, loading, error, network, noSearch }) => {
+  const [filterByState, setFilterByState] = useState("All");
+
+  const onFilterBy = (filter) => {
+    setFilterByState(filter);
+  };
+
   if (loading) {
     return <LoaderGif />;
   }
@@ -20,19 +26,43 @@ const RecommendTools = ({ list, text, loading, error, network, noSearch }) => {
   }
   return (
     <div style={{ width: "100%", margin: "3rem 0rem" }}>
-      <TitleBox title="available tools" text="filter" link={false} />
+      <TitleBox
+        title="available tools"
+        text="filter"
+        link={false}
+        icon
+        filter
+        clicked={onFilterBy}
+      />
       <Tools list={list}>
         {noSearch === false
-          ? list.map(({ name, id, description, icon }) => (
-              <Tool
-                key={id}
-                icon={icon}
-                title={name}
-                text={description}
-                btn="add"
-                pad={true}
-              />
-            ))
+          ? list.map(({ name, id, description, icon, collection }) => {
+              if (collection === filterByState) {
+                return (
+                  <Tool
+                    key={id}
+                    icon={icon}
+                    title={name}
+                    text={description}
+                    btn="add"
+                    pad={true}
+
+                  />
+                );
+              } else if (filterByState === "All" || filterByState === "") {
+                return (
+                  <Tool
+                    key={id}
+                    icon={icon}
+                    title={name}
+                    text={description}
+                    btn="add"
+                    pad={true}
+
+                  />
+                );
+              }
+            })
           : `No result of  "${text}"  found for available tools`}
       </Tools>
     </div>

client/src/components/ToolsViewPage/ToolsView.js

@@ -79,33 +79,29 @@ const ToolsView = () => {
   };
 
   const getRecommend = async () => {
-    const origin = window.location.href;
-    let isLocal = origin.includes("localhost");
-    let apiBase = isLocal
-      ? "http://localhost:8500/api"
-      : "https://externaltools.zuri.chat/api";
-
-    const res = await fetch(`${apiBase}/tools/recommended`);
-
-    const status = res.status;
-    const data = await res.json();
-
-    if (status >= 200 && status <= 299) {
-      setRecoLoading(false);
-      setRecoNetwork(false);
-      setRecoError(false);
-      const list = data.data;
-      return list;
-    } else if (status >= 500) {
-      setRecoLoading(false);
-      setRecoNetwork(true);
-      setRecoError(false);
-    } else {
-      setRecoLoading(false);
-      setRecoError(true);
-      setRecoNetwork(false);
-    }
-
+     const res = await fetch('https://externaltools.zuri.chat/api/tools')
+     const status = res.status
+     const data = await res.json()
+     if(status >= 200 && status <= 299){
+     setRecoLoading(false);
+     setRecoNetwork(false);
+     setRecoError(false)
+     const list = data.data;
+     console.log(data)
+     return list;
+     }
+     else if(status >= 500){
+            setRecoLoading(false);
+     setRecoNetwork(true);
+     setRecoError(false)
+     }
+     else{
+     setRecoLoading(false);
+     setRecoError(true);
+     setRecoNetwork(false);
+     }
+
+     console.log(data);
     //  return tools.filter((tool) => tool.installed === false);
   };
 

client/src/components/fragments/Filterpane.js

@@ -0,0 +1,32 @@
+function Filterpane({ expand, clicked, closepane }) {
+  return (
+    <div
+      className={` ${
+        expand ? "h-36" : "h-0"
+      } w-48 border bg-white absolute top-8 right-0 transition-all flex justify-center flex-col`}
+    >
+      <p className="block cursor-pointer my-1 mx-auto text-sm" onClick={() => {
+          clicked("Enterprise-ready apps")
+            closepane()
+          }}>{expand? "Enterprise-ready-apps" : null}</p>
+      <p className="block cursor-pointer my-1 mx-auto text-sm" onClick={() => {
+          clicked("Daily Tools")
+          closepane()
+          }}>{expand ? "Daily Tools" : null}</p>
+      <p className="block cursor-pointer my-1 mx-auto text-sm" onClick={() => {
+          clicked("Brilliant Bots")
+          closepane()
+          }}>{expand ? "Brilliant Bots" : null}</p>
+      <p className="block cursor-pointer my-1 mx-auto text-sm" onClick={() => {
+          clicked()
+          closepane()
+          }}>{expand ? "Work From Home" : null}</p>
+      <p className="block cursor-pointer my-1 mx-auto text-sm" onClick={() => {
+          clicked("All")
+          closepane()
+          }}>{expand ? "All" : null}</p>
+    </div>
+  );
+}
+
+export default Filterpane;

client/src/components/fragments/TitleBox.js

@@ -1,23 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "../HeroSection/HeroSection.module.css";
 import DoubleRightArrow from "../../assets/tool-icon.svg";
 import { Link } from "react-router-dom";
+import FilterPane from "./Filterpane";
+
+const TitleBox = ({ title, text, link, icon, filter, clicked}) => {
+  const [expandState, setExpandState] = useState(false);
+
+  const onCloseFilterPane = () => {
+    setExpandState(!expandState)
+  }
 
-const TitleBox = ({ title, text, link, icon }) => {
   return (
-    <div className={styles.title_box}>
+    <div className={`${styles.title_box} relative`}>
       <p className={styles.title}>{title}</p>
-      <Link
-        to={`${link ? "/toolsdirectory" : ""}`}
-        className={styles.directory_box}
-      >
+      <Link to={`${link ? "/tools" : ""}`} className={styles.directory_box}>
         {icon && (
-          <div className={styles.icon}>
+          <div className={styles.icon} onClick={onCloseFilterPane}>
             <img src={DoubleRightArrow} alt="double_arrow-icon" />
           </div>
         )}
-        <div className={styles.directory_text}>{text}</div>
+        <div
+          className={styles.directory_text}
+          onClick={onCloseFilterPane}
+        >
+          {text}
+        </div>
       </Link>
+      {filter ? <FilterPane expand={expandState} closepane={onCloseFilterPane} clicked={clicked}/>  : null}
     </div>
   );
 };

client/src/components/fragments/tools/Tool.js

@@ -32,4 +32,4 @@ const Tool = ({ icon, title, text, btn, pad }) => {
   );
 };
 
-export default Tool;
+export default Tool;

client/src/data/tools.data.js

@@ -1,4 +1,4 @@
-// app data
+
 export const tools = [
   {
     name: "Gmail",