fixes: updated URLs

Author: dorelljames

apps/web/src/components/AddToCalendar.tsx

@@ -10,10 +10,24 @@ import {
 import { BsRssFill, BsApple, BsGoogle, BsMicrosoft } from "react-icons/bs";
 import { CiCalendarDate } from "react-icons/ci";
 
+function getHTTPOfURL(url: string) {
+  return url.replace(/^https?:\/\//, "http://");
+}
+
+function getURLWithoutProtocol(url: string) {
+  return url.replace(/^https?:\/\//, "");
+}
+
+const calendarURL = `${process.env.URL || process.env.NEXT_PUBLIC_BASE_URL}/api/calendar`;
+const urls = {
+  google: `https://calendar.google.com/calendar/render?cid=${encodeURIComponent(getHTTPOfURL(calendarURL))}`,
+  outlook: `https://outlook.live.com/calendar/0/addcalendar?url=${encodeURIComponent("webcal://" + getURLWithoutProtocol(calendarURL))}`,
+  apple: `webcal://${encodeURIComponent(getURLWithoutProtocol(calendarURL))}`,
+  download: calendarURL,
+};
+
 const AddToCalendar = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const calendarURL = `${process.env.NEXT_PUBLIC_BASE_URL}/api/calendar`;
-  console.log("🚀 ~ AddToCalendar ~ calendarURL:", calendarURL);
 
   return (
     <>
@@ -51,7 +65,7 @@ const AddToCalendar = () => {
 
             <div className="mt-4">
               <a
-                href={`https://calendar.google.com/calendar/render?cid=${encodeURIComponent(getHTTPOfURL(calendarURL))}`}
+                href={urls.google}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex items-center px-4 py-3 mt-2 text-sm font-bold text-white bg-blue-500 rounded-md hover:bg-blue-700"
@@ -60,26 +74,27 @@ const AddToCalendar = () => {
                 Google Calendar
               </a>
               <a
-                href={`https://outlook.live.com/calendar/0/addcalendar?url=${encodeURIComponent("webcal://" + calendarURL)}`}
+                href={urls.outlook}
+                target="_blank"
+                rel="noopener noreferrer"
                 className="flex items-center px-4 py-3 mt-2 text-sm font-bold text-white bg-blue-600 rounded-md hover:bg-blue-800"
               >
                 <BsMicrosoft className="w-4 h-4 mr-2" />
                 Outlook Calendar
               </a>
               <a
-                href={`webcal://${encodeURIComponent(calendarURL)}`}
+                href={urls.apple}
                 className="flex items-center px-4 py-3 mt-2 text-sm font-bold text-white bg-gray-900 rounded-md hover:bg-gray-700"
               >
                 <BsApple className="w-4 h-4 mr-2" />
                 Apple Calendar
               </a>
               <a
-                href={calendarURL}
+                href={urls.download}
                 download="calendar.ics"
                 className="text-center block px-4 py-2 mt-2 text-sm font-medium text-gray-500 hover:text-gray-300"
               >
-                If the links above didn&apos;t work, click here to download .ics
-                file and add it manually to your calendar app.
+                Click here to download .ics file instead
               </a>
             </div>
           </div>
@@ -89,8 +104,4 @@ const AddToCalendar = () => {
   );
 };
 
-function getHTTPOfURL(url: string) {
-  return url.replace(/^https?:\/\//, "http://");
-}
-
 export default AddToCalendar;