add Strip tracking parameters

seadfeng · Sep 20, 2024 · 992c3ad · 992c3ad
1 parent a8bf62c
commit 992c3ad
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 54 deletions.
diff --git a/src/components/frontend/page/home/main.tsx b/src/components/frontend/page/home/main.tsx
@@ -49,8 +49,7 @@ export function Main({
   const [device,setDevice] = useState<Device>("desktop");
   const [operatingSystem,setOperatingSystem] = useState<OperatingSystem>("macos"); 
   const [currentOperatingSystems,setCurrentOperatingSystems] = useState<SelectOptionType[]>([]);  
-  const [infos,setInfos] = useState<ResponseInfo[]>([]);
-  const [stripTracking,setStripTracking] = useState<boolean>(false);
+  const [infos,setInfos] = useState<ResponseInfo[]>([]); 
 
   let form = useForm<FormValues>({
     resolver: zodResolver(FormValueSchema),
@@ -248,9 +247,7 @@ export function Main({
       {infos && (
         <Results 
           userAgent={userAgent} 
-          infos={infos} 
-          stripTracking={stripTracking} 
-          onStripTrackingChange={setStripTracking} 
+          infos={infos}
         />
       )}
       {block1 && <Markdown content={block1} className="mt-10" />}

diff --git a/src/components/frontend/page/home/results.tsx b/src/components/frontend/page/home/results.tsx
@@ -1,18 +1,23 @@
-import { TidyURL } from '@protontech/tidy-url';
-import { StripTrackingSwitch } from "@/components/shared/strip-tracking-switch";
+import { Switch } from "@/components/ui/switch";
 import { ResponseInfo } from "@/types";
+import { TidyURL } from '@protontech/tidy-url';
 import { SearchCheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useState } from "react";
 
-export const Results = ({ infos, userAgent, stripTracking, onStripTrackingChange }: {
+export const Results = ({ infos, userAgent }: {
   infos: ResponseInfo[];
-  userAgent: string;
-  stripTracking: boolean;
-  onStripTrackingChange?: (value: boolean) => void;
+  userAgent: string;  
 }) => {
   if(infos.length === 0 ) return null;
   const fromUrl = infos[0].url;
   const t = useTranslations();
+  const [stripTracking, setStripTracking] = useState<boolean>(false);
+
+  const clearUrl=(url: string)=>{
+    return stripTracking ? TidyURL.clean(url).url : url
+  }
+
   return(
     <>
     <div className="text-xs text-pretty mb-5">User-Agent: {userAgent}</div>
@@ -24,8 +29,8 @@ export const Results = ({ infos, userAgent, stripTracking, onStripTrackingChange
           {info.location && <div className="flex flex-col gap-3 font-medium">
             {index === 0 && <div className="font-semibold">{t('frontend.home.redirect_chain')}: </div>}
             <div className="bg-secondary p-3 leading-8 text-base">
-              <div className="text-primary truncate">{index + 1}. From: {info.url}</div>
-              <div className="text-green-600 truncate">To: {info.location}</div>
+              <div className="text-primary break-all">{index + 1}. From: {clearUrl(info.url)}</div>
+              <div className="text-green-600 break-all">To: {clearUrl(info.location)}</div>
               <div className="text-yellow-500">{t('frontend.home.status')}: {info.status}</div>
               {info.metaRefresh && <div className="text-orange-500">Meta Refresh</div>}
               <div className="text-slate-500">{t('frontend.home.duration')}: {info.duration}</div>
@@ -34,19 +39,20 @@ export const Results = ({ infos, userAgent, stripTracking, onStripTrackingChange
           {!info.location && <div data-status={info.status} className="flex flex-col gap-3 font-medium">
               <div data-status={info.status} className="font-semibold data-[status='0']:text-red-500">{t('frontend.home.final_destination')}:</div>
               <div data-status={info.status} className="bg-secondary data-[status='0']:bg-red-500 data-[status=0]:bg-opacity-5 p-3 leading-8 text-base">
-                <div data-status={info.status} className="text-green-600 data-[status='0']:text-red-500 truncate">URL: {stripTracking ? TidyURL.clean(info.url).url : info.url}</div>
+                <div data-status={info.status} className="text-green-600 data-[status='0']:text-red-500 break-all">URL: {clearUrl(info.url)}</div>
                 <div className="text-yellow-500 data-[status='0']:text-yellow-700">{t('frontend.home.status')}: {info.status}</div> 
                 <div className="text-slate-500">{t('frontend.home.duration')}: {info.duration}</div>
               </div>
             </div>}
           </div>
-        )}
-        <div className="mt-5">
-          <StripTrackingSwitch
-            defaultValue={stripTracking}
-            onValueChange={onStripTrackingChange}
+        )} 
+        <div className="flex items-center space-x-2 ml-auto">
+          <span className="text-sm">{t('shared.strip_tracking_parameters')}</span>
+          <Switch
+            checked={stripTracking}
+            onCheckedChange={setStripTracking}
           />
-        </div>
+        </div> 
       </div>
     </>
   )

diff --git a/src/components/shared/strip-tracking-switch.tsx b/src/components/shared/strip-tracking-switch.tsx
diff --git a/src/types.ts b/src/types.ts
@@ -24,4 +24,3 @@ export type Browser = typeof browsers[number];
 export type OperatingSystem = typeof operatingSystems[number];
 export type DesktopOperatingSystem = typeof desktopOperatingSystems[number];
 export type MobileOperatingSystem = typeof mobileOperatingSystems[number];
-export type TrackingOption = boolean;