Dev 693 add bounty tags and enable bounty creators to associate their bounty with tags

assets/bounty-labels.js

@@ -0,0 +1,54 @@
+export const PROGRAMMING_LANGUAGES = [
+  { "tag": "ANTLR", "description": "" },
+  { "tag": "Assembly", "description": "" },
+  { "tag": "Bicep", "description": "" },
+  { "tag": "C#", "description": "" },
+  { "tag": "C++", "description": "" },
+  { "tag": "C", "description": "" },
+  { "tag": "Clojure", "description": "" },
+  { "tag": "CodeQL", "description": "" },
+  { "tag": "CoffeeScript", "description": "" },
+  { "tag": "CSS", "description": "" },
+  { "tag": "Dart", "description": "" },
+  { "tag": "DM", "description": "" },
+  { "tag": "Elixir", "description": "" },
+  { "tag": "Emacs Lisp", "description": "" },
+  { "tag": "Erlang", "description": "" },
+  { "tag": "F#", "description": "" },
+  { "tag": "GAP", "description": "" },
+  { "tag": "Go", "description": "" },
+  { "tag": "Groovy", "description": "" },
+  { "tag": "Haskell", "description": "" },
+  { "tag": "hoon", "description": "" },
+  { "tag": "Java", "description": "" },
+  { "tag": "JavaScript", "description": "" },
+  { "tag": "Julia", "description": "" },
+  { "tag": "Kotlin", "description": "" },
+  { "tag": "Lean", "description": "" },
+  { "tag": "Lua", "description": "" },
+  { "tag": "Nix", "description": "" },
+  { "tag": "MATLAB", "description": "" },
+  { "tag": "MLIR", "description": "" },
+  { "tag": "Objective-C", "description": "" },
+  { "tag": "OCaml", "description": "" },
+  { "tag": "Perl", "description": "" },
+  { "tag": "PHP", "description": "" },
+  { "tag": "PowerShell", "description": "" },
+  { "tag": "Puppet", "description": "" },
+  { "tag": "Python", "description": "" },
+  { "tag": "R", "description": "" },
+  { "tag": "Rust", "description": "" },
+  { "tag": "Ruby", "description": "" },
+  { "tag": "Scala", "description": "" },
+  { "tag": "Shell", "description": "" },
+  { "tag": "Solidity", "description": "" },
+  { "tag": "SourcePawn", "description": "" },
+  { "tag": "Swift", "description": "" },
+  { "tag": "SystemVerilog", "description": "" },
+  { "tag": "TypeScript", "description": "" },
+  { "tag": "Verilog", "description": "" },
+  { "tag": "Visual Basic .NET", "description": "" },
+  { "tag": "Vim Script", "description": "" },
+  { "tag": "WebAssembly", "description": "" },
+  { "tag": "ZAP", "description": "" }
+];

components/bounty-hero.tsx

@@ -3,23 +3,24 @@ import {isMobile} from "react-device-detect";
 import {useTranslation} from "next-i18next";
 
 import Avatar from "components/avatar";
+import BountyStatusInfo from "components/bounty-status-info";
+import BountyTags from "components/bounty/bounty-tags";
+import CustomContainer from "components/custom-container";
+import DateLabel from "components/date-label";
 import GithubInfo from "components/github-info";
+import PriceConversor from "components/price-conversor";
+import Translation from "components/translation";
+
+import {useAppState} from "contexts/app-state";
 
 import {getIssueState} from "helpers/handleTypeIssue";
 import {truncateAddress} from "helpers/truncate-address";
 
-import {useAppState} from "../contexts/app-state";
-import BountyStatusInfo from "./bounty-status-info";
-import CustomContainer from "./custom-container";
-import DateLabel from "./date-label";
-import PriceConversor from "./price-conversor";
-import Translation from "./translation";
-
 export default function BountyHero() {
   const {t} = useTranslation(["bounty", "common"]);
+
   const {state} = useAppState();
 
-
   function renderPriceConversor() {
     return (
     <div className={`${isMobile ? 'col-12 mt-2' : 'col-1' } d-flex align-items-center justify-content-center`}>
@@ -31,7 +32,6 @@ export default function BountyHero() {
     )
   }
 
-
   return (
     <div className="banner-shadow">
       <CustomContainer>
@@ -120,6 +120,12 @@ export default function BountyHero() {
                     />
                   )}
                 </div>
+
+                { !!state.currentBounty?.data?.tags?.length &&
+                  <div className="mt-3">
+                    <BountyTags tags={state.currentBounty.data.tags} />
+                  </div>
+                }
               </>
             )}
           </div>

