Removed desription field from campaign grids (#1078)

* removed: descrpiption field from campaign lists and grids as it is not useful in non-formatted way * added; campaigns are now shuffled for fairer order on main screen * fixed: lint errors Co-authored-by: quantum-grit <[email protected]>
podkrepi-bg · Nov 1, 2022 · c47c96e · c47c96e
1 parent 33c6f9a
commit c47c96e
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 34 deletions.
diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json
@@ -15,7 +15,7 @@
   "coordinator": "Кoординатор",
   "organizer": "Организатор",
   "beneficiary": "Бенефициент",
-  "campaignType": "Вид на капманията",
+  "campaignType": "Вид на кампанията",
   "description": "Описание",
   "targetAmount": "Целева сума",
   "donationsAmount": "Събрани средства",

diff --git a/src/common/util/shuffle.ts b/src/common/util/shuffle.ts
@@ -0,0 +1,6 @@
+export function shuffleArray(array: unknown[]) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[array[i], array[j]] = [array[j], array[i]]
+  }
+}
diff --git a/src/components/auth/profile/MyCampaignsTable.tsx b/src/components/auth/profile/MyCampaignsTable.tsx
@@ -14,7 +14,6 @@ import {
   DisplayBlockedAmount,
   DisplayCoordinator,
   DisplayCurrentAmount,
-  DisplayExpandableDescription,
   DisplayOrganizer,
   DisplayReachedAmount,
 } from 'components/campaigns/grid/CampaignGrid'
@@ -124,14 +123,6 @@ export default function MyCampaingsTable() {
       width: 250,
       renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}</>,
     },
-    {
-      field: 'description',
-      headerName: t('campaigns:description'),
-      ...commonProps,
-      align: 'left',
-      width: 350,
-      renderCell: DisplayExpandableDescription,
-    },
     {
       field: 'reachedAmount',
       headerName: t('campaigns:donationsAmount'),

diff --git a/src/components/auth/profile/MyDonatedToCampaignsTable.tsx b/src/components/auth/profile/MyDonatedToCampaignsTable.tsx
@@ -10,16 +10,14 @@ import Link from 'components/common/Link'
 import {
   DisplayBeneficiary,
   DisplayCoordinator,
-  DisplayCurrentAmount,
-  DisplayExpandableDescription,
   DisplayOrganizer,
   DisplayReachedAmount,
 } from 'components/campaigns/grid/CampaignGrid'
 
 export default function MyDonatedToCampaignTable() {
   const { t, i18n } = useTranslation()
   const locale = i18n.language == 'bg' ? bg : enUS
-  const { data = [], refetch } = useUserDonationsCampaigns()
+  const { data = [] } = useUserDonationsCampaigns()
   console.log(data)
   const commonProps: Partial<GridColDef> = {
     align: 'left',
@@ -90,14 +88,6 @@ export default function MyDonatedToCampaignTable() {
       width: 280,
       renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}</>,
     },
-    {
-      field: 'description',
-      headerName: t('campaigns:description'),
-      ...commonProps,
-      align: 'left',
-      width: 380,
-      renderCell: DisplayExpandableDescription,
-    },
     {
       field: 'reachedAmount',
       headerName: t('campaigns:donationsAmount'),

diff --git a/src/components/campaigns/CampaignFilter.tsx b/src/components/campaigns/CampaignFilter.tsx
@@ -21,6 +21,7 @@ import {
   VolunteerActivism,
 } from '@mui/icons-material'
 import useMobile from 'common/hooks/useMobile'
+import { shuffleArray } from 'common/util/shuffle'
 
 const PREFIX = 'CampaignFilter'
 
@@ -75,6 +76,11 @@ export default function CampaignFilter() {
   const { t } = useTranslation()
   const { mobile } = useMobile()
   const { data: campaigns, isLoading } = useCampaignList()
+
+  // NOTE: this sorts the campaigns so that each gets its fair chance to be on top row
+  // TODO: add filters&sorting of campaigns so people can select based on personal preferences
+  if (campaigns) shuffleArray(campaigns)
+
   const [selectedCategory, setSelectedCategory] = useState<string>('ALL')
 
   const campaignToShow = useMemo<CampaignResponse[]>(() => {

diff --git a/src/components/campaigns/grid/CampaignGrid.tsx b/src/components/campaigns/grid/CampaignGrid.tsx
@@ -12,7 +12,6 @@ import { AdminCampaignResponse } from 'gql/campaigns'
 import Link from 'components/common/Link'
 import { useCampaignAdminList } from 'common/hooks/campaigns'
 import { getExactDateTime, getRelativeDate } from 'common/util/date'
-import { GridCellExpand } from 'components/common/GridCellExpand'
 
 import GridActions from './GridActions'
 import DeleteModal from './modals/DeleteModal'
@@ -48,10 +47,6 @@ export const DisplayBeneficiary = ({ params }: CampaignCellProps) => {
   )
 }
 
-export const DisplayExpandableDescription = (params: GridRenderCellParams<string>) => {
-  return <GridCellExpand value={params.value || ''} width={params.colDef.computedWidth} />
-}
-
 export const DisplayReachedAmount = ({ params }: CampaignCellProps) => {
   return <>{money(params.row.summary.reachedAmount ?? 0, params.row.currency)}</>
 }
@@ -156,14 +151,6 @@ export default function CampaignGrid() {
       width: 250,
       renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}</>,
     },
-    {
-      field: 'description',
-      headerName: t('campaigns:description'),
-      ...commonProps,
-      align: 'left',
-      width: 350,
-      renderCell: DisplayExpandableDescription,
-    },
     {
       field: 'reachedAmount',
       headerName: t('campaigns:donationsAmount'),

diff --git a/src/components/index/sections/CampaignsSection.tsx b/src/components/index/sections/CampaignsSection.tsx
@@ -9,6 +9,7 @@ import { routes } from 'common/routes'
 
 import Heading from 'components/common/Heading'
 import { CampaignResponse } from 'gql/campaigns'
+import { shuffleArray } from 'common/util/shuffle'
 
 const PREFIX = 'CampaignsSection'
 
@@ -75,6 +76,10 @@ export default function CampaignsSection() {
   if (data === undefined) {
     return null
   } else {
+    // NOTE: this sorts the campaigns so that each gets its fair chance to be on top row
+    // TODO: add filters&sorting of campaigns so people can select based on personal preferences
+    shuffleArray(data)
+
     return (
       <StyledContainer>
         <Heading variant="h3" component="h2" className={classes.heading}>