From c0d03cae0f8865d82e7b95fc53321dbd5a42c832 Mon Sep 17 00:00:00 2001 From: Megha <100185149+Megha-Dev-19@users.noreply.github.com> Date: Mon, 10 Jun 2024 23:48:36 +0530 Subject: [PATCH] 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 <16282460+elliotBraem@users.noreply.github.com> --- apps/new/widget/components/project/Card.jsx | 1 + .../widget/components/project/ListCard.jsx | 2 +- apps/new/widget/lib/projects.jsx | 9 ++- apps/new/widget/page/project/tabs/Code.jsx | 4 +- .../widget/page/project/tabs/Discussion.jsx | 4 +- .../new/widget/page/project/tabs/Overview.jsx | 4 +- apps/new/widget/page/project/tabs/Roadmap.jsx | 4 +- apps/new/widget/page/project/tabs/Task.jsx | 4 +- apps/new/widget/page/projects/Editor.jsx | 71 ++++++++++++++++--- .../widget/page/projects/PotlockImport.jsx | 20 +++++- 10 files changed, 95 insertions(+), 28 deletions(-) diff --git a/apps/new/widget/components/project/Card.jsx b/apps/new/widget/components/project/Card.jsx index f5dbaaee..495c0d07 100644 --- 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 index 7481e387..4a8bf05e 100644 --- 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 index 944b8265..28c1c811 100644 --- 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 index b4da66b0..6290ce25 100644 --- 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 index 3f760881..75e508dc 100644 --- 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 index 75142cb6..d53acc4b 100644 --- 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 index 5155d5cc..19f92b75 100644 --- 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 index 4e3315fd..e8ebbc07 100644 --- 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 index 0293dd7c..cbb70ecd 100644 --- 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 = () => { 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 index fec71081..13a97200 100644 --- 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,6 +99,12 @@ const ProjectList = styled.div` } `; +const Container = styled.div` + .error-bg { + background-color: #4d4d4d; + color: white; + } +`; const Search = useMemo(() => { return ( { props={{ title: sort, numItems: filteredProjects.length, + term: searchTerm, itemName: "project", onSearch: (value) => { searchByWords(value); @@ -163,8 +172,15 @@ if (showCreateModalProjectId) { } return ( -
+ {Search} + {filteredProjects.length === 0 && ( +
+ {searchTerm + ? "No projects were found for your search query." + : "Network issue: Couldn't fetch any projects, please try again later."} +
+ )} {ProjectsComponent} -
+ );