components/bounty/bounty-tags.tsx

@@ -0,0 +1,23 @@
+import Badge from "components/badge";
+
+interface BountyTagsProps {
+  tags: string[];
+}
+
+export default function BountyTags({
+  tags
+} : BountyTagsProps) {
+  if (!tags) return <></>;
+
+  return(
+    <div className="d-flex gap-1">
+      {tags.map(tag => 
+        <Badge
+          key={tag}
+          label={tag} 
+          className="caption-small border border-primary border-radius-8" 
+          color="primary-30"
+        /> )}
+    </div>
+  );
+}

components/create-bounty-details.tsx

@@ -3,15 +3,18 @@ import React, { useEffect, useState } from "react";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 
+import { PROGRAMMING_LANGUAGES } from "assets/bounty-labels";
+
+import Button from "components/button";
+import { ContextualSpan } from "components/contextual-span";
 import DescriptionPreviewModal from "components/description-preview-modal";
 import DragAndDrop from "components/drag-and-drop";
+import ReactSelect from "components/react-select";
 
 import { useAppState } from "contexts/app-state";
 
 import { BODY_CHARACTERES_LIMIT } from "helpers/contants";
 
-import Button from "./button";
-
 export default function CreateBountyDetails({
   bountyTitle,
   setBountyTitle,
@@ -21,18 +24,23 @@ export default function CreateBountyDetails({
   onUploading,
   files,
   review = false,
+  selectedTags,
+  setSelectedTags
 }) {
   const { t } = useTranslation("bounty");
 
   const [strFiles, setStrFiles] = useState<string>("");
   const [bodyLength, setBodyLength] = useState<number>(0);
   const [showPreviewModal, setShowPreviewModal] = useState(false);
-
+  
   const {
     state: { Settings },
   } = useAppState();
 
+
   const titleLimit = 131;
+  const MAX_TAGS = 3;
+  const TAGS_OPTIONS = PROGRAMMING_LANGUAGES.map(({ tag }) => ({ label: tag, value: tag }));
 
   function handleShowModal() {
     setShowPreviewModal(true);
@@ -50,6 +58,10 @@ export default function CreateBountyDetails({
     setBountyDescription(e.target.value);
   }
 
+  function handleChangeTags(newTags) {
+    setSelectedTags(newTags.map(({ value}) => value));
+  }
+
   useEffect(() => {
     if (bountyDescription.length > 0) {
       const body = `${bountyDescription}\n\n${strFiles
@@ -135,7 +147,27 @@ export default function CreateBountyDetails({
         </Button>
         }
       </div>
-      <div className="mb-4">
+
+      <div className="form-group">
+        <label htmlFor="" className="caption-small mb-2">Tags</label>
+
+        <ReactSelect
+          value={selectedTags.map(tag => ({ label: tag, value: tag }))}
+          options={TAGS_OPTIONS}
+          onChange={handleChangeTags}
+          isOptionDisabled={() => selectedTags.length >= MAX_TAGS}
+          isDisabled={review}
+          isMulti
+        />
+
+        {!review &&
+          <ContextualSpan context="info" className="mt-1">
+            Selected {selectedTags.length} of {MAX_TAGS}
+          </ContextualSpan>
+        }
+      </div>
+
+      <div>
         <DragAndDrop
           externalFiles={files}
           onUpdateFiles={onUpdateFiles}

components/create-bounty-modal.tsx

@@ -81,6 +81,7 @@ export default function CreateBountyModal() {
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [issueAmount, setIssueAmount] = useState<NumberFormatValues>(ZeroNumberFormatValues);
   const [rewardAmount, setRewardAmount] = useState<NumberFormatValues>(ZeroNumberFormatValues);
+  const [selectedTags, setSelectedTags]= useState<string[]>([]);
 
   const rewardERC20 = useERC20();
 
@@ -144,6 +145,8 @@ export default function CreateBountyModal() {
         onUploading={setIsUploading}
         review={review}
         files={files}
+        selectedTags={selectedTags}
+        setSelectedTags={setSelectedTags}
       />
     );
   }
@@ -402,6 +405,7 @@ export default function CreateBountyModal() {
 
   function cleanFields() {
     setFiles([]);
+    setSelectedTags([]);
     setBountyTitle("");
     setBountyDescription("");
     setIssueAmount(ZeroNumberFormatValues);
@@ -460,14 +464,15 @@ export default function CreateBountyModal() {
         creatorAddress: currentUser.walletAddress,
         githubUser: currentUser?.login,
         repositoryId: repository?.id,
-        branch,
+        branch
       };
 
       const cid = await createPreBounty({
         title: payload.title,
         body: payload.body,
         creator: payload.githubUser,
         repositoryId: payload.repositoryId,
+        tags: selectedTags
       }, Service?.network?.active?.name)
       .then((cid) => cid)
 

components/issue-list-item.tsx

@@ -6,26 +6,28 @@ import BigNumber from "bignumber.js";
 import {useTranslation} from "next-i18next";
 import {useRouter} from "next/router";
 
+import AvatarOrIdenticon from "components/avatar-or-identicon";
 import BountyStatusInfo from "components/bounty-status-info";
-import Identicon from "components/identicon";
+import BountyTags from "components/bounty/bounty-tags";
+import DateLabel from "components/date-label";
 import Translation from "components/translation";
 
+import {useAppState} from "contexts/app-state";
+
 import {formatNumberToNScale, formatStringToCurrency} from "helpers/formatNumber";
 import {getIssueState} from "helpers/handleTypeIssue";
 
 import {IssueBigNumberData, IssueState} from "interfaces/issue-data";
 
-import {useAppState} from "../contexts/app-state";
-import AvatarOrIdenticon from "./avatar-or-identicon";
-import DateLabel from "./date-label";
-
-export default function IssueListItem({
-                                        issue = null,
-                                        xClick,
-                                      }: {
+interface IssueListItemProps {
   issue?: IssueBigNumberData;
   xClick?: () => void;
-}) {
+}
+
+export default function IssueListItem({
+  issue = null,
+  xClick,
+}: IssueListItemProps) {
   const router = useRouter();
   const { t } = useTranslation(["bounty", "common"]);
 
@@ -196,8 +198,12 @@ export default function IssueListItem({
                 </div>
               </>
             )}
+
             <RenderIssueData state={issueState} />
+
             <DateLabel date={issue?.createdAt} className="text-white-40" />
+
+            <BountyTags tags={issue?.tags} />
           </div>
         </div>
 

db/migrations/20230109170418-add-column-tag-to-issue.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  async up (queryInterface, Sequelize) {
+    await queryInterface.addColumn("issues", "tags", {
+      type: Sequelize.ARRAY(Sequelize.STRING)
+    });
+  },
+
+  async down (queryInterface, Sequelize) {
+    await queryInterface.removeColumn("issues", "tags");
+  }
+};

db/models/issue.model.js

@@ -34,7 +34,10 @@ class Issue extends Model {
         fundedAt: {
           type: DataTypes.DATE,
           allowNull: true
-        }
+        },
+        tags: {
+          type: DataTypes.ARRAY(DataTypes.STRING)
+        },
     },
                {
         sequelize,

interfaces/issue-data.ts

@@ -54,6 +54,7 @@ export interface IssueData {
   benefactors?: fundingBenefactor[];
   disputes?: Disputes[];
   payments: Payment[];
+  tags: string[];
 }
 
 export interface Disputes {

pages/api/issue/index.ts

@@ -17,7 +17,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     title,
     body,
     repositoryId,
-    networkName
+    networkName,
+    tags
   } = req.body;
 
   const network = await models.network.findOne({
@@ -85,7 +86,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     state: "pending",
     title: '',
     body: body,
-    network_id: network.id
+    network_id: network.id,
+    tags
   });
 
   return res.status(200).json(`${repository.id}/${githubId}`);

pages/api/search/issues/index.ts

@@ -152,16 +152,16 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
     if (search) {
       const issues = await models.issue.findAll({
-      where: whereCondition,
-      include,
-      nest: true,
-      order: [[...sortBy ||["createdAt"], req.query.order || "DESC"]]
+        where: whereCondition,
+        include,
+        nest: true,
+        order: [[...sortBy ||["createdAt"], req.query.order || "DESC"]]
       });
 
       const result = [];
 
-      result.push(...issues.filter(({ title, body }) =>
-        [title, body].some((text) =>
+      result.push(...issues.filter(({ title, body, tags }) =>
+        [title, body, ...(tags || [])].some((text) =>
           searchPatternInText(text || "", String(search)))));
 
       const paginatedData = paginateArray(result, 10, page || 1);