added filters to files folder, still WIP

common/constants.js

@@ -114,3 +114,17 @@ export const theme = {
 export const gateways = {
   ipfs: "https://slate.textile.io/ipfs",
 };
+
+export const filetypes = {
+  pdf: { type: "application", subtype: "pdf" },
+  aac: { type: "audio", subtype: "aac" },
+  csv: { type: "text", subtype: "csv" },
+  epub: { type: "application", subtype: "epub+zip" },
+  jpg: { type: "image", subtype: "jpeg" },
+  mp3: { type: "audio", subtype: "mpeg" },
+  mp4: { type: "video", subtype: "mpeg" },
+  otf: { type: "font", subtype: "otf" },
+  png: { type: "image", subtype: "png" },
+  ttf: { type: "font", subtype: "ttf" },
+  webm: { type: "video", subtype: "webm" },
+};

scenes/SceneFilesFolder.js

@@ -1,11 +1,17 @@
 import * as React from "react";
+import * as Constants from "~/common/constants";
 import * as SVG from "~/common/svg";
 import * as Events from "~/common/custom-events";
 
-import { ButtonPrimary } from "~/components/system/components/Buttons";
+import { css } from "@emotion/react";
+import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
+import { ButtonPrimary, ButtonTertiary } from "~/components/system/components/Buttons";
 import { FileTypeGroup } from "~/components/core/FileTypeIcon";
 import { TabGroup, PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
+import { CheckBox } from "~/components/system/components/CheckBox.js";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";
+import { getPublicAndPrivateFiles } from "~/common/utilities";
 
 import ScenePage from "~/components/core/ScenePage";
 import DataView from "~/components/core/DataView";
@@ -15,9 +21,137 @@ import EmptyState from "~/components/core/EmptyState";
 
 const POLLING_INTERVAL = 10000;
 
+const STYLES_FILTERS_CONTAINER = css`
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-start;
+`;
+
+const STYLES_TOOLTIP_ANCHOR = css`
+  border: 1px solid #f2f2f2;
+  background-color: ${Constants.system.white};
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  box-shadow: 0px 8px 24px rgba(178, 178, 178, 0.2);
+  position: absolute;
+  z-index: ${Constants.zindex.tooltip};
+`;
+
+//toast: setting both of these to 50% width might be janky but it works
+const STYLES_FILETYPE_TOOLTIP = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 250px;
+`;
+
+const STYLES_PRIVACY_TOOLTIP = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 110px;
+`;
+
 export default class SceneFilesFolder extends React.Component {
   state = {
     view: 0,
+    filetypeTooltip: false,
+    privacyTooltip: false,
+    filters: {},
+    filtersActive: false,
+    privacy: "ALL",
+    files: this.props.viewer.library[0].children,
+  };
+
+  _handleFiletypeTooltip = () => {
+    this.setState({ filetypeTooltip: !this.state.filetypeTooltip });
+  };
+
+  _handlePrivacyTooltip = () => {
+    this.setState({ privacyTooltip: !this.state.privacyTooltip });
+  };
+
+  _handlePrivacyFilter = (filter) => {
+    const viewer = this.props.viewer;
+    const filtered = getPublicAndPrivateFiles({ viewer });
+    if (filter === "ALL") {
+      this.setState({ privacy: "ALL" }, this._filterFiles);
+    } else if (filter === "public") {
+      this.setState({ privacy: "public" }, this._filterFiles);
+    } else if (filter === "private") {
+      this.setState({ privacy: "private" }, this._filterFiles);
+    } else {
+      console.log("this is the worst possible scenario");
+    }
+  };
+
+  _getPrivacyFiles = (filter) => {
+    const viewer = this.props.viewer;
+    const filtered = getPublicAndPrivateFiles({ viewer });
+
+    if (filter === "ALL") {
+      return viewer.library[0].children;
+    } else if (filter === "public") {
+      return filtered.publicFiles;
+    } else if (filter === "private") {
+      return filtered.privateFiles;
+    } else {
+      console.log("this is the worst possible scenario");
+    }
+  };
+
+  _handleFiletypeFilter = ({ type, subtype }) => {
+    const key = `${type}/${subtype}`;
+    this.setState(
+      (prevState) => ({
+        filters: {
+          ...prevState.filters,
+          [key]: !prevState.filters[key],
+        },
+      }),
+      this._filterFiles
+    );
+  };
+
+  _getKey = ({ type, subtype }) => {
+    const key = `${type}/${subtype}`;
+    return key;
+  };
+
+  _filterFiles = () => {
+    const privacy = this.state.privacy;
+    const library = this._getPrivacyFiles(privacy);
+    const filters = this.state.filters;
+    const filterKeys = Object.keys(filters).filter((key) => {
+      return filters[key] === true;
+    });
+    const filteredFiles = [];
+
+    if (filterKeys.length && library.length) {
+      for (const libraryObject of library) {
+        for (const filter of filterKeys) {
+          {
+            libraryObject.type === filter ? filteredFiles.push(libraryObject) : null;
+          }
+        }
+      }
+      this.setState((prevState) => ({
+        files: filteredFiles,
+        filetypeTooltip: prevState.filetypeTooltip ? true : false,
+        filtersActive: true,
+      }));
+    } else {
+      this.setState((prevState) => ({
+        files: library,
+        filetypeTooltip: prevState.filetypeTooltip ? true : false,
+        filtersActive: false,
+      }));
+    }
   };
 
   componentDidMount = () => {
@@ -117,11 +251,133 @@ export default class SceneFilesFolder extends React.Component {
             </ButtonPrimary>
           }
         />
-        {this.props.viewer.library[0].children && this.props.viewer.library[0].children.length ? (
+        <div css={STYLES_FILTERS_CONTAINER}>
+          <div style={{ position: "relative" }}>
+            <ButtonTertiary style={{ marginRight: 20 }} onClick={this._handleFiletypeTooltip}>
+              <SVG.Filter
+                height="18px"
+                style={{
+                  color: this.state.filtersActive
+                    ? Constants.system.brand
+                    : Constants.system.textGray,
+                }}
+              />
+              <span style={{ width: 75, paddingLeft: 5, paddingBottom: 1 }}>FILETYPE</span>
+            </ButtonTertiary>
+            {this.state.filetypeTooltip ? (
+              <Boundary
+                captureResize={true}
+                captureScroll={false}
+                enabled
+                onOutsideRectEvent={() => this.setState({ filetypeTooltip: false })}
+              >
+                <div css={STYLES_TOOLTIP_ANCHOR} style={{ width: 134, left: 2, top: 47 }}>
+                  <div css={STYLES_FILETYPE_TOOLTIP}>
+                    <CheckBox
+                      name="jpg"
+                      value={this.state.filters[this._getKey(Constants.filetypes.jpg)]}
+                      style={{ padding: 5 }}
+                      onChange={() => this._handleFiletypeFilter(Constants.filetypes.jpg)}
+                    >
+                      JPG
+                    </CheckBox>
+                    <CheckBox
+                      name="png"
+                      value={this.state.filters[this._getKey(Constants.filetypes.png)]}
+                      style={{ padding: 5 }}
+                      onChange={() => this._handleFiletypeFilter(Constants.filetypes.png)}
+                    >
+                      PNG
+                    </CheckBox>
+                    <CheckBox
+                      name="mp4"
+                      value={this.state.filters[this._getKey(Constants.filetypes.mp4)]}
+                      style={{ padding: 5 }}
+                      onChange={() => this._handleFiletypeFilter(Constants.filetypes.mp4)}
+                    >
+                      MP4
+                    </CheckBox>
+                    <CheckBox
+                      name="mp3"
+                      value={this.state.filters[this._getKey(Constants.filetypes.mp3)]}
+                      style={{ padding: 5 }}
+                      onChange={() => this._handleFiletypeFilter(Constants.filetypes.mp3)}
+                    >
+                      MP3
+                    </CheckBox>
+                    <CheckBox
+                      name="pdf"
+                      value={this.state.filters[this._getKey(Constants.filetypes.pdf)]}
+                      style={{ padding: 5 }}
+                      onChange={() => this._handleFiletypeFilter(Constants.filetypes.pdf)}
+                    >
+                      PDF
+                    </CheckBox>
+                    <CheckBox
+                      name="epub"
+                      value={this.state.filters[this._getKey(Constants.filetypes.epub)]}
+                      style={{ padding: 5 }}
+                      onChange={() => this._handleFiletypeFilter(Constants.filetypes.epub)}
+                    >
+                      EPUB
+                    </CheckBox>
+                  </div>
+                </div>
+              </Boundary>
+            ) : null}
+          </div>
+          <div style={{ position: "relative" }}>
+            <ButtonTertiary onClick={this._handlePrivacyTooltip}>
+              <span style={{ width: 50 }}>{this.state.privacy}</span>
+            </ButtonTertiary>
+            {this.state.privacyTooltip ? (
+              <Boundary
+                captureResize={true}
+                captureScroll={false}
+                enabled
+                onOutsideRectEvent={() => this.setState({ privacyTooltip: false })}
+              >
+                <div css={STYLES_TOOLTIP_ANCHOR} style={{ width: 91, left: 2, top: 44 }}>
+                  <div css={STYLES_PRIVACY_TOOLTIP}>
+                    <div
+                      style={{
+                        color: this.state.privacy === "ALL" ? Constants.system.brand : null,
+                        cursor: "pointer",
+                      }}
+                      onClick={() => this._handlePrivacyFilter("ALL")}
+                    >
+                      ALL
+                    </div>
+                    <div
+                      style={{
+                        color: this.state.privacy === "public" ? Constants.system.brand : "inherit",
+                        cursor: "pointer",
+                      }}
+                      onClick={() => this._handlePrivacyFilter("public")}
+                    >
+                      public
+                    </div>
+                    <div
+                      style={{
+                        color:
+                          this.state.privacy === "private" ? Constants.system.brand : "inherit",
+                        cursor: "pointer",
+                      }}
+                      onClick={() => this._handlePrivacyFilter("private")}
+                    >
+                      private
+                    </div>
+                  </div>
+                </div>
+              </Boundary>
+            ) : null}
+          </div>
+        </div>
+        {this.state.files?.length ? (
           <DataView
             onAction={this.props.onAction}
             viewer={this.props.viewer}
-            items={this.props.viewer.library[0].children}
+            items={this.state.files}
             onUpdateViewer={this.props.onUpdateViewer}
             view={this.state.view}
           />