add sectioning & history, remove filter

softmarshmallow · softmarshmallow · commit 6e8a0b6b5e72 · 2022-12-11T18:45:20.000+09:00
diff --git a/packages/app-icons-loader/history.ts b/packages/app-icons-loader/history.ts
@@ -1,30 +1,43 @@
 // save recently used items
 
+import type { Icon } from "./resources";
+
 const _k_store_key = "icons-load-history";
 
 export class IconsLoadHistory {
-  private readonly history: Set<string>;
-
-  constructor() {
-    this.history = new Set();
+  private readonly data: Array<Icon> = [];
 
+  constructor(readonly max: number = 50) {
     const items = localStorage.getItem(_k_store_key);
     if (items) {
-      this.history = new Set(JSON.parse(items));
+      this.data = JSON.parse(items);
     }
   }
 
-  list(to: number = Infinity) {
-    return Array.from(this.history).reverse().slice(0, to);
+  list(to: number = Infinity): Array<Icon> {
+    return Array.from(this.data).reverse().slice(0, to);
   }
 
-  push(item: string) {
-    this.history.delete(item);
-    this.history.add(item);
+  push(item: Icon) {
+    const index = this.data.findIndex(
+      (i) =>
+        i.package === item.package &&
+        i.name === item.name &&
+        i.variant === item.variant
+    );
+    if (index >= 0) {
+      this.data.splice(index, 1);
+    }
+    this.data.push(item);
+
+    if (this.data.length > this.max) {
+      this.data.shift();
+    }
+
     this.save();
   }
 
   private save() {
-    localStorage.setItem(_k_store_key, JSON.stringify(this.list()));
+    localStorage.setItem(_k_store_key, JSON.stringify(this.data));
   }
 }
diff --git a/packages/app-icons-loader/icon-item.tsx b/packages/app-icons-loader/icon-item.tsx
@@ -10,7 +10,9 @@ import { assistant as analytics } from "@analytics.bridged.xyz/internal";
 import styled from "@emotion/styled";
 import { IconMeta, Icon, loadSvg, makeIconUrl, useIcons } from "./resources";
 
-export function IconItem(props: Icon) {
+type IconItemProps = Icon & { onClick: () => void };
+
+export function IconItem({ onClick, ...props }: IconItemProps) {
   const { package: _package, name, variant } = props;
   const [loading, setLoading] = useState(false);
   const [loaded, setLoaded] = useState(false);
@@ -52,7 +54,8 @@ export function IconItem(props: Icon) {
     }
   }
 
-  const onClick = () => {
+  const onclick = () => {
+    onClick();
     _onUserLoadIconToCanvas();
     loadData().then((d) => {
       parent.postMessage(
@@ -82,7 +85,7 @@ export function IconItem(props: Icon) {
           },
         }}
       >
-        <IconButton onClick={onClick} disabled={downloading}>
+        <IconButton onClick={onclick} disabled={downloading}>
           {downloading ? (
             <CircularProgress size={24} />
           ) : (
diff --git a/packages/app-icons-loader/icons-loader.tsx b/packages/app-icons-loader/icons-loader.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, {
+  useMemo,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
 import styled from "@emotion/styled";
 import GridList from "@material-ui/core/GridList";
 import GridListTile from "@material-ui/core/GridListTile";
@@ -8,6 +14,27 @@ import { IconItem } from "./icon-item";
 import InfiniteScroll from "react-infinite-scroller";
 import { debounce } from "./utils";
 import { IconSearch } from "./icons-search";
+import { IconsLoadHistory } from "./history";
+import _ from "lodash";
+
+function useRecentlyUsedIcons(max: number = 20) {
+  const [recentIcons, setRecentIcons] = useState<Icon[]>([]);
+  const h = useMemo(() => new IconsLoadHistory(max), []);
+
+  useEffect(() => {
+    setRecentIcons(h.list());
+  }, [h]);
+
+  const addHistory = useCallback(
+    (icon: Icon) => {
+      h.push(icon);
+      setRecentIcons(h.list());
+    },
+    [h]
+  );
+
+  return [recentIcons, addHistory] as const;
+}
 
 export function IconsLoader() {
   const [query, setQuery] = useState<string>(undefined);
@@ -22,6 +49,7 @@ export function IconsLoader() {
     host: "material",
   });
 
+  const [recentlyUsedIcons, addHistory] = useRecentlyUsedIcons();
   const { icons, hasMore } = useIcons({
     max: max,
     query: query,
@@ -32,62 +60,119 @@ export function IconsLoader() {
     setMax(100);
   }, [iconProperty, query]);
 
+  const onIconClick = (icon: Icon) => {
+    addHistory(icon);
+  };
+
+  const loading = icons === undefined;
+  const do_show_recently_used = recentlyUsedIcons?.length > 0 && !query;
+
+  // group by package
+  const grouped = _.groupBy(icons ?? [], (d) => d.package);
+
   return (
     <>
       <IconSearch
         onChange={debounce(setQuery, 200)}
         onSelectIconProperty={setIconProperty}
       />
       <>
-        {icons === undefined ? (
-          <StyledLinearProgress />
-        ) : (
-          <InfiniteScroll
-            pageStart={0}
-            hasMore={hasMore}
-            loadMore={() => {
-              setMax((d) => d + 100);
-            }}
-          >
-            <IconList icons={icons} />
-          </InfiniteScroll>
-        )}
+        <StyledLinearProgress
+          style={{
+            display: loading ? "block" : "none",
+          }}
+        />
+
+        <InfiniteScroll
+          pageStart={0}
+          hasMore={hasMore}
+          loadMore={() => {
+            setMax((d) => d + 100);
+          }}
+        >
+          <ListWrap>
+            {do_show_recently_used && (
+              <Section>
+                <h6 className="title">Frequently used</h6>
+                <IconList icons={recentlyUsedIcons} onIconClick={onIconClick} />
+              </Section>
+            )}
+
+            {Object.keys(grouped).map((key) => {
+              const icons = grouped[key];
+              return (
+                <Section key={key}>
+                  <h6 className="title">{key}</h6>
+                  <IconList icons={icons} onIconClick={onIconClick} />
+                </Section>
+              );
+            })}
+            {/* {icons?.length > 0 && (
+              <IconList icons={icons} onIconClick={onIconClick} />
+            )} */}
+          </ListWrap>
+        </InfiniteScroll>
       </>
     </>
   );
 }
 
 const IconList = React.forwardRef(function (
-  { icons }: { icons: Icon[] },
+  {
+    icons,
+    onIconClick,
+  }: {
+    icons: Icon[];
+    onIconClick?: (icon: Icon) => void;
+  },
   ref: any
 ) {
   return (
     <>
-      <ListWrap>
-        <GridList
-          cellHeight="auto"
-          cols={5}
-          style={{ marginRight: 0, marginLeft: 0 }}
-          ref={ref}
-        >
-          {icons.map((icon) => {
-            const { package: _p, name, variant } = icon;
-            return (
-              <GridItem key={_p + name + variant} classes={{ tile: "tile" }}>
-                <IconItem {...icon} />
-              </GridItem>
-            );
-          })}
-        </GridList>
-      </ListWrap>
+      <GridList
+        cellHeight="auto"
+        cols={5}
+        style={{ marginRight: 0, marginLeft: 0 }}
+        ref={ref}
+      >
+        {icons.map((icon) => {
+          const { package: _p, name, variant } = icon;
+          return (
+            <GridItem key={_p + name + variant} classes={{ tile: "tile" }}>
+              <IconItem
+                {...icon}
+                onClick={() => {
+                  onIconClick?.(icon);
+                }}
+              />
+            </GridItem>
+          );
+        })}
+      </GridList>
     </>
   );
 });
 
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 20px;
+  .title {
+    margin: 0;
+    padding: 16px;
+    font-size: 12px;
+    font-weight: normal;
+    color: rgba(0, 0, 0, 0.54);
+    text-transform: uppercase;
+  }
+`;
+
 const ListWrap = styled.div`
   display: flex;
   flex-wrap: wrap;
 `;
+
 const StyledLinearProgress = styled(LinearProgress)`
   /* for reset body margin */
 
@@ -97,7 +182,7 @@ const StyledLinearProgress = styled(LinearProgress)`
   }
 
   &.barColorPrimary {
-    background-color: #2562ff;
+    background-color: black;
   }
 `;
 
diff --git a/packages/app-icons-loader/icons-search.tsx b/packages/app-icons-loader/icons-search.tsx
@@ -7,47 +7,47 @@ export function IconSearch(props: {
   onChange: (value: string) => void;
   onSelectIconProperty: (value: any) => void;
 }) {
-  const iconPropertyList = {
-    default_size: ["Size", "16", "20", "24", "28", "32"],
-    variant: ["Variant", "Outlined", "Twotone", "Default", "Sharp"],
-  };
-  const [iconProperty, setIconProperty] = useState({
-    default_size: "Size",
-    variant: "Variant",
-  });
+  // const iconPropertyList = {
+  //   default_size: ["Size", "16", "20", "24", "28", "32"],
+  //   variant: ["Variant", "Outlined", "Twotone", "Default", "Sharp"],
+  // };
+  // const [iconProperty, setIconProperty] = useState({
+  //   default_size: "Size",
+  //   variant: "Variant",
+  // });
 
-  const BootstrapInput = withStyles((theme) => ({
-    root: {
-      "label + &": {
-        marginTop: theme.spacing(3),
-      },
-    },
-    input: {
-      fontSize: 14,
-    },
-  }))(InputBase);
+  // const BootstrapInput = withStyles((theme) => ({
+  //   root: {
+  //     "label + &": {
+  //       marginTop: theme.spacing(3),
+  //     },
+  //   },
+  //   input: {
+  //     fontSize: 14,
+  //   },
+  // }))(InputBase);
 
-  const onSelectValue = (type: string, value: any) => {
-    if (type === "size") {
-      props.onSelectIconProperty((d) => ({
-        ...d,
-        default_size: value.toLocaleLowerCase(),
-      }));
-      setIconProperty((d) => ({
-        ...d,
-        default_size: value,
-      }));
-    } else if (type === "variant") {
-      props.onSelectIconProperty((d) => ({
-        ...d,
-        variant: value.toLocaleLowerCase(),
-      }));
-      setIconProperty((d) => ({
-        ...d,
-        variant: value,
-      }));
-    }
-  };
+  // const onSelectValue = (type: string, value: any) => {
+  //   if (type === "size") {
+  //     props.onSelectIconProperty((d) => ({
+  //       ...d,
+  //       default_size: value.toLocaleLowerCase(),
+  //     }));
+  //     setIconProperty((d) => ({
+  //       ...d,
+  //       default_size: value,
+  //     }));
+  //   } else if (type === "variant") {
+  //     props.onSelectIconProperty((d) => ({
+  //       ...d,
+  //       variant: value.toLocaleLowerCase(),
+  //     }));
+  //     setIconProperty((d) => ({
+  //       ...d,
+  //       variant: value,
+  //     }));
+  //   }
+  // };
 
   return (
     <ControlsWrapper>
@@ -58,7 +58,7 @@ export function IconSearch(props: {
           onChange={(e) => props.onChange(e.target.value.toLocaleLowerCase())}
         />
       </SearchBar>
-      <Filters>
+      {/* <Filters>
         <TypeCheck>
           <StyledSelect
             classes={{ root: "root" }}
@@ -87,7 +87,7 @@ export function IconSearch(props: {
             ))}
           </StyledSelect>
         </SizeCheck>
-      </Filters>
+      </Filters> */}
     </ControlsWrapper>
   );
 }
diff --git a/packages/app-icons-loader/resources.ts b/packages/app-icons-loader/resources.ts
diff --git a/packages/app-icons-loader/search.ts b/packages/app-icons-loader/search.ts
