Implement Featured Bounties display

aliraza556 · Dec 31, 2024 · 4da7dc2 · 4da7dc2
1 parent 85e6be2
commit 4da7dc2
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 58 deletions.
diff --git a/src/bounties/BountyDescription.tsx b/src/bounties/BountyDescription.tsx
@@ -19,27 +19,35 @@ interface codingLangProps {
 interface bounty_description_props {
   isPaid?: any;
   color?: any;
+  isBountyLandingPage?: boolean;
 }
 
 const BountyDescriptionContainer = styled.div<bounty_description_props>`
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-width: 519px;
-  max-width: 519px;
+  min-width: ${(props: any) => (props.isBountyLandingPage ? '270px' : '519px')};
+  max-width: ${(props: any) => (props.isBountyLandingPage ? '270px' : '519px')};
   padding-left: 17px;
   padding-right: 17px;
 `;
 
-const Header = styled.div`
+interface bounty_header_props {
+  isBountyLandingPage?: boolean;
+}
+
+const Header = styled.div<bounty_header_props>`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   height: 32px;
   margin-top: 16px;
+  margin-left: 0;
+
   .NameContainer {
     display: flex;
     flex-direction: column;
+    width: ${(props: any) => (props.isBountyLandingPage ? '320px' : '')};
   }
 `;
 
@@ -75,11 +83,16 @@ const Description = styled.div<bounty_description_props>`
   }
 `;
 
-const LanguageContainer = styled.div`
+interface LanguageContainerProps {
+  isBountyLandingPage?: boolean;
+}
+
+const LanguageContainer = styled.div<LanguageContainerProps>`
   display: flex;
   flex-wrap: wrap;
   width: 80%;
   margin-top: 10px;
+  margin-left: ${(p: any) => (p.isBountyLandingPage ? '95px' : '0px')};
 `;
 
 const CodingLabels = styled.div<codingLangProps>`
@@ -121,6 +134,8 @@ const BountyDescription = (props: BountiesDescriptionProps) => {
   const [replitLink, setReplitLink] = useState('');
   const [descriptionImage, setDescriptionImage] = useState('');
 
+  const { isBountyLandingPage } = props;
+
   useEffect(() => {
     if (props.description) {
       const found = props?.description.match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))(?![^`]*`)/);
@@ -147,8 +162,11 @@ const BountyDescription = (props: BountiesDescriptionProps) => {
 
   return (
     <>
-      <BountyDescriptionContainer style={{ ...props.style }}>
-        <Header>
+      <BountyDescriptionContainer
+        style={{ ...props.style }}
+        isBountyLandingPage={isBountyLandingPage}
+      >
+        <Header isBountyLandingPage={isBountyLandingPage}>
           <div className="NameContainer">
             <NameTag
               {...props}
@@ -200,15 +218,16 @@ const BountyDescription = (props: BountiesDescriptionProps) => {
             <EuiText
               className="DescriptionTitle"
               style={{
-                color: props.isPaid ? color.grayish.G50 : color.grayish.G10
+                color: props.isPaid ? color.grayish.G50 : color.grayish.G10,
+                marginLeft: isBountyLandingPage ? '95px' : '0px'
               }}
             >
               {props.title?.slice(0, descriptionImage ? 80 : 120)}
               {props.title?.length > 80 ? '...' : ''}
             </EuiText>
           </div>
         </Description>
-        <LanguageContainer>
+        <LanguageContainer isBountyLandingPage={isBountyLandingPage}>
           {replitLink && (
             <div onClick={() => window.open(replitLink[0])} style={{ display: 'flex' }}>
               <CodingLabels

diff --git a/src/bounties/BountyPrice.tsx b/src/bounties/BountyPrice.tsx
@@ -10,6 +10,7 @@ interface PriceContainerProps {
   price_Text_Color?: string;
   priceBackground?: string;
   session_text_color?: string;
+  isBountyLandingPage?: boolean;
 }
 
 const PriceContainer = styled.div<PriceContainerProps>`
