feat: upload files and management

src/routes/home/index.js

@@ -14,6 +14,7 @@ import ChannelSettingModal from "../../common/component/ChannelSetting";
 
 import ChatIcon from "../../assets/icons/chat.svg?url";
 import ContactIcon from "../../assets/icons/contact.svg?url";
+import FolderIcon from "../../assets/icons/folder.svg?url";
 // import NotificationHub from "../../common/component/NotificationHub";
 
 export default function HomePage() {
@@ -25,7 +26,7 @@ export default function HomePage() {
       ui: store.ui,
     };
   });
-  const { data, loading, error, success } = usePreload();
+  const { data, loading } = usePreload();
   const toggleExpand = () => {
     dispatch(toggleMenuExpand());
   };
@@ -58,6 +59,12 @@ export default function HomePage() {
                 </span>
               )}
             </NavLink>
+            <NavLink className="link" to={"/files"}>
+              <img src={FolderIcon} alt="folder icon" />{" "}
+              {menuExpand && (
+                <span className="animate__animated animate__fadeIn">Files</span>
+              )}
+            </NavLink>
           </nav>
           <div className="divider"></div>
           {/* <Tools expand={menuExpand} /> */}

src/routes/resources/Filter.js

@@ -0,0 +1,18 @@
+// import React from "react";
+import styled from "styled-components";
+const Styled = styled.div`
+  /* padding: 20px 0; */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  .filter {
+  }
+`;
+
+export default function Filter() {
+  return (
+    <Styled>
+      <div className="filter">filter item</div>
+    </Styled>
+  );
+}

src/routes/resources/Search.js

@@ -0,0 +1,8 @@
+// import React from "react";
+import styled from "styled-components";
+const Styled = styled.div`
+  padding: 6px 16px;
+`;
+export default function Search() {
+  return <Styled>s</Styled>;
+}

src/routes/resources/View.js

@@ -0,0 +1,58 @@
+// import React from 'react'
+import styled from "styled-components";
+import IconList from "../../assets/icons/file.list.svg";
+import IconGrid from "../../assets/icons/file.grid.svg";
+const Styled = styled.ul`
+  display: flex;
+  border: 1px solid #d0d5dd;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border-radius: 8px;
+  box-sizing: border-box;
+
+  .view {
+    cursor: pointer;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+  &.item .item,
+  &.grid .grid {
+    border: 1px solid #52edff;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+    border-radius: 8px;
+    svg {
+      transition: all 0.2s ease;
+      path {
+        fill: #52edff;
+      }
+    }
+  }
+`;
+export const Views = {
+  item: "item",
+  grid: "grid",
+};
+export default function View({ view = Views.item, toggleView }) {
+  const handleChangeView = (evt) => {
+    const { view: clickView } = evt.currentTarget.dataset;
+    if (clickView == view) return;
+    toggleView();
+  };
+  return (
+    <Styled className={view}>
+      <li
+        className="view item"
+        data-view={Views.item}
+        onClick={handleChangeView}
+      >
+        <IconList />
+      </li>
+      <li
+        className="view grid"
+        data-view={Views.grid}
+        onClick={handleChangeView}
+      >
+        <IconGrid />
+      </li>
+    </Styled>
+  );
+}

src/routes/resources/index.js

@@ -0,0 +1,64 @@
+import { useState, useEffect, useRef } from "react";
+import Styled from "./styled";
+import { useSelector } from "react-redux";
+// import waterfall from "waterfall.js/src/waterfall";
+import View, { Views } from "./View";
+import Search from "./Search";
+import Filter from "./Filter";
+import FileBox from "../../common/component/FileBox";
+export default function ResourceManagement() {
+  const listContainerRef = useRef(null);
+  const [view, setView] = useState(Views.item);
+  const { fileMessages, message } = useSelector((store) => {
+    return { message: store.message, fileMessages: store.fileMessage };
+  });
+
+  const toggleView = () => {
+    setView((prev) => (prev == Views.item ? Views.grid : Views.item));
+  };
+  // useEffect(() => {
+  //   if (view == Views.grid && listContainerRef) {
+  //     const wtf = waterfall(listContainerRef.current);
+  //     console.log("wtf", wtf);
+  //     waterfall
+  //   }
+  // }, [view]);
+
+  console.log("files", fileMessages);
+  return (
+    <Styled>
+      <Search />
+      <div className="divider"></div>
+      <div className="opts">
+        <Filter />
+        <View view={view} toggleView={toggleView} />
+      </div>
+      <div className={`list ${view}`} ref={listContainerRef}>
+        {fileMessages.map((id) => {
+          const data = message[id];
+          if (!data) return null;
+          const {
+            mid,
+            content,
+            created_at,
+            from_uid,
+            properties: { name, file_type, size },
+          } = data;
+          return (
+            <FileBox
+              preview={view == Views.grid}
+              flex={view == Views.item}
+              key={mid}
+              file_type={file_type}
+              content={content}
+              created_at={created_at}
+              from_uid={from_uid}
+              size={size}
+              name={name}
+            />
+          );
+        })}
+      </div>
+    </Styled>
+  );
+}

src/routes/resources/styled.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+const Styled = styled.div`
+  height: 100vh;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 16px;
+  .opts {
+    padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .list {
+    height: 100%;
+    overflow-y: scroll;
+    width: 100%;
+    gap: 8px;
+    &.item {
+      display: flex;
+      flex-direction: column;
+      /* align-items: flex-start; */
+    }
+    &.grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: auto;
+    }
+  }
+`;
+
+export default Styled;