rename everything from Post to Repo open-sauced#313

janie-lee-developer · Oct 4, 2022 · e387116 · e387116
1 parent 0cb48bb
commit e387116
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 112 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import Footer from "./components/Footer";
 import PrimaryNav from "./components/PrimaryNav";
-import PostsWrap from "./components/PostsWrap";
+import RepoWrap from "./components/RepoWrap";
 import { initiatePostHog } from "./lib/analytics";
 import { BrowserRouter } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
@@ -20,10 +20,9 @@ console.log(
 ╚██████╔╝██║     ███████╗██║ ╚████║    ███████║██║  ██║╚██████╔╝╚██████╗███████╗██████╔╝
  ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═══╝    ╚══════╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝╚══════╝╚═════╝%c v${getAppVersion()}`,
   "color:#f6d82b",
-  "color:green;font-weight:bold",
+  "color:green;font-weight:bold"
 );
 
-
 const App = (): JSX.Element => {
   initiatePostHog();
 
@@ -44,7 +43,7 @@ const App = (): JSX.Element => {
             <Hero />
           </GradBackground>
 
-          <PostsWrap />
+          <RepoWrap />
 
           <Footer />
         </div>

diff --git a/src/components/GridDisplay.tsx b/src/components/GridDisplay.tsx
@@ -1,5 +1,5 @@
 import { User } from "@supabase/supabase-js";
-import PostGrid from "./PostGrid";
+import RepoGrid from "./RepoGrid";
 
 export declare interface GridDisplayProps {
   activeLink: string | null;
@@ -13,11 +13,7 @@ const GridDisplay = ({ activeLink, limit, handleLoadingMore, fetchedData, user }
   <div>
     <div className="container grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-screen-xl mx-auto auto-rows-fr">
       {fetchedData.map((item, i) => (
-        <PostGrid
-          key={`${item.full_name}_${i}`}
-          data={item}
-          user={user}
-        />
+        <RepoGrid key={`${item.full_name}_${i}`} data={item} user={user} />
       ))}
 
       {fetchedData.length > 0 && activeLink !== "myVotes" && limit <= 100 && (

diff --git a/src/components/ListRepositories.tsx b/src/components/ListRepositories.tsx
@@ -1,6 +1,6 @@
 import { BsFillCalendar2Fill } from "react-icons/bs";
 import camelCaseToTitleCase from "../lib/camelCaseToTitleCase";
-import PostList from "./PostList";
+import RepoList from "./RepoList";
 
 export declare interface ListRepositoriesProps {
   activeLink: string | null;
@@ -9,41 +9,37 @@ export declare interface ListRepositoriesProps {
   fetchedData: DbRepo[];
 }
 
-const ListRepositories = ({ activeLink, limit, handleLoadingMore, fetchedData }: ListRepositoriesProps): JSX.Element => (
+const ListRepositories = ({
+  activeLink,
+  limit,
+  handleLoadingMore,
+  fetchedData,
+}: ListRepositoriesProps): JSX.Element => (
   <div className="mx-auto max-w-7xl px-4 mt-10">
     <div className="flex flex-col gap-y-5">
       <div className="flex items-center gap-x-2.5">
         <BsFillCalendar2Fill className="w-8 h-8 text-white" />
 
-        {activeLink &&
-          <h1 className="text-2xl text-white font-semibold">
-            {`${camelCaseToTitleCase(activeLink)} Repositories`}
-          </h1>}
+        {activeLink && (
+          <h1 className="text-2xl text-white font-semibold">{`${camelCaseToTitleCase(activeLink)} Repositories`}</h1>
+        )}
       </div>
 
-      {
-        fetchedData.map((item, i) => (
-          <PostList
-            key={`${item.full_name}_${i}`}
-            data={item}
-          />
-        ))
-      }
+      {fetchedData.map((item, i) => (
+        <RepoList key={`${item.full_name}_${i}`} data={item} />
+      ))}
     </div>
 
-    {
-      fetchedData.length > 0 &&
-        activeLink !== "myVotes" &&
-        limit <= 100 &&
-          <div className="flex justify-center">
-            <button
-              className="bg-white text-gray-700 mt-4 mb-4 text-base border-gray-400 border font-normal py-1 px-4 rounded"
-              onClick={() => handleLoadingMore()}
-            >
-              Load More
-            </button>
-          </div>
-    }
+    {fetchedData.length > 0 && activeLink !== "myVotes" && limit <= 100 && (
+      <div className="flex justify-center">
+        <button
+          className="bg-white text-gray-700 mt-4 mb-4 text-base border-gray-400 border font-normal py-1 px-4 rounded"
+          onClick={() => handleLoadingMore()}
+        >
+          Load More
+        </button>
+      </div>
+    )}
   </div>
 );
 

diff --git a/src/components/PostGrid.tsx → src/components/RepoGrid.tsx b/src/components/PostGrid.tsx → src/components/RepoGrid.tsx
@@ -6,13 +6,15 @@ import { getRepoLink } from "../lib/github";
 import useSupabaseAuth from "../hooks/useSupabaseAuth";
 import Avatar from "./Avatar";
 
-export declare interface PostGridProps {
+export declare interface RepoGridProps {
   data: DbRepo;
   user?: User;
 }
 
-const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
-  const { user_metadata: { sub: user_id } } = user!;
+const RepoGrid = ({ data, user }: RepoGridProps): JSX.Element => {
+  const {
+    user_metadata: { sub: user_id },
+  } = user!;
   const {
     id: repo_id,
     votesRelation: [{ votesCount }],
@@ -21,7 +23,7 @@ const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
   const [votes, updateVotesState] = useState(votesCount || 0);
   const { signIn } = useSupabaseAuth();
 
-  async function handleVoteUpdate (votes: number, repo_id: number) {
+  async function handleVoteUpdate(votes: number, repo_id: number) {
     const updatedVotes = await handleVoteUpdateByRepo(votes, repo_id, user_id);
 
     updatedVotes > 0 && updateVotesState(updatedVotes);
@@ -32,17 +34,11 @@ const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
       <div className="w-full flex justify-between items-center mb-3">
         <div className="flex w-full">
           {data.contributions[0] && (
-            <Avatar
-              contributor={data.contributions[0]?.contributor}
-              lastPr={data.contributions[0]?.last_merged_at}
-            />
+            <Avatar contributor={data.contributions[0]?.contributor} lastPr={data.contributions[0]?.last_merged_at} />
           )}
 
           {data.contributions[1] && (
-            <Avatar
-              contributor={data.contributions[1]?.contributor}
-              lastPr={data.contributions[1]?.last_merged_at}
-            />
+            <Avatar contributor={data.contributions[1]?.contributor} lastPr={data.contributions[1]?.last_merged_at} />
           )}
         </div>
 
@@ -53,9 +49,7 @@ const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
           >
             <FaArrowAltCircleUp aria-hidden="true" />
 
-            <p className="font-bold">
-              {votes}
-            </p>
+            <p className="font-bold">{votes}</p>
           </button>
         </div>
       </div>
@@ -77,4 +71,4 @@ const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
   );
 };
 
-export default PostGrid;
+export default RepoGrid;
diff --git a/src/components/PostList.tsx → src/components/RepoList.tsx b/src/components/PostList.tsx → src/components/RepoList.tsx
@@ -7,11 +7,11 @@ import useVotedRepos from "../hooks/useVotedRepos";
 import { RiCheckboxCircleFill } from "react-icons/ri";
 import cx from "classnames";
 
-export declare interface PostListProps {
+export declare interface RepoListProps {
   data: DbRepo;
 }
 
-const PostList = ({ data }: PostListProps): JSX.Element => {
+const RepoList = ({ data }: RepoListProps): JSX.Element => {
   const { votedReposIds, checkVoted, voteHandler } = useVotedRepos();
   const [isVoted, setIsVoted] = useState(false);
 
@@ -39,57 +39,30 @@ const PostList = ({ data }: PostListProps): JSX.Element => {
     <div className="flex flex-col gap-y-[20px] md:flex-row bg-white border-[1px] p-[16px] gap-x-[20px] font-Inter border-borderGrey overflow-hidden rounded-[16px]">
       <div>
         <div className="rounded-[8px] overflow-hidden w-[88px] h-[88px]">
-          <a
-            href={getRepoLink(full_name)}
-            rel="noopener noreferrer"
-            target="_blank"
-            title={`Visit ${full_name}`}
-          >
-            <img
-              alt={full_name}
-              src={getAvatarLink(owner)}
-            />
+          <a href={getRepoLink(full_name)} rel="noopener noreferrer" target="_blank" title={`Visit ${full_name}`}>
+            <img alt={full_name} src={getAvatarLink(owner)} />
           </a>
         </div>
       </div>
 
       <div className="flex-1">
-        <a
-          href={getRepoLink(full_name)}
-          rel="noopener noreferrer"
-          target="_blank"
-          title={`Visit ${full_name}`}
-        >
-          <p className="text-sm text-textGrey">
-            {full_name}
-          </p>
+        <a href={getRepoLink(full_name)} rel="noopener noreferrer" target="_blank" title={`Visit ${full_name}`}>
+          <p className="text-sm text-textGrey">{full_name}</p>
 
-          <p className="text-base text-textGrey">
-            {description}
-          </p>
+          <p className="text-base text-textGrey">{description}</p>
         </a>
 
         <div className="flex gap-x-[16px] mt-[16px]">
           <div className="flex gap-[5px] items-center text-textGrey">
-            <FaDotCircle
-              aria-hidden="true"
-              className="w-[16px]"
-            />
-
-            <p className="text-sm">
-              {humanizeNumber(issues)}
-            </p>
+            <FaDotCircle aria-hidden="true" className="w-[16px]" />
+
+            <p className="text-sm">{humanizeNumber(issues)}</p>
           </div>
 
           <div className="flex gap-[5px] items-center text-textGrey">
-            <FaStar
-              aria-hidden="true"
-              className="w-[16px]"
-            />
-
-            <p className="text-sm">
-              {humanizeNumber(stars)}
-            </p>
+            <FaStar aria-hidden="true" className="w-[16px]" />
+
+            <p className="text-sm">{humanizeNumber(stars)}</p>
           </div>
 
           <StackedAvatar contributors={contributions} />
@@ -101,22 +74,23 @@ const PostList = ({ data }: PostListProps): JSX.Element => {
           "w-full min-w-[60px] rounded-[6px] group border-[1px] cursor-pointer transition-all duration-200 flex gap-[5px] py-[10px] justify-center items-center",
           isVoted ? "bg-lightOrange01 border-osOrange" : "bg-white",
           "md:w-[60px] md:py-0 md:flex-col",
-          isVoted ? "hover:border-osGrey hover:bg-gray-100" : "hover:border-osOrange",
+          isVoted ? "hover:border-osGrey hover:bg-gray-100" : "hover:border-osOrange"
         )}
-        onClick={async () => voteHandler(votes, repo_id).then(newVotes => typeof newVotes === "number" && setVotes(newVotes))}
+        onClick={async () =>
+          voteHandler(votes, repo_id).then((newVotes) => typeof newVotes === "number" && setVotes(newVotes))
+        }
       >
-        {isVoted
-          ? (
-            <RiCheckboxCircleFill className="text-osOrange group-hover:text-osGrey transition-all duration-300 w-[15px] h-[15px]" />)
-          : (
-            <FaArrowAltCircleUp className="text-gray-500 group-hover:text-osOrange transition-all duration-300 w-[13px] h-[13px]" />
-          )}
+        {isVoted ? (
+          <RiCheckboxCircleFill className="text-osOrange group-hover:text-osGrey transition-all duration-300 w-[15px] h-[15px]" />
+        ) : (
+          <FaArrowAltCircleUp className="text-gray-500 group-hover:text-osOrange transition-all duration-300 w-[13px] h-[13px]" />
+        )}
 
         <span
           className={cx(
             "text-xs font-semibold",
             isVoted ? "text-osOrange" : "text-gray-500",
-            isVoted ? "group-hover:text-osGrey" : "group-hover:text-osOrange",
+            isVoted ? "group-hover:text-osGrey" : "group-hover:text-osOrange"
           )}
         >
           {humanizeNumber(votes)}
@@ -126,4 +100,4 @@ const PostList = ({ data }: PostListProps): JSX.Element => {
   );
 };
 
-export default PostList;
+export default RepoList;
diff --git a/src/components/PostsWrap.tsx → src/components/RepoWrap.tsx b/src/components/PostsWrap.tsx → src/components/RepoWrap.tsx
@@ -7,7 +7,7 @@ import HotRepositories from "./HotRepositories";
 import ListRepositories from "./ListRepositories";
 import SecondaryNav from "./SecondaryNav";
 
-export declare interface PostWrapProps {
+export declare interface RepoWrapProps {
   textToSearch?: string;
 }
 
@@ -26,7 +26,7 @@ const parseLimitValue = (limit: string | null): number => {
   return value;
 };
 
-const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
+const RepoWrap = ({ textToSearch }: RepoWrapProps): JSX.Element => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [fetchedData, setFetchedData] = useState<DbRepo[]>([]);
   const { user } = useSupabaseAuth();
@@ -46,16 +46,12 @@ const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
   }, [limit]);
 
   useEffect(() => {
-    fetchData()
-      .catch(console.error);
+    fetchData().catch(console.error);
   }, [activeLink, limit, textToSearch]);
 
   return (
     <div className="bg-darkestGrey">
-      <SecondaryNav
-        activeLink={activeLink}
-        user={user}
-      />
+      <SecondaryNav activeLink={activeLink} user={user} />
 
       <HotRepositories />
 
@@ -69,4 +65,4 @@ const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
   );
 };
 
-export default PostsWrap;
+export default RepoWrap;