Feat implement filter to activity feeds 4076

packages/kintsugi-next/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@interlay/monetary-js": "^0.5.3",
     "@next/env": "^13.3.0",
-    "@osn/icons": "^1.85.0",
+    "@osn/icons": "^1.86.0",
     "@svgr/webpack": "^7.0.0",
     "bignumber.js": "^9.0.2",
     "clsx": "^1.2.1",

packages/next-common/components/fellowship/core/feeds/container.jsx

@@ -1,47 +1,80 @@
-import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
+import { FilterContainer } from "next-common/components/styled/containers/titleContainer";
 import FellowshipCoreFeedsList from "./list";
-import Select from "next-common/components/select";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import useEventFilter from "next-common/hooks/fellowship/useEventFilter";
+import SearchBox from "next-common/components/preImages/searchBox";
+import { useRouter } from "next/router";
+import { objectToQueryString } from "next-common/utils/url";
+import FilterButton from "next-common/components/filterButton";
 
-export default function FellowshipCoreFeedsContainer({ feeds = {} }) {
-  const [event, setEvent] = useState("");
+const EVENT_CONTENTS = {
+  ParamsChanged: "ParamsChanged",
+  ActiveChanged: "ActiveChanged",
+  Inducted: "Inducted",
+  Offboarded: "Offboarded",
+  Imported: "Imported",
+  Promoted: "Promoted",
+  Demoted: "Demoted",
+  Proven: "Proven",
+  Requested: "Requested",
+  EvidenceJudged: "EvidenceJudged",
+};
 
+export default function FellowshipCoreFeedsContainer({ feeds = {} }) {
+  const router = useRouter();
+  const { who: queryWho, event: queryEvent } = router.query;
+  const [searchValue, setSearchValue] = useState(queryWho || "");
+  const [loading, setLoading] = useState(false);
+  const { event, component } = useEventFilter(
+    Object.values(EVENT_CONTENTS),
+    queryEvent,
+  );
   // TODO: core feeds, event filter options
-  const options = [
-    {
-      label: "All",
-      value: "",
-    },
-  ];
+  useEffect(() => {
+    // Page loading completed
+    setLoading(false);
+  }, [router]);
+
+  const onFilter = () => {
+    const queryObject = {
+      event,
+      who: searchValue,
+    };
+    let query = objectToQueryString(queryObject);
+    router.push({ pathname: "/fellowship/core/feeds", query });
+    setLoading(true);
+  };
 
   return (
     <>
-      <TitleContainer>
-        <span>
+      <FilterContainer className="max-md:flex-col max-md:gap-2 md:flex-row md:items-center md:justify-between mb-4 pr-6">
+        <div>
           Feeds
           {!!feeds.total && (
             <span className="text-textTertiary text14Medium ml-1">
               {feeds.total}
             </span>
           )}
-        </span>
+        </div>
 
         {/* TODO: event filter */}
-        {false && (
-          <div className="text12Medium text-textPrimary flex items-center gap-x-2">
-            <div>Event</div>
-            <Select
-              className="w-20"
-              small
-              value={event}
-              options={options}
-              onChange={(option) => {
-                setEvent(option.value);
-              }}
-            />
-          </div>
-        )}
-      </TitleContainer>
+        <div className="flex max-md:flex-col md:flex-row md:items-center max-md:w-full gap-2">
+          {component}
+          <SearchBox
+            value={searchValue}
+            setValue={setSearchValue}
+            placeholder={"Search address"}
+          />
+          <FilterButton
+            className={"max-md:w-full"}
+            loading={loading}
+            size="small"
+            onClick={onFilter}
+          >
+            Filter
+          </FilterButton>
+        </div>
+      </FilterContainer>
       <div className="space-y-4 mt-4">
         <FellowshipCoreFeedsList feeds={feeds} />
       </div>

packages/next-common/components/fellowship/salary/feeds/container.jsx

@@ -1,12 +1,74 @@
-import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
+import { FilterContainer } from "next-common/components/styled/containers/titleContainer";
 import FellowshipSalaryFeedsList from "next-common/components/fellowship/salary/feeds/list";
+import SearchBox from "next-common/components/preImages/searchBox";
+import FilterButton from "next-common/components/filterButton";
+import { useEffect, useState } from "react";
+import useEventFilter from "next-common/hooks/fellowship/useEventFilter";
+import { useRouter } from "next/router";
+import { objectToQueryString } from "next-common/utils/url";
+
+const EVENT_CONTENTS = {
+  CycleStarted: "CycleStarted",
+  Inducted: "Inducted",
+  Registered: "Registered",
+  Paid: "Paid",
+};
 
 export default function FellowshipSalaryFeedsContainer({ feeds = {} }) {
+  const router = useRouter();
+  const { who: queryWho, event: queryEvent } = router.query;
+  const [searchValue, setSearchValue] = useState(queryWho || "");
+  const [loading, setLoading] = useState(false);
+  const { event, component } = useEventFilter(
+    Object.values(EVENT_CONTENTS),
+    queryEvent,
+  );
+  // TODO: core feeds, event filter options
+  useEffect(() => {
+    // Page loading completed
+    setLoading(false);
+  }, [router]);
+
+  const onFilter = () => {
+    const queryObject = {
+      event,
+      who: searchValue,
+    };
+    let query = objectToQueryString(queryObject);
+    router.push({ pathname: "/fellowship/salary/feeds", query });
+    setLoading(true);
+  };
+
   return (
     <>
-      <TitleContainer>
-        <span>Feeds</span>
-      </TitleContainer>
+      <FilterContainer className="max-md:flex-col max-md:gap-2 md:flex-row md:items-center md:justify-between mb-4 pr-6">
+        <div>
+          Feeds
+          {!!feeds.total && (
+            <span className="text-textTertiary text14Medium ml-1">
+              {feeds.total}
+            </span>
+          )}
+        </div>
+
+        {/* TODO: event filter */}
+        <div className="flex max-md:flex-col md:flex-row md:items-center max-md:w-full gap-2">
+          {component}
+          <SearchBox
+            value={searchValue}
+            setValue={setSearchValue}
+            placeholder={"Search address"}
+          />
+          <FilterButton
+            className={"max-md:w-full"}
+            loading={loading}
+            size="small"
+            onClick={onFilter}
+          >
+            Filter
+          </FilterButton>
+        </div>
+      </FilterContainer>
 
       <div className="space-y-4 mt-4">
         <FellowshipSalaryFeedsList feeds={feeds} />

packages/next-common/components/filterButton.jsx

@@ -0,0 +1,10 @@
+import PrimaryButton from "next-common/lib/button/primary";
+import { SystemFilter } from "@osn/icons/subsquare";
+
+export default function FilterButton(props) {
+  return (
+    <PrimaryButton {...props} iconLeft={<SystemFilter className="w-4 h-4" />}>
+      Filter
+    </PrimaryButton>
+  );
+}

packages/next-common/components/preImages/searchBox.js

@@ -29,7 +29,11 @@ const Wrapper = styled.div`
   background: var(--neutral100);
 `;
 
-export default function SearchBox({ value, setValue }) {
+export default function SearchBox({
+  value,
+  setValue,
+  placeholder = "Search hash",
+}) {
   return (
     <Wrapper className="max-md:!w-full">
       <div>
@@ -41,7 +45,7 @@ export default function SearchBox({ value, setValue }) {
       </div>
       <Input
         value={value}
-        placeholder="Search hash"
+        placeholder={placeholder}
         onChange={(e) => setValue(e.target.value)}
       />
     </Wrapper>

packages/next-common/components/styled/containers/titleContainer.js

@@ -1,6 +1,16 @@
 import styled from "styled-components";
 import { GreyPanel } from "./greyPanel";
 
+export const FilterContainer = styled.div`
+  display: flex;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--textPrimary);
+  padding-left: 24px;
+  padding-right: 24px;
+`;
+
 // used for card titles, list page titles
 export const TitleContainer = styled.div`
   display: flex;

packages/next-common/hooks/fellowship/useEventFilter.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import Select from "next-common/components/select";
+
+export default function useEventFilter(events = [],curEvent) {
+  const options = (events || []).map((event) => ({
+    label: String(event),
+    value: event,
+  }));
+
+  options.unshift({
+    label: "All",
+    value: null,
+  });
+
+  const [event, setEvent] = useState(curEvent || options[0].value);
+
+
+  const component = (
+    <div className="text12Medium text-textPrimary flex items-center gap-x-2">
+      <div>Event</div>
+      <Select
+        className="w-40"
+        small
+        value={event}
+        options={options}
+        onChange={(option) => {
+          setEvent(option.value);
+        }}
+      />
+    </div>
+  );
+
+  return {
+    event,
+    component,
+  };
+}

packages/next-common/package.json

@@ -16,7 +16,7 @@
     "@interlay/monetary-js": "0.5.4",
     "@mimirdev/apps-inject": "^0.2.0",
     "@mimirdev/apps-sdk": "^0.1.0",
-    "@osn/icons": "^1.85.0",
+    "@osn/icons": "^1.86.0",
     "@osn/polkadot-react-identicon": "^1.0.8",
     "@osn/previewer": "^1.3.5",
     "@osn/provider-options": "1.1.0",

packages/next-common/utils/url.js

@@ -13,3 +13,13 @@ export function removeTrailingSlash(domain = "") {
 
   return domain;
 }
+
+export function objectToQueryString(obj){
+  const searchParams = new URLSearchParams();
+  Object.keys(obj).forEach((key) => {
+    if(obj[key]){
+      searchParams.append(key, obj[key]);
+    }
+  });
+  return searchParams.toString();
+}

packages/next/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@next/env": "^13.3.0",
-    "@osn/icons": "^1.85.0",
+    "@osn/icons": "^1.86.0",
     "@svgr/webpack": "^7.0.0",
     "bignumber.js": "^9.0.2",
     "chartjs-plugin-gradient": "^0.6.1",

packages/next/pages/fellowship/core/feeds.js

@@ -18,14 +18,20 @@ export default function FellowshipCoreFeedsPage({ fellowshipCoreFeeds }) {
 }
 
 export const getServerSideProps = withCommonProps(async (context) => {
-  const { page = 0 } = context.query;
-
+  const { page = 0, event = null, who = null } = context.query;
+  const query = {
+    page,
+    page_size: defaultPageSize,
+  };
+  if (event) {
+    Object.assign(query, { event });
+  }
+  if (who) {
+    Object.assign(query, { who });
+  }
   const [tracksProps, { result: fellowshipCoreFeeds }] = await Promise.all([
     fetchOpenGovTracksProps(),
-    nextApi.fetch(fellowshipCoreFeedsApiUri, {
-      page,
-      page_size: defaultPageSize,
-    }),
+    nextApi.fetch(fellowshipCoreFeedsApiUri, query),
   ]);
 
   return {

packages/next/pages/fellowship/salary/feeds.js

@@ -14,14 +14,21 @@ export default function FellowshipSalaryFeedsPage({ fellowshipSalaryFeeds }) {
 
 export const getServerSideProps = withFellowshipSalaryCommonProps(
   async (context) => {
-    const { page = 0 } = context.query;
+    const { page = 0, event = null, who = null } = context.query;
+    const query = {
+      page,
+      page_size: defaultPageSize,
+    };
+    if (event) {
+      Object.assign(query, { event });
+    }
+    if (who) {
+      Object.assign(query, { who });
+    }
 
     const { result: fellowshipSalaryFeeds } = await nextApi.fetch(
       "fellowship/salary/feeds",
-      {
-        page,
-        page_size: defaultPageSize,
-      },
+      query,
     );
 
     return {