Merge pull request #1019 from open-sauced/beta

v1.36.0-beta.5 -> production

.eslintrc.json

@@ -3,7 +3,6 @@
   "rules": {
     "comma-dangle": "error",
     "quotes": "error",
-    "camelcase": "error",
     "jsx-quotes": "error",
     "semi": "error",
     "indent": ["error", 2]

CHANGELOG.md

@@ -5,6 +5,69 @@
 
 > All notable changes to this project will be documented in this file
 
+## [1.36.0-beta.5](https://github.com/open-sauced/insights/compare/v1.36.0-beta.4...v1.36.0-beta.5) (2023-03-16)
+
+
+### 🍕 Features
+
+* implement repo suggestions in create insight page ([#1011](https://github.com/open-sauced/insights/issues/1011)) ([8814289](https://github.com/open-sauced/insights/commit/8814289cc76ea9234f0ead05dd44078bc034dc66))
+
+## [1.36.0-beta.4](https://github.com/open-sauced/insights/compare/v1.36.0-beta.3...v1.36.0-beta.4) (2023-03-16)
+
+
+### 🍕 Features
+
+* add context to the Insights list page ([#1017](https://github.com/open-sauced/insights/issues/1017)) ([bd293d1](https://github.com/open-sauced/insights/commit/bd293d1a7e3d5912b6ae30378158d8ed1d1131de))
+
+## [1.36.0-beta.3](https://github.com/open-sauced/insights/compare/v1.36.0-beta.2...v1.36.0-beta.3) (2023-03-15)
+
+
+### 🐛 Bug Fixes
+
+* thumbnail topic images ([#1010](https://github.com/open-sauced/insights/issues/1010)) ([3f64f6d](https://github.com/open-sauced/insights/commit/3f64f6d3657abec66b227c04cd229df671c10689))
+
+
+### 🍕 Features
+
+* connect pull requests to API ([#1015](https://github.com/open-sauced/insights/issues/1015)) ([4e06a6f](https://github.com/open-sauced/insights/commit/4e06a6f09096dd57db45fc2f02174c6b4116c895))
+
+## [1.36.0-beta.2](https://github.com/open-sauced/insights/compare/v1.36.0-beta.1...v1.36.0-beta.2) (2023-03-15)
+
+
+### 🔥 Performance Improvements
+
+* load balance test, primarily for the backend ([2dcce75](https://github.com/open-sauced/insights/commit/2dcce75a6518dcaf49db1082c05c108c740d553f))
+
+## [1.36.0-beta.1](https://github.com/open-sauced/insights/compare/v1.35.0...v1.36.0-beta.1) (2023-03-15)
+
+
+### 🎨 Styles
+
+* log netlify env variables ([245b625](https://github.com/open-sauced/insights/commit/245b6255af96e1a76028812b4b88ebffcb9e5a15))
+
+
+### 🧑‍💻 Code Refactoring
+
+* correct some missing hook dependencies ([4868b5f](https://github.com/open-sauced/insights/commit/4868b5f49c222a0b17377f6cdea8c09711dbc618))
+* correct user insight repos search results ([9503d17](https://github.com/open-sauced/insights/commit/9503d17eff3d14f5b1af1f1fad120f393b47db08))
+* correctly await router transitions ([8fa63c0](https://github.com/open-sauced/insights/commit/8fa63c040bd7980657024b3bd60c1ce5781ec815))
+
+
+### 🐛 Bug Fixes
+
+* correct database repo types and import loops ([d70f067](https://github.com/open-sauced/insights/commit/d70f06720f4b22b3fc92ab2aaeaeb45240e8a8f7))
+* enable displaying/editing of insight page repos from API ([f4cc62f](https://github.com/open-sauced/insights/commit/f4cc62f5e6f39b96ec76041998b3664ab8068f8b))
+* formatting ([065ede0](https://github.com/open-sauced/insights/commit/065ede07e9218568f363e66cbb997d0c88597310))
+
+
+### 🍕 Features
+
+* add support for repo full name for onboarding/insight repos ([#861](https://github.com/open-sauced/insights/issues/861)) ([d075f90](https://github.com/open-sauced/insights/commit/d075f90a6b287fd52e31ec96cd8a2256f147b74f))
+* connect contributors to public API ([0eb73e9](https://github.com/open-sauced/insights/commit/0eb73e9b081477567be8762689ff3ff964b5869e))
+* connect pull requests to search API ([5904102](https://github.com/open-sauced/insights/commit/5904102337a875e17ff8aeef5cdfe793d0c7dc06))
+* get pull requests for dashboard from API ([ec31c42](https://github.com/open-sauced/insights/commit/ec31c4207f321dccb9b8281b6171cd41235e3b3c))
+* implement linked data with JSON-LD ([#888](https://github.com/open-sauced/insights/issues/888)) ([e8bda0e](https://github.com/open-sauced/insights/commit/e8bda0ec892750ad2d91acccd51624ed669a9542)), closes [#814](https://github.com/open-sauced/insights/issues/814)
+
 ## [1.35.0](https://github.com/open-sauced/insights/compare/v1.34.0...v1.35.0) (2023-03-14)
 
 

components/atoms/LanguagePill/LanguagePill.tsx

@@ -1,22 +1,25 @@
 import React from "react";
 import Image, { StaticImageData } from "next/image";
 
-import JavascriptIcon from "img/topic-thumbnails/javascript.svg";
-import ReactIcon from "/img/topic-thumbnails/react.svg";
-import PythonIcon from "/img/topic-thumbnails/python.svg";
-import AIIcon from "/img/topic-thumbnails/ai.svg";
-import MLIcon from "/img/topic-thumbnails/machine-learning.svg";
-import RustIcon from "/img/topic-thumbnails/rust.svg";
-import PhpIcon from "/img/topic-thumbnails/php.svg";
-import CsharpIcon from "/img/topic-thumbnails/c-sharp.svg";
-import CIcon from "/img/topic-thumbnails/c.svg";
-import CppIcon from "/img/topic-thumbnails/c-plus.svg";
-import TypeScriptIcon from "/img/topic-thumbnails/typescript.svg";
-import RubyIcon from "/img/topic-thumbnails/ruby.svg";
-import JavaIcon from "/img/topic-thumbnails/java.svg";
-import GolangIcon from "/img/topic-thumbnails/golang.svg";
+
+import JavascriptIcon from "img/icons/interests/javascript.svg";
+import ReactIcon from "/img/icons/interests/react.svg";
+import PythonIcon from "/img/icons/interests/python.svg";
+import AIIcon from "/img/icons/interests/ai.svg";
+import MLIcon from "/img/icons//interests/machine-learning.svg";
+import RustIcon from "/img/icons/interests/rust.svg";
+import PhpIcon from "/img/icons/interests/php.svg";
+import CsharpIcon from "/img/icons/interests/c-sharp.svg";
+import CIcon from "/img/icons/interests/c.svg";
+import CppIcon from "/img/icons/interests/c-plus.svg";
+import TypeScriptIcon from "/img/icons/interests/typescript.svg";
+import RubyIcon from "/img/icons/interests/ruby.svg";
+import JavaIcon from "/img/icons/interests/java.svg";
+import GolangIcon from "img/icons/interests/golang.svg";
+
 import topicNameFormatting from "lib/utils/topic-name-formatting";
 
+
 interface LanguagePillProps {
   topic:
     | "react"

components/molecules/FilterHeader/filter-header.tsx

@@ -23,11 +23,11 @@ const HeaderFilter = () => {
   const { filterName, toolName, selectedFilter } = router.query;
   const filterBtnRouting = (filter: string) => {
     captureAnayltics("Filters", "toolsFilter", `${filter} applied`);
-    router.push(`/${filterName}/${toolName}/filter/${filter.toLocaleLowerCase()}`);
+    return router.push(`/${filterName}/${toolName}/filter/${filter.toLocaleLowerCase()}`);
   };
 
   const cancelFilterRouting = () => {
-    router.push(`/${filterName}/${toolName}`);
+    return router.push(`/${filterName}/${toolName}`);
   };
 
   const topicRouting = (topic: string) => {

components/molecules/LatestPrTableRow/latest-pr-table-row.tsx

@@ -17,8 +17,7 @@ interface LatestPrTableRowProps {
   noOfFilesChanged: number;
   noOfLinesChanged: number;
   isHoverCard?: boolean;
-  repoName: string;
-  repoOwner: string;
+  repoFullName: string;
   prNumber: number;
   prUpdatedTime: string;
 }
@@ -31,8 +30,7 @@ const LatestPrTableRow = ({
   noOfLinesChanged,
   merged,
   isHoverCard,
-  repoName,
-  repoOwner,
+  repoFullName,
   prNumber,
   prUpdatedTime
 }: LatestPrTableRowProps) => {
@@ -58,18 +56,18 @@ const LatestPrTableRow = ({
             <VscGitPullRequestDraft title="Draft Pull Request" />
           </IconContext.Provider>
         )}
-        <Text title="updated date">{calcDistanceFromToday(new Date(parseInt(prUpdatedTime, 10)))}</Text>
+        <Text title="updated date">{calcDistanceFromToday(new Date(prUpdatedTime))}</Text>
         <Text title={prName} className="!text-light-slate-12 !w-32 md:!w-72 !truncate">
-          <a href={`https://github.com/${repoOwner}/${repoName}/pull/${prNumber}`} target="_blank" rel="noreferrer">
+          <a href={`https://github.com/${repoFullName}/pull/${prNumber}`} target="_blank" rel="noreferrer">
             {prName}
           </a>
         </Text>
       </div>
       <div className={`${isHoverCard && "ml-auto"} justify-end w-[calc(10%-4px)] text-sm text-light-slate-11`}>
-        {calcDistanceFromToday(new Date(parseInt(prIssuedTime, 10)))}
+        {calcDistanceFromToday(new Date(prIssuedTime))}
       </div>
       <div className={`${isHoverCard ? "hidden" : "flex"} justify-end w-[calc(10%-4px)] text-sm text-light-slate-11`}>
-        {merged ? calcDistanceFromToday(new Date(parseInt(prMergedTime, 10))) : "-"}
+        {merged ? calcDistanceFromToday(new Date(prMergedTime)) : "-"}
       </div>
       <div className={`${isHoverCard ? "hidden" : "flex"} justify-end w-[calc(10%-4px)] text-sm text-light-slate-11`}>
         {noOfFilesChanged >= 1000 ? humanizeNumber(noOfFilesChanged, "abbreviation") : noOfFilesChanged}

components/molecules/PullRequestTable/pull-request-table.tsx

@@ -1,4 +1,4 @@
-import { useTopicContributorPRs } from "lib/hooks/useTopicContributorPRs";
+import useContributorPullRequests from "lib/hooks/api/useContributorPullRequests";
 
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
 import LatestPrTableHeader from "../LatestPrTableHeader/latest-pr-table-header";
@@ -22,7 +22,7 @@ interface CardTableProps {
 }
 
 const PullRequestTable = ({ contributor, topic, repositories, limit, isHoverCard }: CardTableProps): JSX.Element => {
-  const { data, isLoading } = useTopicContributorPRs(contributor, topic, repositories, limit);
+  const { data, isLoading } = useContributorPullRequests(contributor, topic, repositories, limit);
 
   return data.length > 0 ? (
     <>
@@ -37,11 +37,11 @@ const PullRequestTable = ({ contributor, topic, repositories, limit, isHoverCard
                 merged,
                 merged_at: prMergedTime,
                 created_at: prIssuedTime,
-                filesCount: noOfFilesChanged,
-                linesCount: noOfLinesChanged,
+                changed_files: noOfFilesChanged,
+                additions,
+                deletions,
                 number: prNumber,
-                repo_name: repoName,
-                repo_owner: repoOwner,
+                full_name: fullName,
                 updated_at: prUpdatedTime
               },
               index
@@ -53,9 +53,8 @@ const PullRequestTable = ({ contributor, topic, repositories, limit, isHoverCard
                 prStatus,
                 merged,
                 noOfFilesChanged,
-                noOfLinesChanged,
-                repoName,
-                repoOwner,
+                noOfLinesChanged: Math.abs(additions - deletions),
+                repoFullName: fullName,
                 prNumber,
                 prUpdatedTime
               };

components/molecules/RepoCardProfile/repo-card-profile.tsx

@@ -6,8 +6,8 @@ import { VscIssues } from "react-icons/vsc";
 
 export interface RepoCardProfileProps {
   avatar?: string | StaticImageData;
-  orgName?: string;
-  repoName?: string;
+  orgName: string;
+  repoName: string;
   prCount?: number;
   issueCount?: number;
   className?: string;

components/molecules/SuggestedRepo/suggested-repo.tsx

@@ -7,14 +7,16 @@ import Avatar from "components/atoms/Avatar/avatar";
 import RepoCardProfile, { RepoCardProfileProps } from "../RepoCardProfile/repo-card-profile";
 
 interface SuggestedRopsitoryProps {
-  data?: RepoCardProfileProps;
+  data: RepoCardProfileProps;
+  onAddRepo?: (repo: string) => void;
 }
-const SuggestedRepository = ({ data }: SuggestedRopsitoryProps) => {
-  // Utilizing static data for testing purpose until real data is available
+const SuggestedRepository = ({ data, onAddRepo }: SuggestedRopsitoryProps) => {
   return (
     <div className="flex justify-between items-center">
       <RepoCardProfile {...data} />
-      <Button variant="text" className="border border-light-slate-6 shadow-input">
+      <Button variant="text" className="border border-light-slate-6 shadow-input"
+        onClick={() => onAddRepo && onAddRepo(`${data.orgName}/${data.repoName}`)}
+      >
         Add to Page
       </Button>
     </div>

components/organisms/Dashboard/dashboard.tsx

@@ -9,10 +9,10 @@ import { ScatterChartDataItems } from "components/molecules/NivoScatterChart/niv
 import humanizeNumber from "lib/utils/humanizeNumber";
 import { useMediaQuery } from "lib/hooks/useMediaQuery";
 import { getInsights, useInsights } from "lib/hooks/useInsights";
-import { useTopicPRs } from "lib/hooks/useTopicPRs";
 import { calcDaysFromToday } from "lib/utils/date-utils";
 import roundedImage from "lib/utils/roundedImages";
 import { useTopicContributions } from "lib/hooks/useTopicContributions";
+import usePullRequests from "lib/hooks/api/usePullRequests";
 
 type ContributorPrMap = { [contributor: string]: DbRepoPR };
 export type PrStatusFilter = "open" | "closed" | "all";
@@ -23,7 +23,7 @@ interface DashboardProps {
 
 export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
   const { data: insightsData, isLoading } = useInsights(repositories);
-  const { data: prData, isError: prError } = useTopicPRs(undefined, repositories);
+  const { data: prData, isError: prError } = usePullRequests(undefined, repositories);
   const { data: contributorData } = useTopicContributions(10, repositories);
   const [showBots, setShowBots] = useState(false);
   const isMobile = useMediaQuery("(max-width:720px)");
@@ -44,10 +44,10 @@ export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
     if (curr.state !== prStateFilter && prStateFilter !== "all") return prs;
 
     if (prs[curr.author_login]) {
-      prs[curr.author_login].linesCount += curr.linesCount;
+      prs[curr.author_login].linesCount += Math.abs(curr.additions - curr.deletions);
     } else {
       prs[curr.author_login] = { ...curr };
-      prs[curr.author_login].linesCount = curr.linesCount;
+      prs[curr.author_login].linesCount = Math.abs(curr.additions - curr.deletions);
     }
 
     return prs;
@@ -70,7 +70,7 @@ export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
       const author_image = author_login.includes("[bot]") ? "octocat" : author_login;
 
       const data = {
-        x: calcDaysFromToday(new Date(parseInt(updated_at, 10))),
+        x: calcDaysFromToday(new Date(updated_at)),
         y: linesCount,
         contributor: author_login,
         image: roundedImage(`https://www.github.com/${author_image}.png?size=60`, process.env.NEXT_PUBLIC_CLOUD_NAME)

components/organisms/InsightPage/InsightPage.tsx

@@ -18,6 +18,8 @@ import useStore from "lib/store";
 import Error from "components/atoms/Error/Error";
 import Search from "components/atoms/Search/search";
 import { useDebounce } from "rooks";
+import SuggestedRepositoriesList from "../SuggestedRepoList/suggested-repo-list";
+import { RepoCardProfileProps } from "components/molecules/RepoCardProfile/repo-card-profile";
 
 enum RepoLookupError {
   Initial = 0,
@@ -105,7 +107,7 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
       },
       body: JSON.stringify({
         name,
-        ids: repos.map((repo) => repo.id),
+        repos: repos.map((repo) => ({ id: repo.host_id, fullName: repo.full_name })),
         // eslint-disable-next-line
         is_public: isPublic
       })
@@ -129,7 +131,7 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
       },
       body: JSON.stringify({
         name,
-        ids: repos.map((repo) => repo.id),
+        repos: repos.map((repo) => ({ id: repo.host_id, fullName: repo.full_name })),
         // eslint-disable-next-line
         is_public: isPublic
       })
@@ -261,6 +263,11 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
     updateSuggestionsDebounced();
   }, [repoSearchTerm]);
 
+  const staticSuggestedRepos: RepoCardProfileProps[] = [
+    { avatar: "https://avatars.githubusercontent.com/u/57568598?s=200&v=4", prCount: 8, repoName: "insights", issueCount: 87, orgName: "open-sauced" },
+    { avatar: "https://avatars.githubusercontent.com/u/59704711?s=200&v=4", prCount: 26, repoName: "cli", issueCount: 398, orgName: "cli" },
+    { avatar: "https://avatars.githubusercontent.com/u/42048915?s=200&v=4", prCount: 100, repoName: "deno", issueCount: 1200, orgName: "denoland" }
+  ];
 
   return (
     <section className="flex  flex-col lg:flex-row w-full lg:gap-20 py-4 lg:pl-28 justify-center ">
@@ -299,6 +306,9 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
               Add Repository
             </Button>
           </div>
+
+          <SuggestedRepositoriesList reposData={staticSuggestedRepos}
+            onAddRepo={(repo) => {loadAndAddRepo(repo);}} />
         </div>
 
         <div>

components/organisms/Repositories/repositories.tsx

@@ -73,9 +73,9 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => {
 
   const handleOnSearch = (search?: string) => {
     if (search && /^[a-zA-Z0-9\-\.]+\/[a-zA-Z0-9\-\.]+$/.test(search)) {
-      router.push(`/${topic}/${toolName}/filter/${search}`);
+      return router.push(`/${topic}/${toolName}/filter/${search}`);
     } else {
-      router.push(`/${topic}/${toolName}`);
+      return router.push(`/${topic}/${toolName}`);
     }
   };
 

components/organisms/SuggestedRepoList/suggested-repo-list.tsx

@@ -1,21 +1,27 @@
 import Title from "components/atoms/Typography/title";
+import { RepoCardProfileProps } from "components/molecules/RepoCardProfile/repo-card-profile";
 import SuggestedRepository from "components/molecules/SuggestedRepo/suggested-repo";
 import React from "react";
 
-const SuggestedRepositoriesList = () => {
-  // Random array to be replaced with real repositories data
-  const randomSuggestions = Array.apply(null, Array(3));
+interface SuggestedRepositoriesListProps {
+  reposData: RepoCardProfileProps[];
+  onAddRepo?: (repo: string) => void;
+}
+
+const SuggestedRepositoriesList = ({ reposData, onAddRepo }: SuggestedRepositoriesListProps) => {
+
   return (
     <div>
       <Title className="!text-light-slate-11 !text-sm" level={4}>
         Suggested Repositories:
       </Title>
 
       <div className="mt-6 flex flex-col gap-3 border-b pb-10">
-        {randomSuggestions.map((item, index) => (
+        {reposData.map((item, index) => (
           <SuggestedRepository
             key={index}
-            data={{ avatar: "", prCount: 23, repoName: "hot", issueCount: 113, orgName: "open sauced" }}
+            data={item}
+            onAddRepo={onAddRepo}
           />
         ))}
       </div>

components/organisms/TopNav/top-nav.tsx

@@ -25,7 +25,7 @@ const TopNav: React.FC = () => {
           {!!user && onboarded ? (
             <>
               <Link className="text-sm text-light-slate-10" href={"/hub/insights"}>
-                Insights Hub
+                Insights
               </Link>
               <Link className="text-sm text-light-slate-10" href={`/${userInterest}/dashboard/filter/recent`}>
                 Explore