Add a tab to show the top contributions

Author: pbteja1998

src/components/CrowdFund/donors.tsx

@@ -1,8 +1,8 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import fromnow from 'fromnow';
 
 import { AwardIcon } from '../Icons/common';
-import { CampaignWithFundings } from '../../services/airtable';
+import { CampaignWithFundings, Funding } from '../../services/airtable';
 import { truncateString } from '../../utils';
 
 interface Props {
@@ -11,6 +11,12 @@ interface Props {
 
 export const DonorsList: FunctionComponent<Props> = ({ campaign }) => {
   const { fundings } = campaign;
+  const [showRecent, setShowRecent] = useState(true);
+  const sortedFundings = () =>
+    showRecent
+      ? fundings.sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
+      : fundings.sort((a, b) => b.donated_amount - a.donated_amount);
+
   if (fundings.length === 0) {
     return (
       <div className="bg-white shadow my-4 py-2 rounded-lg px-4">
@@ -21,27 +27,42 @@ export const DonorsList: FunctionComponent<Props> = ({ campaign }) => {
       </div>
     );
   }
+  const tabCommonClass = 'bg-white inline-block py-2 px-4 hover:text-pink-800 font-semibold';
+  const tabClass = `${tabCommonClass} text-pink-500`;
+  const tabActiveClass = `${tabCommonClass} text-pink-700 border-b border-pink-500`;
   return (
-    <ul className="w-full overflow-y-scroll" style={{ height: 500 }}>
-      {fundings.map(item => (
-        <li key={item.id} className="flex items-center bg-white shadow my-4 py-2 rounded-lg">
-          <div className="px-4">
-            <AwardIcon />
-          </div>
-          <div className="flex-1">
-            <h6 className="font-medium text-gray-800" title={item.name}>
-              {truncateString(item.name, 15)}
-            </h6>
-            <p className="text-xs text-gray-600">{fromnow(new Date(item.created_at), { max: 2, suffix: true })}</p>
-            <p className="text-xs text-gray-600">{item.message}</p>
-          </div>
-          <div className="px-4">
-            <span className="inline-block bg-green-600 text-xs rounded-full px-3 py-1 text-white">
-              ₹ {item.donated_amount}
-            </span>
-          </div>
+    <>
+      <h2 className="text-xl mb-1 font-medium text-gray-800">Contributions</h2>
+      <p className="text-sm text-gray-700">A special thanks to all who raised the funds for this campaign.</p>
+      <ul className="flex border-b mt-2 justify-center">
+        <li className="-mb-px mr-1 cursor-pointer whitespace-no-wrap" onClick={() => setShowRecent(true)}>
+          <a className={showRecent ? tabActiveClass : tabClass}>Most Recent</a>
+        </li>
+        <li className="mr-1 cursor-pointer whitespace-no-wrap" onClick={() => setShowRecent(false)}>
+          <a className={showRecent ? tabClass : tabActiveClass}>Top Contributions</a>
         </li>
-      ))}
-    </ul>
+      </ul>
+      <ul className="w-full overflow-y-scroll" style={{ height: 500 }}>
+        {sortedFundings().map(item => (
+          <li key={item.id} className="flex items-center bg-white shadow my-4 py-2 rounded-lg">
+            <div className="px-4 text-center">
+              <AwardIcon />
+            </div>
+            <div className="flex-1">
+              <h6 className="font-medium text-gray-800" title={item.name}>
+                {truncateString(item.name, 15)}
+              </h6>
+              <p className="text-xs text-gray-600">{fromnow(new Date(item.created_at), { max: 2, suffix: true })}</p>
+              <p className="text-xs text-gray-600">{item.message}</p>
+            </div>
+            <div className="px-4">
+              <span className="inline-block bg-pink-600 text-xs rounded-full px-3 py-1 text-white">
+                ₹ {item.donated_amount}
+              </span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
   );
 };

src/components/CrowdFund/list.tsx

@@ -23,7 +23,7 @@ export const CampaignList: FunctionComponent<Props> = ({ inline = false }) => {
   if (error) {
     return (
       <div className="mx-0 my-4 md:mx-4 md:h-64">
-        <h3 className="text-lg md:text-xl mb-1 text-red-700">{error.message || 'An error occured. Try again later'}</h3>
+        <h3 className="text-lg md:text-xl mb-1 text-red-700">{'An error occured. Try again later'}</h3>
       </div>
     );
   }

src/pages/crowdfund/[slug].tsx

@@ -50,8 +50,6 @@ const CampaignPage: NextPage = ({ initialData, slug }) => {
           </div>
 
           <div className="mt-10 md:mt-0 md:mx-2 md:w-1/3 md:bg-white md:p-4 md:shadow md:rounded-lg">
-            <h2 className="text-xl mb-1 font-medium text-gray-800">Recent Contributions</h2>
-            <p className="text-sm text-gray-700">A special thanks to all who raised the funds for this campaign.</p>
             <DonorsList campaign={data} />
           </div>
         </div>