Merge branch 'main' into update-landing-909

Author: bruceplai

src/pages/IndvOrganization/IndvPageContainer.js

@@ -82,21 +82,22 @@ const useStyles = makeStyles((theme) => ({
 
 
 export const IndvPageContainer = (props) => {
-  const [projects, setProjects] = useState([]);
+  const classes = useStyles();
+  const inputSortMethodList = ['best match', 'updated', 'stars'];
+  const projectsPerPage = 4;
+  const [affiliations, setAffiliations] = useState({});
   const [bestMatchProjects, setBestMatchProjects] = useState([]);
+  const [dropDownListItem, setDropDownListItem] = useState('');
+  const [errorState, setErrorState] = useState(false);
+  const [isProjectSearchFinish, setIsProjectSearchFinish] = useState(false);
   const [lastUpdatedProjects, setLastUpdatedProjects] = useState([]);
-  const [stargazerProjects, setStargazerProjects] = useState([]);
-  const [pageNum, setPageNum] = useState(1);
+  const [loading, setLoading] = useState(true);
   const [pages, setPages] = useState(1);
+  const [pageNum, setPageNum] = useState(1);
+  const [projects, setProjects] = useState([]);
   const [results, setResults] = useState('');
-  const [dropDownListItem, setDropDownListItem] = useState('');
-  const [loading, setLoading] = useState(true);
   const [sortMethod, setSortMethod] = useState('best match');
-  const inputSortMethodList = ['best match', 'updated', 'stars'];
-  const [isProjectSearchFinish, setIsProjectSearchFinish] = useState(false);
-  const [errorState, setErrorState] = useState(false);
-  const projectsPerPage = 4;
-  const classes = useStyles();
+  const [stargazerProjects, setStargazerProjects] = useState([]);
 
   useEffect(() => {
     setLoading(true);
@@ -109,6 +110,7 @@ export const IndvPageContainer = (props) => {
     setResults('');
     setDropDownListItem('');
     setSortMethod('best match');
+    fetchAffiliations();
   }, [props.pathName]);
 
   // Fetching the data for 'other repo' dropdown elements
@@ -215,12 +217,12 @@ export const IndvPageContainer = (props) => {
       indexOfFirstProject,
       indexOfLastProject
     );
-    const items = currentProjects.map((i) => renderCard(i));
+    const items = currentProjects.map((i) => renderCard(i, affiliations));
     setResults(items);
     if (isProjectSearchFinish) {
       setLoading(false);
     }
-  }, [projects, isProjectSearchFinish]);
+  }, [projects, isProjectSearchFinish, affiliations]);
 
   useEffect(() => {
     if (sortMethod === 'best match') {
@@ -261,6 +263,17 @@ export const IndvPageContainer = (props) => {
     return sortedProjectsArr;
   };
 
+  const fetchAffiliations = () => {
+    const afflns = {};
+    axios.get(`${process.env.REACT_APP_API_URL}/api/organizations/`)
+      .then((res) => {
+        res.data.forEach((org) => {
+          afflns[org.org_tag] = true;
+        });
+        setAffiliations(afflns);
+      });
+  };
+
   const handlePageChange = (pageNum) => {
     setPageNum(pageNum);
     const indexOfLastProject = pageNum * projectsPerPage;
@@ -269,7 +282,7 @@ export const IndvPageContainer = (props) => {
       indexOfFirstProject,
       indexOfLastProject
     );
-    const items = currentProjects.map((i) => renderCard(i));
+    const items = currentProjects.map((i) => renderCard(i, affiliations));
     setResults(items);
   };
 

src/pages/IndvOrganization/RenderProjectCard.js

@@ -7,25 +7,34 @@ const calculateDaysSince = (updateTime) => {
   return Math.round(days / (1000 * 3600 * 24));
 };
 
-export const renderCard = (project) => {
+export const renderCard = (project, affiliations) => {
+  const affiliationTags = [];
+  const topicTags = [];
+  project.topics.forEach((topic) => {
+    if (affiliations[topic]) {
+      affiliationTags.push(topic);
+    } else {
+      topicTags.push(topic)
+    }
+  });
   return (
     <Grid item style={{ paddingTop: '12px' }}  key={project.id}>
       {' '}
       <ProjectCard
-        projectUrl={project.html_url}
-        organizationUrl={project.owner.html_url}
+        homepage={project.homepage}
+        issueCount={project.open_issues}
+        lastUpdate={calculateDaysSince(project.updated_at)}
         organizationAvatarUrl={project.owner.avatar_url}
+        organizationUrl={project.owner.html_url}
         ownerName={project.owner.login}
-        projectName={project.name}
         projectDescription={project.description}
-        homepage={project.homepage}
-        lastUpdate={calculateDaysSince(project.updated_at)}
-        issueCount={project.open_issues}
         projectLanguage={project.language}
-        topics={project.topics}
-        watchers={project.watchers_count}
+        projectName={project.name}
+        projectTags={affiliationTags}
+        projectUrl={project.html_url}
         stargazers={project.stargazers_count}
-        projectTags={project.parentOrgs}
+        topics={topicTags}
+        watchers={project.watchers_count}
       />
     </Grid>
   );