@@ -18,6 +19,7 @@ const PriceContainer = styled.div<PriceContainerProps>`
   align-items: flex-start;
   padding: 0px 24px;
   color: #909baa;
+  margin-left: ${(props: any) => (props.isBountyLandingPage ? '200px' : '0')};
   padding-top: 41px;
   .PriceStaticTextContainer {
     width: 28px;
@@ -101,6 +103,7 @@ const BountyPrice = (props: BountiesPriceProps) => {
         style={{
           ...props.style
         }}
+        isBountyLandingPage={props.isBountyLandingPage}
       >
         <div
           style={{

diff --git a/src/bounties/BountyProfileView.tsx b/src/bounties/BountyProfileView.tsx
@@ -14,11 +14,17 @@ interface BountyProfileViewProps {
   View_profile_icon_color?: string;
 }
 
-const UserProfileContainer = styled.div`
+interface IUserProfileContainer {
+  isBountyLandingPage?: boolean;
+}
+
+const UserProfileContainer = styled.div<IUserProfileContainer>`
   min-width: 336px;
   max-width: 336px;
   display: flex;
-  padding: 40px 0px 0px 37px;
+  padding: ${(props: any) =>
+    props.isBountyLandingPage ? '40px 0px 0px 20px' : '40px 0px 0px 37px'};
+  margin-left: ${(props: any) => (props.isBountyLandingPage ? '-10px' : '0')};
 `;
 
 const UserImage = styled.div`
@@ -127,6 +133,7 @@ const BountyProfileView = (props: BountiesProfileProps) => {
         style={{
           ...props?.UserProfileContainerStyle
         }}
+        isBountyLandingPage={props.isBountyLandingPage}
       >
         <UserImage
           style={{

diff --git a/src/bounties/interfaces.ts b/src/bounties/interfaces.ts
@@ -17,6 +17,7 @@ export interface BountiesDescriptionProps {
   uuid?: string;
   org_uuid?: string;
   org_img?: string;
+  isBountyLandingPage?: boolean;
 }
 
 export interface BountiesPriceProps {
@@ -25,6 +26,7 @@ export interface BountiesPriceProps {
   price: number;
   style?: React.CSSProperties;
   priceMax?: number;
+  isBountyLandingPage?: boolean;
 }
 
 export interface BountiesProfileProps {
@@ -42,4 +44,5 @@ export interface BountiesProfileProps {
     height: string;
     background: string;
   };
+  isBountyLandingPage?: boolean;
 }
diff --git a/src/components/BountyComponents/FeaturedBounties.tsx b/src/components/BountyComponents/FeaturedBounties.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { observer } from 'mobx-react-lite';
+import { DisplayBounties } from '../../people/widgetViews/workspace/style';
 import { colors } from '../../config/colors';
 import { bountyStore } from '../../store/bountyStore';
+import WidgetSwitchViewer from '../../people/widgetViews/WidgetSwitchViewer';
 
 const FeaturedContainer = styled.div`
   margin: 20px 0;
@@ -22,53 +24,69 @@ const FeaturedHeader = styled.div`
   }
 `;
 
-const BountyCard = styled.div`
-  padding: 16px;
-  border: 1px solid ${colors.light.grayish.G900};
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
+export const FeaturedBounties: React.FC = observer(() => {
+  const featuredBounty = bountyStore.getFeaturedBounty();
+  const [currentItems, setCurrentItems] = useState<number>(1);
+  const [page, setPage] = useState<number>(1);
 
-  &:hover {
-    background: ${colors.light.grayish.G950};
-  }
-`;
+  const widgetViewerProps = {
+    onPanelClick: (activeWorkspace?: string, bounty?: any) => {
+      if (bounty?.id) {
+        window.location.href = featuredBounty?.url || '';
+      }
+    },
+    checkboxIdToSelectedMap: {},
+    checkboxIdToSelectedMapLanguage: {},
+    fromBountyPage: true,
+    selectedWidget: 'bounties',
+    isBountyLandingPage: true,
+    loading: false,
+    currentItems,
+    setCurrentItems: (items: number) => setCurrentItems(items),
+    page,
+    setPage: (newPage: number) => setPage(newPage),
+    languageString: '',
 
-const BountyTitle = styled.h3`
-  font-size: 16px;
-  font-weight: 500;
-  color: ${colors.light.text1};
-  margin: 0 0 8px 0;
-`;
+    bounties: featuredBounty
+      ? [
+          {
+            body: {
+              id: featuredBounty.bountyId
+            },
+            person: {
+              wanteds: []
+            }
+          }
+        ]
+      : []
+  };
 
