refactor: update all collaboration copy to connection (#1831)

components/atoms/NotificationsCard/notification-card.tsx

@@ -5,7 +5,7 @@ import { FaRegSmile, FaUserCircle } from "react-icons/fa";
 import { getNotificationURL } from "lib/utils/get-notification-url";
 
 interface NotificationCard {
-  type: "highlight_reaction" | "follow" | "collaboration";
+  type: "highlight_reaction" | "follow" | "connections";
   message: string;
   id: string;
 }
@@ -14,7 +14,7 @@ const NotificationCard = ({ type, message, id }: NotificationCard) => {
   const Icons = {
     highlight_reaction: FaRegSmile,
     follow: FaUserCircle,
-    collaboration: FaUserCircle,
+    connections: FaUserCircle,
   };
 
   const Icon = Icons[type];

components/molecules/CollaborationCard/collaboration-card.tsx → components/molecules/ConnectionCard/connection-card.tsx

@@ -4,22 +4,22 @@ import Avatar from "components/atoms/Avatar/avatar";
 import { getAvatarByUsername } from "lib/utils/github";
 import Button from "components/atoms/Button/button";
 
-export interface CollaborationRequestObject extends React.ComponentProps<"div"> {
+export interface ConnectionRequestObject extends React.ComponentProps<"div"> {
   requestor: DbUser;
   outreachMessage: string;
   requestId: string;
   onAccept: (id: string) => void;
   onDecline: (id: string) => void;
 }
 
-const CollaborationCard = ({
+const ConnectionCard = ({
   requestor,
   outreachMessage,
   className,
   requestId,
   onAccept,
   onDecline,
-}: CollaborationRequestObject) => {
+}: ConnectionRequestObject) => {
   return (
     <div className={clsx("flex flex-col w-full gap-4 p-4 bg-white border rounded-2xl border-light-slate-6", className)}>
       <div className="flex items-center justify-between text-sm ">
@@ -45,4 +45,4 @@ const CollaborationCard = ({
   );
 };
 
-export default CollaborationCard;
+export default ConnectionCard;

components/molecules/CollaborationSummaryCard/collaboration-summary-card.tsx → components/molecules/ConnectionSummaryCard/connection-summary-card.tsx

@@ -3,20 +3,20 @@ import { TbMessageCode } from "react-icons/tb";
 import React from "react";
 import { BiMessage } from "react-icons/bi";
 import Avatar from "components/atoms/Avatar/avatar";
-import { CollaborationRequestObject } from "../CollaborationCard/collaboration-card";
+import { ConnectionRequestObject } from "../ConnectionCard/connection-card";
 
-interface CollaborationSummaryCardProps {
-  requests: CollaborationRequestObject[];
+interface ConnectionSummaryCardProps {
+  requests: ConnectionRequestObject[];
   connectionsCount?: number;
   messagesCount?: number;
 }
-const CollaborationSummaryCard = ({ requests, connectionsCount, messagesCount }: CollaborationSummaryCardProps) => {
+const ConnectionSummaryCard = ({ requests, connectionsCount, messagesCount }: ConnectionSummaryCardProps) => {
   return (
-    <div className="bg-white flex flex-col gap-4 rounded-2xl border-light-slate-6  p-4 border max-w-2xl">
-      <div className="flex justify-between text-sm items-center ">
-        <div className="flex gap-2 text-sm items-center">
+    <div className="flex flex-col max-w-2xl gap-4 p-4 bg-white border rounded-2xl border-light-slate-6">
+      <div className="flex items-center justify-between text-sm ">
+        <div className="flex items-center gap-2 text-sm">
           <div className="flex items-center">
-            Collaboration requests:{" "}
+            Connection requests:{" "}
             <span className="flex items-center gap-3 ml-3">
               {requests.map((i, index) => (
                 <Avatar
@@ -31,11 +31,11 @@ const CollaborationSummaryCard = ({ requests, connectionsCount, messagesCount }:
         </div>
         <div className="flex gap-2">
           <button className="px-2">Archive</button>
-          <button className="bg-light-orange-9 px-2 py-1 outline-none rounded-lg text-white">Expand</button>
+          <button className="px-2 py-1 text-white rounded-lg outline-none bg-light-orange-9">Expand</button>
         </div>
       </div>
       <div>{requests[0].outreachMessage}</div>
-      <div className="text-light-slate-10 gap-3 items-center flex">
+      <div className="flex items-center gap-3 text-light-slate-10">
         <div className="flex items-center gap-2">
           <TbMessageCode /> <span className="text-sm">{connectionsCount} connections</span>
         </div>
@@ -47,4 +47,4 @@ const CollaborationSummaryCard = ({ requests, connectionsCount, messagesCount }:
   );
 };
 
-export default CollaborationSummaryCard;
+export default ConnectionSummaryCard;

components/molecules/ContributorProfileHeader/contributor-profile-header.tsx

@@ -21,7 +21,7 @@ import RainbowBg from "img/rainbow-cover.png";
 import Button from "components/atoms/Button/button";
 import Text from "components/atoms/Typography/text";
 import { Textarea } from "components/atoms/Textarea/text-area";
-import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
+import { useUserConnections } from "lib/hooks/useUserConnections";
 import { useToast } from "lib/hooks/useToast";
 import { cardPageUrl } from "lib/utils/urls";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../Dialog/dialog";
@@ -37,7 +37,7 @@ interface ContributorProfileHeaderProps {
   username: string | undefined;
   handleSignIn: (params: SignInWithOAuthCredentials) => void;
   isOwner: boolean;
-  isRecievingCollaborations?: boolean;
+  isRecievingConnections?: boolean;
   isPremium?: boolean;
 }
 const ContributorProfileHeader = ({
@@ -51,14 +51,14 @@ const ContributorProfileHeader = ({
   user,
   handleSignIn,
   isOwner,
-  isRecievingCollaborations,
+  isRecievingConnections,
   isPremium,
 }: ContributorProfileHeaderProps) => {
   const router = useRouter();
   const currentPath = router.asPath;
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const { requestCollaboration } = useUserCollaborations();
+  const { requestConnection } = useUserConnections();
   const [message, setMessage] = useState("");
   const [charCount, setCharCount] = useState(0);
   const [isCheckingCharLimit, setIsCheckingCharLimit] = useState<boolean>(false);
@@ -82,12 +82,12 @@ const ContributorProfileHeader = ({
     }
   };
 
-  const handleCollaborationRequest = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleConnectionRequest = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (message && username) {
       setLoading(true);
-      await requestCollaboration({ username, message });
+      await requestConnection({ username, message });
       setIsDialogOpen(false);
       setTimeout(() => {
         document.body.setAttribute("style", "pointer-events:auto !important");
@@ -230,7 +230,7 @@ const ContributorProfileHeader = ({
                           </button>
                         </DropdownMenuItem>
 
-                        {isPremium && isRecievingCollaborations && (
+                        {isPremium && isRecievingConnections && (
                           <DropdownMenuItem className="rounded-md">
                             <button onClick={() => setIsDialogOpen(true)} className="flex items-center gap-1 pl-3 pr-7">
                               Collaborate
@@ -251,7 +251,7 @@ const ContributorProfileHeader = ({
                           Share
                         </button>
                       </DropdownMenuItem>
-                      {isRecievingCollaborations && (
+                      {isRecievingConnections && (
                         <DropdownMenuItem className="rounded-md">
                           <button
                             onClick={async () =>
@@ -280,7 +280,7 @@ const ContributorProfileHeader = ({
             <DialogTitle className="!text-3xl text-left">Collaborate with {username}!</DialogTitle>
           </DialogHeader>
 
-          <form onSubmit={handleCollaborationRequest} className="flex flex-col w-full gap-2 px-4 md:gap-8 md:px-14 ">
+          <form onSubmit={handleConnectionRequest} className="flex flex-col w-full gap-2 px-4 md:gap-8 md:px-14 ">
             <div className="space-y-2">
               <label htmlFor="message">Send a message</label>
               <Textarea

components/molecules/ContributorProfileInfo/contributor-profile-info.tsx

@@ -154,7 +154,7 @@ const ContributorProfileInfo = ({
               {/* <span className="flex gap-2 items-center">
                 <HiOutlineMail className="text-light-slate-9" />
                 <Link className="w-max hover:text-orange-500 " href="#">
-                  Send a collaboration request
+                  Send a connections request
                 </Link>
               </span> */}
             </div>

components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx → components/organisms/ConnectionRequestWrapper/connection-requests-wrapper.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { isToday, isYesterday, formatDistanceToNowStrict } from "date-fns";
-import CollaborationCard from "components/molecules/CollaborationCard/collaboration-card";
-import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
+import ConnectionCard from "components/molecules/ConnectionCard/connection-card";
+import { useUserConnections } from "lib/hooks/useUserConnections";
 import DashContainer from "components/atoms/DashedContainer/DashContainer";
 
 function formatPostDate(date: Date) {
@@ -14,8 +14,8 @@ function formatPostDate(date: Date) {
   }
 }
 
-const CollaborationRequestsWrapper = () => {
-  const { data, updateCollaborationStatus, deleteCollaborationRequest } = useUserCollaborations();
+const ConnectionRequestsWrapper = () => {
+  const { data, updateConnectionStatus, deleteConnectionRequest } = useUserConnections();
   let currentDate: string;
 
   const getDateGroupHeader = (date: Date, index: number) => {
@@ -45,9 +45,9 @@ const CollaborationRequestsWrapper = () => {
                 <div className="w-full mt-1 text-center md:text-left">
                   {getDateGroupHeader(new Date(requests.created_at), i)}
                 </div>
-                <CollaborationCard
-                  onDecline={deleteCollaborationRequest}
-                  onAccept={updateCollaborationStatus}
+                <ConnectionCard
+                  onDecline={deleteConnectionRequest}
+                  onAccept={updateConnectionStatus}
                   requestId={requests.id}
                   className="self-end w-full mt-1 md:w-5/6 md:mt-1"
                   outreachMessage={requests.message}
@@ -60,13 +60,12 @@ const CollaborationRequestsWrapper = () => {
         <DashContainer className="flex-col gap-6 md:gap-8 text-light-slate-9">
           <p>No pending requests.</p>
           <p className="text-center md:px-16">
-            Sometimes you got to be a friend to make a friend. Considering requesting collaboration on sharing profile
-            on social channels like GitHub or Twitter
+            Sometimes you got to be a friend to make a friend. Considering inviting other developers to OpenSauced
           </p>
         </DashContainer>
       )}
     </div>
   );
 };
 
-export default CollaborationRequestsWrapper;
+export default ConnectionRequestsWrapper;

components/organisms/ContributorProfilePage/contributor-profile-page.tsx

@@ -104,7 +104,7 @@ const ContributorProfilePage = ({
           isPremium={user ? user.role >= 50 : false}
           handleSignIn={signIn}
           username={user?.login}
-          isRecievingCollaborations={user?.receive_collaboration}
+          isRecievingConnections={user?.receive_collaboration}
           user={loggedInUser}
           isFollowing={followError ? false : true}
           isConnected={iscConnected}

components/organisms/ContributorProfileTab/contributor-profile-tab.tsx

@@ -24,7 +24,7 @@ import PaginationResults from "components/molecules/PaginationResults/pagination
 import Pagination from "components/molecules/Pagination/pagination";
 import DashContainer from "components/atoms/DashedContainer/DashContainer";
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
-import CollaborationRequestsWrapper from "../CollaborationRequestWrapper/collaboration-requests-wrapper";
+import ConnectionRequestsWrapper from "../ConnectionRequestWrapper/connection-requests-wrapper";
 import UserRepositoryRecommendations from "../UserRepositoryRecommendations/user-repository-recommendations";
 
 interface ContributorProfileTabProps {
@@ -40,7 +40,7 @@ interface ContributorProfileTabProps {
   repoList: RepoList[];
 }
 
-type TabKey = "highlights" | "contributions" | "requests" | "recommendations";
+type TabKey = "highlights" | "contributions" | "connections" | "recommendations";
 
 // Query Params type for this page
 interface QueryParams {
@@ -50,7 +50,7 @@ interface QueryParams {
 const tabs: Record<TabKey, string> = {
   highlights: "Highlights",
   contributions: "Contributions",
-  requests: "Requests",
+  connections: "Connections",
   recommendations: "Recommendations",
 };
 
@@ -91,8 +91,8 @@ const ContributorProfileTab = ({
       !tab ||
       !Object.keys(tabs).includes(tab as string) ||
       (tab === "recommendations" && user_name !== login) ||
-      (tab === "requests" && !receive_collaboration) ||
-      (tab === "requests" && user_name !== login)
+      (tab === "connections" && !receive_collaboration) ||
+      (tab === "connections" && user_name !== login)
     ) {
       setQueryParams({ tab: currentTab } satisfies QueryParams);
     }
@@ -106,10 +106,10 @@ const ContributorProfileTab = ({
       tab === "recommendations" &&
         "font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#EA4600] to-[#EB9B00]",
       user && user_name !== login && tab === "recommendations" && "hidden",
-      user && user_name !== login && tab === "requests" && "hidden",
+      user && user_name !== login && tab === "connections" && "hidden",
       !user && tab === "recommendations" && "hidden",
-      !user && tab === "requests" && "hidden",
-      !receive_collaboration && tab === "requests" && "hidden"
+      !user && tab === "connections" && "hidden",
+      !receive_collaboration && tab === "connections" && "hidden"
     );
   };
 
@@ -310,9 +310,9 @@ const ContributorProfileTab = ({
 
       {user && user.user_metadata.user_name === login && (
         <>
-          {/* Collaboration requests tab details */}
-          <TabsContent value={"requests" satisfies TabKey}>
-            <CollaborationRequestsWrapper />
+          {/* Connection requests tab details */}
+          <TabsContent value={"connections" satisfies TabKey}>
+            <ConnectionRequestsWrapper />
           </TabsContent>
 
           {/* Recommendation tab details */}

components/organisms/UserSettingsPage/user-settings-page.tsx

@@ -80,7 +80,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
       formRef.current!.linkedin_url.value = response.linkedin_url;
       formRef.current!.discord_url.value = response.discord_url;
     }
-  }, [user, session]);
+  }, [user, session, userInfo]);
 
   useEffect(() => {
     if (insightsUser) {
@@ -362,8 +362,8 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
                   setEmailPreference((prev) => ({ ...prev, receive_collaboration: !prev.receive_collaboration }))
                 }
                 checked={emailPreference.receive_collaboration}
-                title="collaboration requests"
-                label="Receive collaboration requests"
+                title="connections requests"
+                label="Receive connections requests"
               />
             </div>
             <Button