Implement dynamic selection of primary domain name (#32)

* Add dynamic selection of primary domain

* Update alert message

* Fix alert message

* Update alert message

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/SetupDomain.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import {
@@ -15,6 +15,7 @@ const SetupDomain = () => {
     handleSubmit,
     formState: { isValid },
     watch,
+    setValue,
   } = useForm({
     defaultValues: {
       domainName: '',
@@ -22,6 +23,25 @@ const SetupDomain = () => {
     },
   });
 
+  const [domainStr, setDomainStr] = useState('');
+
+  useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (name === 'domainName' && value.domainName) {
+        const domainArr = value.domainName.split('www.');
+        setDomainStr(domainArr.length > 1 ? domainArr[1] : domainArr[0]);
+
+        if (value.domainName.startsWith('www.')) {
+          setValue('isWWW', 'true');
+        } else {
+          setValue('isWWW', 'false');
+        }
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [watch]);
+
   return (
     <form
       onSubmit={handleSubmit(() => {})}
@@ -53,14 +73,14 @@ const SetupDomain = () => {
           <Typography>Primary domain</Typography>
           <div className="flex flex-col gap-3">
             <Radio
-              label={watch('domainName')}
+              label={domainStr}
               crossOrigin={undefined}
               {...register('isWWW')}
               value="false"
               type="radio"
             />
             <Radio
-              label={`www.${watch('domainName')}`}
+              label={`www.${domainStr}`}
               crossOrigin={undefined}
               {...register('isWWW')}
               value="true"
@@ -68,8 +88,11 @@ const SetupDomain = () => {
             />
           </div>
           <Alert color="blue">
-            <i>^</i> For simplicity, we’ll redirect the www variant to{' '}
-            {watch('domainName')}. Redirect preferences can be changed later.
+            <i>^</i> For simplicity, we’ll redirect the{' '}
+            {watch('isWWW') === 'true'
+              ? `non-www variant to www.${domainStr}`
+              : `www variant to ${domainStr}`}
+            . Redirect preferences can be changed later
           </Alert>
         </div>
       )}