-const BountyMeta = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: ${colors.light.text2};
-  font-size: 14px;
-`;
-
-export const FeaturedBounties: React.FC = observer(() => {
-  const featuredBounty = bountyStore.getFeaturedBounty();
   return (
     <FeaturedContainer>
       <FeaturedHeader>
         <h2>Featured Bounties</h2>
       </FeaturedHeader>
 
-      {featuredBounty ? (
-        <BountyCard onClick={() => (window.location.href = featuredBounty.url)}>
-          <BountyTitle>Bounty #{featuredBounty.bountyId}</BountyTitle>
-          <BountyMeta>
-            <span>View Details</span>
-          </BountyMeta>
-        </BountyCard>
-      ) : (
-        <div style={{ color: colors.light.text2, textAlign: 'center', padding: '20px' }}>
-          No featured bounties at the moment
+      <DisplayBounties>
+        <div
+          style={{
+            width: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            height: '50%',
+            overflowY: 'auto'
+          }}
+        >
+          {featuredBounty ? (
+            <WidgetSwitchViewer {...widgetViewerProps} />
+          ) : (
+            <div style={{ color: colors.light.text2, textAlign: 'center', padding: '20px' }}>
+              No featured bounties at the moment
+            </div>
+          )}
         </div>
-      )}
+      </DisplayBounties>
     </FeaturedContainer>
   );
 });
diff --git a/src/pages/BountiesLandingPage/index.tsx b/src/pages/BountiesLandingPage/index.tsx
@@ -26,8 +26,8 @@ const BountiesLandingPage: React.FC = () => {
   `;
 
   const ContentWrapper = styled.div`
-    max-width: 1200px;
-    min-height: 500px;
+    max-width: 1500px;
+    min-height: 650px;
     margin: 30px auto;
     width: 100%;
     padding: 40px 20px 20px 30px;
@@ -44,7 +44,7 @@ const BountiesLandingPage: React.FC = () => {
     &:after {
       content: '';
       position: absolute;
-      left: 63%;
+      left: 68%;
       top: 0;
       bottom: 0;
       width: 1px;

diff --git a/src/people/interfaces.ts b/src/people/interfaces.ts
@@ -82,6 +82,7 @@ export interface BountiesProps {
   img?: string;
   id?: number;
   activeWorkspace?: string;
+  isBountyLandingPage?: boolean;
 }
 
 export interface BadgesProps {
@@ -127,6 +128,7 @@ export interface NameTagProps {
   org_name?: string;
   org_uuid?: string;
   uuid?: string;
+  isBountyLandingPage?: boolean;
 }
 
 export interface NoneSpaceProps {
@@ -413,6 +415,7 @@ export interface WantedViews2Props extends WantedViewsProps {
   coding_languages?: any;
   fromBountyPage?: boolean;
   activeWorkspace?: string;
+  isBountyLandingPage?: boolean;
 }
 
 export interface AboutViewProps {

diff --git a/src/people/utils/AssignedUnassignedBounties.tsx b/src/people/utils/AssignedUnassignedBounties.tsx
@@ -20,6 +20,7 @@ interface containerProps {
   unassigned_border?: string;
   grayish_G200?: string;
   color?: any;
+  isBountyLandingPage?: boolean;
 }
 
 const BountyContainer = styled.div<containerProps>`
@@ -70,7 +71,7 @@ const DescriptionPriceContainer = styled.div<containerProps>`
 `;
 
 const UnassignedPersonProfile = styled.div<containerProps>`
-  min-width: 336px;
+  min-width: ${(props: any) => (props.isBountyLandingPage ? '282px' : '336px')};
   min-height: 160px;
   max-height: auto;
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23B0B7BCFF' stroke-width='3' stroke-dasharray='4' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
@@ -127,7 +128,8 @@ const Bounties = (props: BountiesProps) => {
     widget,
     created,
     org_uuid,
-    activeWorkspace
+    activeWorkspace,
+    isBountyLandingPage
   } = props;
 
   const color = colors['light'];
@@ -176,6 +178,7 @@ const Bounties = (props: BountiesProps) => {
                 org_img={props.img}
                 codingLanguage={codingLanguage}
                 created={created}
+                isBountyLandingPage={isBountyLandingPage}
               />
             </div>
             <div className="BountyPriceContainer">
@@ -199,6 +202,7 @@ const Bounties = (props: BountiesProps) => {
                   height: '16px',
                   background: color.statusAssigned
                 }}
+                isBountyLandingPage={isBountyLandingPage}
               />
             </div>
           </BountyContainer>
@@ -236,13 +240,15 @@ const Bounties = (props: BountiesProps) => {
                     maxWidth: '245px',
                     minWidth: '245px'
                   }}
+                  isBountyLandingPage={isBountyLandingPage}
                 />
               </div>
             </BountyLink>
 
             <UnassignedPersonProfile
               unassigned_border={color.grayish.G300}
               grayish_G200={color.grayish.G200}
+              isBountyLandingPage={isBountyLandingPage}
             >
               <div className="UnassignedPersonContainer">
                 <img src="/static/unassigned_profile.svg" alt="" height={'100%'} width={'100%'} />