10146641890

Committed 29 Jul 2024 02:52PM UTC coverage: 16.038% (+0.002%) from 16.036%

Build # 10146641890

Build Type

push

github

Committed by

web-flow

Commit Message

Deprecated category column from Communities table (#8583)

* Added migration to remove `category` column from `Communities` table

* Removed older community category logic from `/updateCommunityCategory` API

* Removed `communityCategoryMap` from `/status` response

* Removed old community category filters from `communities.tsx`

* Added migration to move `category` column data from `Communities` table to `CommunityTags` table

* Update cache for active communities, instead of invalidating it after updating community

* Simplified logic for communty->category to community_tags->tag_id migration

Run Details

3592 of 21045 branches covered (17.07%)

Branch coverage included in aggregate %.

1 of 37 new or added lines in 9 files covered. (2.7%)

6 existing lines in 5 files now uncovered.

4819 of 31399 relevant lines covered (15.35%)

5.07 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/pages/communities.tsx

import {
  ChainBase,
  ChainNetwork,
  CommunityCategoryType,
} from '@hicommonwealth/shared';
import { findDenominationString } from 'helpers/findDenomination';
import useUserLoggedIn from 'hooks/useUserLoggedIn';
import numeral from 'numeral';
import 'pages/communities.scss';
import React, { useRef } from 'react';
import app from 'state';
import useFetchActiveCommunitiesQuery from 'state/api/communities/fetchActiveCommunities';
import { useFetchNodesQuery } from 'state/api/nodes';
import { getNodeById } from 'state/api/nodes/utils';
import { useManageCommunityStakeModalStore } from 'state/ui/modals';
import useUserStore from 'state/ui/user';
import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
import {
  default as ChainInfo,
  default as CommunityInfo,
} from '../../models/ChainInfo';
import { useFetchEthUsdRateQuery } from '../../state/api/communityStake/index';
import { trpc } from '../../utils/trpcClient';
import { NewCommunityCard } from '../components/CommunityCard';
import { CWDivider } from '../components/component_kit/cw_divider';
import { CWIcon } from '../components/component_kit/cw_icons/cw_icon';
import { CWText } from '../components/component_kit/cw_text';
import { CWButton } from '../components/component_kit/new_designs/CWButton';
import CWCircleMultiplySpinner from '../components/component_kit/new_designs/CWCircleMultiplySpinner';
import { CWModal } from '../components/component_kit/new_designs/CWModal';
import { CWRelatedCommunityCard } from '../components/component_kit/new_designs/CWRelatedCommunityCard';
import CreateCommunityButton from '../components/sidebar/CreateCommunityButton';
import ManageCommunityStakeModal from '../modals/ManageCommunityStakeModal/ManageCommunityStakeModal';

const buildCommunityString = (numCommunities: number) =>
  numCommunities >= 1000
    ? `${numeral(numCommunities).format('0.0a')} Communities`
    : `${numCommunities} Communities`;

// Handle mapping provided by ChainCategories table
const communityCategories = Object.values(CommunityCategoryType);
const communityNetworks = Object.keys(ChainNetwork).filter(
  (val) => val === 'ERC20',
); // We only are allowing ERC20 for now
const communityBases = Object.keys(ChainBase);

const getInitialFilterMap = (): Record<string, unknown> => {
  const filterMapCommunityCategories = communityCategories.map((c) => ({
    [c]: false,
  }));
  const filterMapCommunityBases = communityBases.map((c) => ({ [c]: false }));
  const filterMapCommunityNetworks = communityNetworks.map((c) => ({
    [c]: false,
  }));
  const allArrays = filterMapCommunityCategories.concat(
    filterMapCommunityBases,
    filterMapCommunityNetworks,
  );

  return Object.assign({}, ...allArrays);
};

const STAKE_FILTER_KEY = 'Stake';

const CommunitiesPage = () => {
  useUserLoggedIn();
  const [filterMap, setFilterMap] = React.useState<Record<string, unknown>>(
    getInitialFilterMap(),
  );
  const {
    setModeOfManageCommunityStakeModal,
    modeOfManageCommunityStakeModal,
  } = useManageCommunityStakeModalStore();

  const { data: nodes } = useFetchNodesQuery();

  const [selectedCommunity, setSelectedCommunity] =
    // @ts-expect-error <StrictNullChecks/>
    React.useState<ChainInfo>(null);

  const oneDayAgo = useRef(new Date().getTime() - 24 * 60 * 60 * 1000);

  const user = useUserStore();

  const { data: historicalPrices, isLoading: historicalPriceLoading } =
    trpc.community.getStakeHistoricalPrice.useQuery({
      past_date_epoch: oneDayAgo.current / 1000, // 24 hours ago
    });

  const handleSetFilterMap = (key: string) => {
    setFilterMap((prevState) => ({ ...prevState, [key]: !filterMap[key] }));
  };

  const { data: ethUsdRateData } = useFetchEthUsdRateQuery();
  const ethUsdRate = ethUsdRateData?.data?.data?.amount;

  const chainBaseFilter = (list: CommunityInfo[]) => {
    return list.filter((data) => {
      const chainBase =
        Object.keys(ChainBase)[Object.values(ChainBase).indexOf(data.base)];
      // Converts chain.base into a ChainBase key to match our filterMap keys
      return filterMap[chainBase];
    });
  };

  const communityNetworkFilter = (list: CommunityInfo[]) => {
    return list.filter((data) => {
      const communityNetwork =
        Object.keys(ChainNetwork)[
          Object.values(ChainNetwork).indexOf(data.network)
        ]; // Converts chain.base into a ChainBase key to match our filterMap keys

      if (communityNetworks.includes(communityNetwork)) {
        return filterMap[communityNetwork];
      } else {
        return false;
      }
    });
  };

  const communityCategoryFilter = (communities: ChainInfo[]) => {
    return communities.filter((community) =>
      community.CommunityTags.some((tag) => filterMap[tag.name] === true),
    );
  };

  const sortCommunities = (list: CommunityInfo[]) => {
    let filteredList = list;

    if (Object.values(filterMap).includes(true)) {
      // Handle Overlaps
      if (communityBases.filter((val) => filterMap[val]).length > 1) {
        filteredList = [];
      }

      if (communityNetworks.filter((val) => filterMap[val]).length > 1) {
        filteredList = [];
      }

      // Filter for ChainBase
      if (communityBases.filter((base) => filterMap[base]).length > 0) {
        filteredList = chainBaseFilter(filteredList);
      }

      // Filter for ChainNetwork
      if (
        communityNetworks.filter((network) => filterMap[network]).length > 0
      ) {
        filteredList = communityNetworkFilter(filteredList);
      }

      // Filter for ChainCategory
      if (communityCategories.filter((cat) => filterMap[cat]).length > 0) {
        filteredList = communityCategoryFilter(filteredList);
      }
    }

    // @ts-expect-error <StrictNullChecks/>
    const historicalPriceMap: Map<string, string> =
      historicalPriceLoading || !historicalPrices
        ? null
        : new Map(
            Object.entries(
              historicalPrices?.reduce((acc, { community_id, old_price }) => {
                acc[community_id] = old_price;
                return acc;
              }, {}),
            ),
          );

    // Filter by recent thread activity
    const res = filteredList
      .sort((a, b) => {
        const threadCountA = app.recentActivity.getCommunityThreadCount(a.id);
        const threadCountB = app.recentActivity.getCommunityThreadCount(b.id);
        return threadCountB - threadCountA;
      })
      .map((community: CommunityInfo, i) => {
        // allow user to buy stake if they have a connected address that matches this community's base chain
        const canBuyStake = !!user.addresses.find?.(
          (address) => address?.community?.base === community?.base,
        );

        return (
          <CWRelatedCommunityCard
            key={i}
            community={community}
            memberCount={community.addressCount}
            threadCount={community.threadCount}
            canBuyStake={canBuyStake}
            onStakeBtnClick={() => setSelectedCommunity(community)}
            ethUsdRate={ethUsdRate}
            historicalPrice={historicalPriceMap?.get(community.id)}
            onlyShowIfStakeEnabled={!!filterMap[STAKE_FILTER_KEY]}
          />
        );
      });

    return res;
  };

  const { data: activeCommunities, isLoading } =
    useFetchActiveCommunitiesQuery();
  const sortedCommunities = activeCommunities
    ? sortCommunities(
        activeCommunities.communities.map((c: any) =>
          CommunityInfo.fromJSON({
            ...c,
            ChainNode: getNodeById(c.chain_node_id, nodes),
          }),
        ),
      )
    : [];

  return (
    <CWPageLayout>
      <div className="CommunitiesPage">
        <div className="header-section">
          <div className="description">
            <CWText type="h2" fontWeight="semiBold">
              Explore communities
            </CWText>
            <div className="actions">
              <CWText type="caption" className="communities-count">
                {activeCommunities &&
                  buildCommunityString(activeCommunities.totalCommunitiesCount)}
              </CWText>
              <CreateCommunityButton />
            </div>
          </div>
          <div className="filters">
            <CWIcon iconName="funnelSimple" />
            <CWButton
              label={STAKE_FILTER_KEY}
              buttonHeight="sm"
              buttonType={filterMap[STAKE_FILTER_KEY] ? 'primary' : 'secondary'}
              onClick={() => {
                handleSetFilterMap(STAKE_FILTER_KEY);
              }}
              iconLeft="coins"
            />
            <CWDivider isVertical />
            {communityCategories.map((cat, i) => {
              return (
                <CWButton
                  key={i}
                  label={cat}
                  buttonHeight="sm"
                  buttonType={filterMap[cat] ? 'primary' : 'secondary'}
                  onClick={() => {
                    handleSetFilterMap(cat);
                  }}
                />
              );
            })}
            {communityNetworks.map((network, i) => {
              return (
                <CWButton
                  key={i}
                  label={network}
                  buttonHeight="sm"
                  buttonType={filterMap[network] ? 'primary' : 'secondary'}
                  onClick={() => {
                    handleSetFilterMap(network);
                  }}
                />
              );
            })}
            {communityBases.map((base, i) => {
              return (
                <CWButton
                  key={i}
                  label={base}
                  buttonHeight="sm"
                  buttonType={filterMap[base] ? 'primary' : 'secondary'}
                  onClick={() => {
                    handleSetFilterMap(base);
                  }}
                />
              );
            })}
          </div>
        </div>
        {isLoading ? (
          <CWCircleMultiplySpinner />
        ) : (
          <div className="communities-list">
            {sortedCommunities}
            <NewCommunityCard />
          </div>
        )}
        <CWModal
          size="small"
          content={
            <ManageCommunityStakeModal
              mode={modeOfManageCommunityStakeModal}
              // @ts-expect-error <StrictNullChecks/>
              onModalClose={() => setModeOfManageCommunityStakeModal(null)}
              community={selectedCommunity}
              denomination={
                findDenominationString(selectedCommunity?.id) || 'ETH'
              }
            />
          }
          // @ts-expect-error <StrictNullChecks/>
          onClose={() => setModeOfManageCommunityStakeModal(null)}
          open={!!modeOfManageCommunityStakeModal}
        />
      </div>
    </CWPageLayout>
  );
};

export default CommunitiesPage;

1	import {
2	ChainBase,
3	ChainNetwork,
4	CommunityCategoryType,
5	} from '@hicommonwealth/shared';
6	import { findDenominationString } from 'helpers/findDenomination';
7	import useUserLoggedIn from 'hooks/useUserLoggedIn';
8	import numeral from 'numeral';
9	import 'pages/communities.scss';
10	import React, { useRef } from 'react';
11	import app from 'state';
12	import useFetchActiveCommunitiesQuery from 'state/api/communities/fetchActiveCommunities';
13	import { useFetchNodesQuery } from 'state/api/nodes';
14	import { getNodeById } from 'state/api/nodes/utils';
15	import { useManageCommunityStakeModalStore } from 'state/ui/modals';
16	import useUserStore from 'state/ui/user';
17	import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
18	import {
19	default as ChainInfo,
20	default as CommunityInfo,
21	} from '../../models/ChainInfo';
22	import { useFetchEthUsdRateQuery } from '../../state/api/communityStake/index';
23	import { trpc } from '../../utils/trpcClient';
24	import { NewCommunityCard } from '../components/CommunityCard';
25	import { CWDivider } from '../components/component_kit/cw_divider';
26	import { CWIcon } from '../components/component_kit/cw_icons/cw_icon';
27	import { CWText } from '../components/component_kit/cw_text';
28	import { CWButton } from '../components/component_kit/new_designs/CWButton';
29	import CWCircleMultiplySpinner from '../components/component_kit/new_designs/CWCircleMultiplySpinner';
30	import { CWModal } from '../components/component_kit/new_designs/CWModal';
31	import { CWRelatedCommunityCard } from '../components/component_kit/new_designs/CWRelatedCommunityCard';
32	import CreateCommunityButton from '../components/sidebar/CreateCommunityButton';
33	import ManageCommunityStakeModal from '../modals/ManageCommunityStakeModal/ManageCommunityStakeModal';
34
35	const buildCommunityString = (numCommunities: number) =>	×
36	numCommunities >= 1000	×
37	? `${numeral(numCommunities).format('0.0a')} Communities`
38	: `${numCommunities} Communities`;
39
40	// Handle mapping provided by ChainCategories table
UNCOV 41	const communityCategories = Object.values(CommunityCategoryType);	×
42	const communityNetworks = Object.keys(ChainNetwork).filter(	×
43	(val) => val === 'ERC20',	×
44	); // We only are allowing ERC20 for now
45	const communityBases = Object.keys(ChainBase);	×
46
47	const getInitialFilterMap = (): Record<string, unknown> => {	×
48	const filterMapCommunityCategories = communityCategories.map((c) => ({	×
49	[c]: false,
50	}));
51	const filterMapCommunityBases = communityBases.map((c) => ({ [c]: false }));	×
52	const filterMapCommunityNetworks = communityNetworks.map((c) => ({	×
53	[c]: false,
54	}));
55	const allArrays = filterMapCommunityCategories.concat(	×
56	filterMapCommunityBases,
57	filterMapCommunityNetworks,
58	);
59
60	return Object.assign({}, ...allArrays);	×
61	};
62
63	const STAKE_FILTER_KEY = 'Stake';	×
64
65	const CommunitiesPage = () => {	×
66	useUserLoggedIn();	×
67	const [filterMap, setFilterMap] = React.useState<Record<string, unknown>>(	×
68	getInitialFilterMap(),
69	);
70	const {
71	setModeOfManageCommunityStakeModal,
72	modeOfManageCommunityStakeModal,
73	} = useManageCommunityStakeModalStore();	×
74
75	const { data: nodes } = useFetchNodesQuery();	×
76
77	const [selectedCommunity, setSelectedCommunity] =
78	// @ts-expect-error <StrictNullChecks/>
79	React.useState<ChainInfo>(null);	×
80
81	const oneDayAgo = useRef(new Date().getTime() - 24 * 60 * 60 * 1000);	×
82
83	const user = useUserStore();	×
84
85	const { data: historicalPrices, isLoading: historicalPriceLoading } =
86	trpc.community.getStakeHistoricalPrice.useQuery({	×
87	past_date_epoch: oneDayAgo.current / 1000, // 24 hours ago
88	});
89
90	const handleSetFilterMap = (key: string) => {	×
91	setFilterMap((prevState) => ({ ...prevState, [key]: !filterMap[key] }));	×
92	};
93
94	const { data: ethUsdRateData } = useFetchEthUsdRateQuery();	×
95	const ethUsdRate = ethUsdRateData?.data?.data?.amount;	×
96
97	const chainBaseFilter = (list: CommunityInfo[]) => {	×
98	return list.filter((data) => {	×
99	const chainBase =
100	Object.keys(ChainBase)[Object.values(ChainBase).indexOf(data.base)];	×
101	// Converts chain.base into a ChainBase key to match our filterMap keys
102	return filterMap[chainBase];	×
103	});
104	};
105
106	const communityNetworkFilter = (list: CommunityInfo[]) => {	×
107	return list.filter((data) => {	×
108	const communityNetwork =
109	Object.keys(ChainNetwork)[	×
110	Object.values(ChainNetwork).indexOf(data.network)
111	]; // Converts chain.base into a ChainBase key to match our filterMap keys
112
113	if (communityNetworks.includes(communityNetwork)) {	×
114	return filterMap[communityNetwork];	×
115	} else {
116	return false;	×
117	}
118	});
119	};
120
NEW 121	const communityCategoryFilter = (communities: ChainInfo[]) => {	×
NEW 122	return communities.filter((community) =>	×
NEW 123	community.CommunityTags.some((tag) => filterMap[tag.name] === true),	×
124	);
125	};
126
127	const sortCommunities = (list: CommunityInfo[]) => {	×
128	let filteredList = list;	×
129
130	if (Object.values(filterMap).includes(true)) {	×
131	// Handle Overlaps
132	if (communityBases.filter((val) => filterMap[val]).length > 1) {	×
133	filteredList = [];	×
134	}
135
136	if (communityNetworks.filter((val) => filterMap[val]).length > 1) {	×
137	filteredList = [];	×
138	}
139
140	// Filter for ChainBase
141	if (communityBases.filter((base) => filterMap[base]).length > 0) {	×
142	filteredList = chainBaseFilter(filteredList);	×
143	}
144
145	// Filter for ChainNetwork
146	if (	×
147	communityNetworks.filter((network) => filterMap[network]).length > 0	×
148	) {
149	filteredList = communityNetworkFilter(filteredList);	×
150	}
151
152	// Filter for ChainCategory
153	if (communityCategories.filter((cat) => filterMap[cat]).length > 0) {	×
154	filteredList = communityCategoryFilter(filteredList);	×
155	}
156	}
157
158	// @ts-expect-error <StrictNullChecks/>
159	const historicalPriceMap: Map<string, string> =
160	historicalPriceLoading \|\| !historicalPrices	×
161	? null
162	: new Map(
163	Object.entries(
164	historicalPrices?.reduce((acc, { community_id, old_price }) => {
165	acc[community_id] = old_price;	×
166	return acc;	×
167	}, {}),
168	),
169	);
170
171	// Filter by recent thread activity
172	const res = filteredList	×
173	.sort((a, b) => {
174	const threadCountA = app.recentActivity.getCommunityThreadCount(a.id);	×
175	const threadCountB = app.recentActivity.getCommunityThreadCount(b.id);	×
176	return threadCountB - threadCountA;	×
177	})
178	.map((community: CommunityInfo, i) => {
179	// allow user to buy stake if they have a connected address that matches this community's base chain
180	const canBuyStake = !!user.addresses.find?.(	×
181	(address) => address?.community?.base === community?.base,	×
182	);
183
184	return (	×
185	<CWRelatedCommunityCard
186	key={i}
187	community={community}
188	memberCount={community.addressCount}
189	threadCount={community.threadCount}
190	canBuyStake={canBuyStake}
191	onStakeBtnClick={() => setSelectedCommunity(community)}	×
192	ethUsdRate={ethUsdRate}
193	historicalPrice={historicalPriceMap?.get(community.id)}
194	onlyShowIfStakeEnabled={!!filterMap[STAKE_FILTER_KEY]}
195	/>
196	);
197	});
198
199	return res;	×
200	};
201
202	const { data: activeCommunities, isLoading } =
203	useFetchActiveCommunitiesQuery();	×
204	const sortedCommunities = activeCommunities	×
205	? sortCommunities(
206	activeCommunities.communities.map((c: any) =>
207	CommunityInfo.fromJSON({	×
208	...c,
209	ChainNode: getNodeById(c.chain_node_id, nodes),
210	}),
211	),
212	)
213	: [];
214
215	return (	×
216	<CWPageLayout>
217	<div className="CommunitiesPage">
218	<div className="header-section">
219	<div className="description">
220	<CWText type="h2" fontWeight="semiBold">
221	Explore communities
222	</CWText>
223	<div className="actions">
224	<CWText type="caption" className="communities-count">
225	{activeCommunities &&	×
226	buildCommunityString(activeCommunities.totalCommunitiesCount)}
227	</CWText>
228	<CreateCommunityButton />
229	</div>
230	</div>
231	<div className="filters">
232	<CWIcon iconName="funnelSimple" />
233	<CWButton
234	label={STAKE_FILTER_KEY}
235	buttonHeight="sm"
236	buttonType={filterMap[STAKE_FILTER_KEY] ? 'primary' : 'secondary'}	×
237	onClick={() => {
238	handleSetFilterMap(STAKE_FILTER_KEY);	×
239	}}
240	iconLeft="coins"
241	/>
242	<CWDivider isVertical />
243	{communityCategories.map((cat, i) => {
244	return (	×
245	<CWButton
246	key={i}
247	label={cat}
248	buttonHeight="sm"
249	buttonType={filterMap[cat] ? 'primary' : 'secondary'}	×
250	onClick={() => {
251	handleSetFilterMap(cat);	×
252	}}
253	/>
254	);
255	})}
256	{communityNetworks.map((network, i) => {
257	return (	×
258	<CWButton
259	key={i}
260	label={network}
261	buttonHeight="sm"
262	buttonType={filterMap[network] ? 'primary' : 'secondary'}	×
263	onClick={() => {
264	handleSetFilterMap(network);	×
265	}}
266	/>
267	);
268	})}
269	{communityBases.map((base, i) => {
270	return (	×
271	<CWButton
272	key={i}
273	label={base}
274	buttonHeight="sm"
275	buttonType={filterMap[base] ? 'primary' : 'secondary'}	×
276	onClick={() => {
277	handleSetFilterMap(base);	×
278	}}
279	/>
280	);
281	})}
282	</div>
283	</div>
284	{isLoading ? (	×
285	<CWCircleMultiplySpinner />
286	) : (
287	<div className="communities-list">
288	{sortedCommunities}
289	<NewCommunityCard />
290	</div>
291	)}
292	<CWModal
293	size="small"
294	content={
295	<ManageCommunityStakeModal
296	mode={modeOfManageCommunityStakeModal}
297	// @ts-expect-error <StrictNullChecks/>
298	onModalClose={() => setModeOfManageCommunityStakeModal(null)}	×
299	community={selectedCommunity}
300	denomination={
301	findDenominationString(selectedCommunity?.id) \|\| 'ETH'	×
302	}
303	/>
304	}
305	// @ts-expect-error <StrictNullChecks/>
306	onClose={() => setModeOfManageCommunityStakeModal(null)}	×
307	open={!!modeOfManageCommunityStakeModal}
308	/>
309	</div>
310	</CWPageLayout>
311	);
312	};
313
314	export default CommunitiesPage;

hicommonwealth / commonwealth / 10146641890

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous