Fix projects bugs (#364)

* fix tags structure * added border and error state * add border to list card * add autocomplete to projects * fmt --------- Co-authored-by: Elliot Braem <[email protected]>
NEARBuilders · Jun 10, 2024 · c0d03ca · c0d03ca
1 parent 29279bc
commit c0d03ca
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 28 deletions.
diff --git a/apps/new/widget/components/project/Card.jsx b/apps/new/widget/components/project/Card.jsx
@@ -23,6 +23,7 @@ const GridCard = styled.div`
   gap: 24px;
   color: var(--text-color, #fff);
 
+  border: 0.5px solid rgba(255, 255, 255, 0.2);
   .info {
     display: flex;
     align-items: flex-start;

diff --git a/apps/new/widget/components/project/ListCard.jsx b/apps/new/widget/components/project/ListCard.jsx
@@ -16,7 +16,7 @@ const { ProfileImages } = VM.require(
 const Card = styled.div`
   border-radius: 16px;
   background: var(--bg-2, #23242b);
-
+  border: 0.5px solid rgba(255, 255, 255, 0.2);
   display: flex;
   align-items: flex-start;
   flex-grow: 1;

diff --git a/apps/new/widget/lib/projects.jsx b/apps/new/widget/lib/projects.jsx
@@ -1,3 +1,7 @@
+const getTagsInArray = (tags) => {
+  return Array.isArray(tags) ? tags : Object.keys(tags);
+};
+
 const flattenObject = (obj, app, type) => {
   const paths = [];
   for (const key of Object.keys(obj)) {
@@ -53,7 +57,7 @@ const processData = (data, type) => {
           type,
           title: metadata.title,
           metadata,
-          tags: metadata.tags || [],
+          tags: getTagsInArray(metadata.tags) || [],
           collaborators: metadata.contributors,
           projectID,
         };
@@ -88,7 +92,7 @@ const getProjectMeta = (id) => {
 
   try {
     const pj = JSON.parse(data);
-    return pj;
+    return { ...pj, tags: getTagsInArray(pj.tags) };
   } catch (error) {
     console.error("Error parsing project data:", error);
     return null;
@@ -103,4 +107,5 @@ return {
   fetchProjects,
   getProjectMeta,
   getProjectIdFromPath,
+  getTagsInArray,
 };
diff --git a/apps/new/widget/page/project/tabs/Code.jsx b/apps/new/widget/page/project/tabs/Code.jsx
@@ -2,9 +2,7 @@ const { Button } = VM.require("${alias_old}/widget/components") || {
   Button: () => <></>,
 };
 
-const { getProjectMeta } = VM.require(
-  "${alias_old}/widget/lib.project-data",
-) || {
+const { getProjectMeta } = VM.require("${alias_new}/widget/lib.projects") || {
   getProjectMeta: () => {},
 };
 

diff --git a/apps/new/widget/page/project/tabs/Discussion.jsx b/apps/new/widget/page/project/tabs/Discussion.jsx
@@ -4,9 +4,7 @@ const { Feed } = VM.require("${alias_devs}/widget/Feed") ?? {
 const { Post } = VM.require("${alias_old}/widget/components") || {
   Post: () => <></>,
 };
-const { getProjectMeta } = VM.require(
-  "${alias_old}/widget/lib.project-data",
-) || {
+const { getProjectMeta } = VM.require("${alias_new}/widget/lib.projects") || {
   getProjectMeta: () => {},
 };
 

diff --git a/apps/new/widget/page/project/tabs/Overview.jsx b/apps/new/widget/page/project/tabs/Overview.jsx
@@ -3,9 +3,7 @@ const { User, Hashtag } = VM.require("${alias_old}/widget/components") || {
   Hashtag: () => <></>,
 };
 
-const { getProjectMeta } = VM.require(
-  "${alias_old}/widget/lib.project-data",
-) || {
+const { getProjectMeta } = VM.require("${alias_new}/widget/lib.projects") || {
   getProjectMeta: () => {},
 };
 

diff --git a/apps/new/widget/page/project/tabs/Roadmap.jsx b/apps/new/widget/page/project/tabs/Roadmap.jsx
@@ -2,9 +2,7 @@ const { Button } = VM.require("${alias_old}/widget/components") || {
   Button: () => <></>,
 };
 
-const { getProjectMeta } = VM.require(
-  "${alias_old}/widget/lib.project-data",
-) || {
+const { getProjectMeta } = VM.require("${alias_new}/widget/lib.projects") || {
   getProjectMeta: () => {},
 };
 

diff --git a/apps/new/widget/page/project/tabs/Task.jsx b/apps/new/widget/page/project/tabs/Task.jsx
@@ -10,9 +10,7 @@ const { normalize } = VM.require("${alias_devs}/widget/lib.stringUtils") || {
   normalize: () => {},
 };
 
-const { getProjectMeta } = VM.require(
-  "${alias_old}/widget/lib.project-data",
-) || {
+const { getProjectMeta } = VM.require("${alias_new}/widget/lib.projects") || {
   getProjectMeta: () => {},
 };
 

diff --git a/apps/new/widget/page/projects/Editor.jsx b/apps/new/widget/page/projects/Editor.jsx
@@ -85,7 +85,7 @@ const [title, setTitle] = useState("");
 const [description, setDescription] = useState("");
 const [location, setLocation] = useState("");
 const [contributorsWithRoles, setContributorsWithRoles] = useState([]);
-const [contributors, setContributors] = useState([]);
+const [contributors, setContributors] = useState([context.accountId]);
 const [twitter, setTwitter] = useState("");
 const [gitHub, setGitHub] = useState("");
 const [telegram, setTelegram] = useState("");
@@ -102,9 +102,22 @@ const [showSuccessModal, setShowSuccessModal] = useState(false);
 const [roles, setRoles] = useState([]);
 const [currentScreen, setCurrentScreen] = useState(1);
 const [projectIdForSocialDB, setProjectId] = useState(null); // for edit changes
+const [contributorSearchTerm, setContributorSearch] = useState("");
 
 function removeWhiteSpace(str) {
-  return str.replace(/\s/g, "");
+  return str.replace(/\s/g, "-").toLowerCase();
+}
+
+function convertArrayToObject(array) {
+  const obj = {};
+  array.forEach((value, index) => {
+    obj[value] = "";
+  });
+  return obj;
+}
+
+function convertObjectToArray(obj) {
+  return Object.keys(obj);
 }
 
 useEffect(() => {
@@ -181,7 +194,11 @@ useEffect(() => {
     setAvatar(profileImage?.image ?? profileImage);
     setCoverImage(backgroundImage?.image ?? backgroundImage);
     setProjectAccount(projectAccountId);
-    setTags(tags);
+    setTags(
+      Array.isArray(tags)
+        ? tags.map((i) => removeWhiteSpace(i))
+        : convertObjectToArray(tags ?? {}),
+    );
     setSelectedTabs(new Set(tabs));
   }
 }, [editProjectData]);
@@ -417,7 +434,7 @@ function onCreateProject() {
     description,
     profileImage: avatar,
     backgroundImage: coverImage,
-    tags,
+    tags: convertArrayToObject(tags),
     linktree: {
       twitter: twitter,
       github: gitHub,
@@ -440,7 +457,7 @@ function onCreateProject() {
           description: description,
           image: avatar,
           backgroundImage: coverImage,
-          tags: tags,
+          tags: convertArrayToObject(tags),
           linktree: {
             twitter: twitter && `https://twitter.com/${twitter}`,
             github: gitHub && `https://github.com/${gitHub}`,
@@ -500,8 +517,45 @@ function onCreateProject() {
   }
 }
 
-const following = Social.get(`${context.accountId}/graph/follow/*`);
-const followingAccountSuggestion = following && Object.keys(following);
+function getSuggestiveAccounts() {
+  let suugestiveAccounts = [];
+  const profilesData = Social.get("*/profile/name", "final") || {};
+  const followingData = Social.get(
+    `${context.accountId}/graph/follow/**`,
+    "final",
+  );
+  if (!profilesData) return <></>;
+  const profiles = Object.entries(profilesData);
+  const term = (contributorSearchTerm || "").replace(/\W/g, "").toLowerCase();
+  const limit = 10;
+  for (let i = 0; i < profiles.length; i++) {
+    let score = 0;
+    const accountId = profiles[i][0];
+    const accountIdSearch = profiles[i][0].replace(/\W/g, "").toLowerCase();
+    const nameSearch = (profiles[i][1]?.profile?.name || "")
+      .replace(/\W/g, "")
+      .toLowerCase();
+    const accountIdSearchIndex = accountIdSearch.indexOf(term);
+    const nameSearchIndex = nameSearch.indexOf(term);
+
+    if (accountIdSearchIndex > -1 || nameSearchIndex > -1) {
+      score += 10;
+
+      if (accountIdSearchIndex === 0) {
+        score += 10;
+      }
+      if (nameSearchIndex === 0) {
+        score += 10;
+      }
+      if (followingData[accountId] === "") {
+        score += 30;
+      }
+
+      suugestiveAccounts.push(accountId);
+    }
+  }
+  return suugestiveAccounts.slice(0, limit);
+}
 
 const SecondScreen = () => {
   return (
@@ -512,9 +566,10 @@ const SecondScreen = () => {
             <label className="mb-1">Contributors</label>
             <Typeahead
               multiple
-              options={[accountId]}
+              options={getSuggestiveAccounts()}
               allowNew
               selected={contributors}
+              onInputChange={(e) => setContributorSearch(e)}
               onChange={(e) => handleContributors(e)}
             />
             {invalidContributorFound && (

diff --git a/apps/new/widget/page/projects/PotlockImport.jsx b/apps/new/widget/page/projects/PotlockImport.jsx
@@ -17,6 +17,7 @@ let ListsSDK =
 ListsSDK = ListsSDK({ env: "production" });
 
 const allRegistrations = ListsSDK.getRegistrations() || [];
+const [searchTerm, setSearch] = useState(null);
 const isRegisteredProject = allRegistrations.find(
   (registration) => registration.registrant_id === accountId,
 );
@@ -47,6 +48,7 @@ useEffect(() => {
 }, [approvedProjects]);
 
 const searchByWords = (searchTerm) => {
+  setSearch(searchTerm);
   searchTerm = searchTerm.toLowerCase().trim();
   let results = [];
   projects.forEach((project) => {
@@ -97,13 +99,20 @@ const ProjectList = styled.div`
   }
 `;
 
+const Container = styled.div`
+  .error-bg {
+    background-color: #4d4d4d;
+    color: white;
+  }
+`;
 const Search = useMemo(() => {
   return (
     <Widget
       src={"${alias_new}/widget/page.projects.SearchBar"}
       props={{
         title: sort,
         numItems: filteredProjects.length,
+        term: searchTerm,
         itemName: "project",
         onSearch: (value) => {
           searchByWords(value);
@@ -163,8 +172,15 @@ if (showCreateModalProjectId) {
 }
 
 return (
-  <div className="d-flex flex-column gap-4 p-4">
+  <Container className="d-flex flex-column gap-4 p-4">
     {Search}
+    {filteredProjects.length === 0 && (
+      <div className="error-bg p-3 h6 rounded-3">
+        {searchTerm
+          ? "No projects were found for your search query."
+          : "Network issue: Couldn't fetch any projects, please try again later."}
+      </div>
+    )}
     {ProjectsComponent}
-  </div>
+  </Container>
 );