fix: connect more user profile settings to the API

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

@@ -8,6 +8,7 @@ import { HiOutlineMail } from "react-icons/hi";
 import LanguagePill from "components/atoms/LanguagePill/LanguagePill";
 import Title from "components/atoms/Typography/title";
 import Badge from "components/atoms/Badge/badge";
+import { getTimezone } from "lib/utils/timezones";
 
 interface ContributorProfileInfoProps {
   githubName: string;
@@ -16,14 +17,18 @@ interface ContributorProfileInfoProps {
   twitterUsername?: string;
   interests?: string;
   isConnected?: boolean;
+  timezone?: string;
+  displayLocalTime?: boolean;
 }
 
 const ContributorProfileInfo = ({
   githubName,
   twitterUsername,
   bio,
   interests,
-  isConnected
+  isConnected,
+  timezone,
+  displayLocalTime
 }: ContributorProfileInfoProps) => {
   const interestArray = interests?.split(",");
 
@@ -43,7 +48,7 @@ const ContributorProfileInfo = ({
             <>
               <span className="flex text-light-slate-10 gap-2 items-center">
                 <FiClock className="text-light-slate-9" />
-                UTC +1
+                {timezone ? `UTC${getTimezone(timezone)}` : "UTC+1"}
               </span>
               <span className="flex text-light-slate-10 gap-2 items-center">
                 <AiOutlineGift className="text-light-slate-9" />
@@ -64,16 +69,16 @@ const ContributorProfileInfo = ({
                 "I am an open source developer with a passion for music and video games. I strive to improve the open source community and am always looking for new ways to contribute."}
             </p>
             <div className="flex flex-col text-sm mt-2 text-light-slate-9 gap-2">
-              <span className="flex gap-2 items-center">
+              {displayLocalTime && <span className="flex gap-2 items-center">
                 <FiClock className="text-light-slate-9" /> Local time: 12:32 PM
-              </span>
+              </span>}
 
-              <span className="flex gap-2 items-center">
+              {twitterUsername && <span className="flex gap-2 items-center">
                 <FiTwitter className="text-light-slate-9" />
-                <Link href="#" className="w-max hover:text-orange-500 ">
-                  coming soon...
+                <Link href={`https://twitter.com/${twitterUsername}`} target="_blank" rel="noreferrer" className="w-max hover:text-orange-500 ">
+                  {twitterUsername}
                 </Link>
-              </span>
+              </span>}
 
               {/* <span className="flex gap-2 items-center">
                 <HiOutlineMail className="text-light-slate-9" />

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

@@ -75,7 +75,7 @@ const ContributorProfilePage = ({
   const isLoaded = !loading && !error;
 
   // eslint-disable-next-line camelcase
-  const { bio, location, interests, name, twitter_username } = user || {};
+  const { bio, location, interests, name, twitter_username, timezone, display_local_time: displayLocalTime } = user || {};
 
   return (
     <div className=" w-full">
@@ -93,6 +93,8 @@ const ContributorProfilePage = ({
                 bio={bio}
                 githubName={githubName}
                 isConnected={!!user}
+                timezone={timezone}
+                displayLocalTime={displayLocalTime}
               />
 
               <div>

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

@@ -30,6 +30,8 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
   const { data: insightsUser } = useFetchUser(user?.user_metadata.user_name);
 
   const [isValidEmail, setIsValidEmail] = useState<boolean>(true);
+  const [displayLocalTime, setDisplayLocalTime] = useState(false);
+  const [timezone, setTimezone] = useState("");
   const [userInfo, setUserInfo] = useState<DbUser>();
   const [email, setEmail] = useState<string | undefined>(userInfo?.email || user?.email);
   const [emailPreference, setEmailPreference] = useState<EmailPreferenceType>({
@@ -55,7 +57,9 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
         // eslint-disable-next-line camelcase
         receive_collaboration: insightsUser?.receive_collaboration
       });
-      setSelectedInterest(insightsUser?.interests.split(","));
+      setSelectedInterest(insightsUser?.interests?.split(","));
+      setDisplayLocalTime(insightsUser?.display_local_time);
+      setTimezone(insightsUser?.timezone);
     }
     fetchAuthSession();
   }, [user, insightsUser]);
@@ -88,10 +92,17 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
       ToastTrigger({ message: "An error occured!!!", type: "error" });
     }
   };
+
   const handleUpdateProfile = async () => {
     const data = await updateUser({
-      data: { email }
+      data: {
+        email,
+        // eslint-disable-next-line camelcase
+        display_local_time: displayLocalTime,
+        timezone
+      }
     });
+
     if (data) {
       ToastTrigger({ message: "Updated successfully", type: "success" });
     } else {
@@ -145,20 +156,20 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
             </div>
             <TextInput
               classNames="bg-light-slate-4 text-light-slate-11 font-medium"
-              placeholder="https://turtlepower.pizza"
+              placeholder="https://opensauced.pizza"
               label="URL"
               disabled
             />
             <TextInput
               classNames="bg-light-slate-4 text-light-slate-11"
-              placeholder="@aprilcodes"
+              placeholder="@saucedopen"
               label="Twitter Username"
               disabled
               value={`@${(userInfo && userInfo.twitter_username) || "saucedopen"}`}
             />
             <TextInput
               classNames="bg-light-slate-4 text-light-slate-11 font-medium"
-              placeholder="StockGen"
+              placeholder="OpenSauced"
               label="Company"
               disabled
               value={userInfo?.company || "OpenSauced"}
@@ -168,17 +179,22 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               placeholder="USA"
               label="Location"
               disabled
-              value={userInfo?.location || "Canada"}
+              value={userInfo?.location || "California"}
             />
             <div>
-              <Checkbox checked={false} title="profile email" label="Display current local time on profile" />
+              <Checkbox
+                checked={displayLocalTime}
+                title="profile email"
+                label="Display current local time on profile"
+                onChange={e => setDisplayLocalTime(e.target.checked)}
+              />
               <span className="ml-7 text-light-slate-9 text-sm font-normal">
                 Other users will see the time difference from their local time.
               </span>
             </div>
             <div className="flex flex-col gap-2">
               <label>Time zone*</label>
-              <Select>
+              <Select value={timezone} onChange={e => setTimezone(e.target.value)}>
                 <SelectOption value="select timezone">Select time zone</SelectOption>
                 {timezones.map((timezone, index) => (
                   <SelectOption key={index} value={timezone.value}>
@@ -201,7 +217,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               {interestArray.map((topic, index) => (
                 <LanguagePill
                   onClick={() => handleSelectInterest(topic)}
-                  classNames={`${selectedInterest.includes(topic) && "bg-light-orange-10 text-white"}`}
+                  classNames={`${(selectedInterest || []).includes(topic) && "bg-light-orange-10 text-white"}`}
                   topic={topic}
                   key={index}
                 />

lib/hooks/update-user.ts

@@ -1,7 +1,7 @@
 import { supabase } from "lib/utils/supabase";
 
 interface useUpdateUserProps {
-  data: { email?: string; interests?: string[] };
+  data: { email?: string; interests?: string[]; display_local_time?: boolean; timezone?: string };
   params?: string;
 }
 

lib/utils/timezones.ts

@@ -1177,3 +1177,7 @@ export const timezones = [
     utc: ["Pacific/Apia"]
   }
 ];
+
+export const getTimezone = (timezone: string): number => {
+  return timezones.find(tz => tz.value === timezone)?.offset || +1;
+};

next-types.d.ts

@@ -130,5 +130,5 @@ interface DbUser {
   readonly interests: string;
   readonly receive_collaboration: boolean;
   readonly display_email: boolean;
-
+  readonly timezone: string;
 }