From 109377f08367a5817f706c5e878fd9fa3846a08d Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Fri, 27 Jun 2025 14:44:09 +0300
Subject: [PATCH] feat(UrlPage): add encoded url pages

---
 prisma/dev.db                 | Bin 0 -> 69632 bytes
 src/app/[encodedUrl]/page.tsx | 132 ++++++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 src/app/[encodedUrl]/page.tsx

diff --git a/prisma/dev.db b/prisma/dev.db
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e374783190dd3c32b08ce3df422d31eb13d1b96f 100644
GIT binary patch
literal 69632
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%0D4w(e<miQ1lSg^{Cber&2%Xi?RRsH>WWWd;Uy
z^*Bn%f^c4br?}vm3DpAAQ-jd9RLk`pH8jFlwQL%@v1Z4i=g#WBq1)ED7Dkq<TY>5Z
zwys)QY=H$)s799QS(c;urW2eW1C!qcCdZ!UJBFhgegt|wBT{|euvFd9+&Hvii<<hZ
zZfUxq>)MzRCb|<EfofTvrdo~#_QW7fttfB|KM4#wAWv36HJBV3cH$<9ulgP^uzc_Z
zR%occO`%sF>b7A<vxcu3o>hsBD6nEXQj;LE!Q_aE`I>4_Fxu42$hX4t<-W;w5_pLj
zxT@nD9_XcDvKKh2>qeRvMvx)XnKf+BwH(hZ$4+1b)UZK10BO?=RgWf?YWiLh>RLc`
zJ2<-sGz;QFpn25N45~)D=>p^gWMkI?(w3$9cC3Z2zQ+y1AaoKi(4iDc&4z5*k*iV@
zEDeBw9hgx6W|=}B1QpxyoydTq4XFi15GAqdYY`N!uKBvDg&MVVw*Ft1+!Dwga*Mpw
z|J~<Gj>#bbB!C2v01`j~NB{{S0VIF~kN^_6j|2{87et;X0A+GVnB#dMQ(_vqI_gZ2
z>k+{l(#VyWV*WkCP`<c7|K5=Y@}DZ4m;YFPUY^f?JO73Js$2vAF2CG3-|s#a9wvnZ
zkN^@u0&jN$AF!nNS(0zLmb4%ra)bDY%6wIxF_CGysvN7GkQT%ukN8l2R(OR^v<#vz
z@`;u}^qP2%$AHXIquJ;Mt)6lwXg9h&<zlD3vJA5om19BcVl#jlf0sbpVR_8+;mgJ_
zV4-R-oC5<8G*$y@$EvNlGzn}YH0?OeePg-V4jal;dueF}KEm8nX5fp*SMx2QA{N6i
zjzY)rRmZav7)5vtxW0>L7-SmeAV$shN-Y1UAd5v9lc}9zka-4YWbGIv^8k-%d$l#i
zQmH-8l=BRyWDcGL<y@k*CwML1Yp@!`1!gasotctx>JaB49++~{p;TF48p=4%n^tL~
z6bip0#9~qNH7&7R7b=1VV~Ug}YN-1@3@kcY<U~o}nw|`zx5UdZ2p4;nZL6MR#z%Ze
zvHE&Lflo|<)LEWV%WTPylC(QYN<@j;OUo<0M(g6t<HrngAiKhM{>TSey)1@_>BOFC
zsGbgEeijVIsU92KGhyh_OKcb!)tu7GQ4`GE$2IzRW=@BV9LRiKJirrS{4{)Oy`}W$
z+(NY95%=>%lam0>>Z=NyoC~o&Cf0ajmCm#~R5=LWr)TkM!^^^w_yL}XWA#?A(YyMg
ziF5s^6Ni-vrfcGdK}St2a_Bgu0Yk14+_K}61LCjqfyitDA+E|54qF0dJEU<6>Nm$=
z_1H*Nct$KHAx&VgSXUjWHBeWA2u5CEjMg_`INa8?P!EC%h+Ys&JfdY7CkE+5e2Pnl
z4l;f`r(@Z5$N?zX8jo;k?rPAwTO}Z(C0BSNvUp@h7?g`Q1||m<#G6w*%~GaIn~BPn
zmxKB8@TPgZ67?EaplT`0&7cQo^^&rBsS#abVOJV(Wdcv*O3<T9(2A8VjaHxnCo3(8
z)oyjuW*})ap`p7Jbf67549!8a8HDW)oK;t-vfA!kKAc8fVm1H0aM6pJD@<+g5>+;u
zI#ArXLOT$<*`RQp43?LhjR;h%rvWi8_u9*AjScN|*Oi7W@qVl>`Hb)}z6Ns)L?4!m
z)S^)wnvUx0Fp6(QFz6pzFlE9IVUB{PYepCvwf8`=bG5?bo!}bXe+lmFAcE!DH1uJT
zgsth3YQ=5<lOJHZLTD+VZ$D1~Z$7gML!TCg3cr*c`Z4mw;`yRl%naWdnk&3m_@AMN
z3a<=3wA)YKzuT{Ht#GYa+x&aG--=@XkpL1v0!RP}Ac40QfrsH{N#uFPGIXNwZs9hU
zXt@re*SSPX$3gT-E>U?3L=SO^jvY(0WzfV8eA`g<*mYpes|6ED10z-q9lV<E7?gUM
z$-*_z$|L$%p#~jlk*7obSeic1Jt%p9s??`c4;;@@ZJL0oY@)80B#{d9W#dq%rkRAn
zu}4#_T%C|fZqdCbxJBi9kz2NOJk1x6v5%#aJddeP){8epO|&9E@~B~`4u!`ymgl&t
zAN!^n!5nNiFkRiGR%Qz3^ZqTD=&@9irv%oN^7Ow6Oi|9hB=U%k8z6d<OH|fD^gNen
zSp!kEUtSz@zxO`DEh?Yl7R^lcYXOG=PzsrIBF|K9RtlMeT%w><d{u<Hk$A2ase0(Z
zBQRGBpg-!svyITDR^o-86~|1e_%~dlOzE$R)b$cLX?4}JnNoOi0?$f3M@?K09wIxM
zW`=sI^rKv&OzFHBg>hop8dc2@%(V<3I<>YQs)0v?z)2#<58YI0jY|}i3f~q3I9U=u
z^i&$Kw;(KN3w_IR)F6pHn4(WTjYdqV@C7bWru5fDCo<tob9H#NB7zqcs0FV}#Cohc
zuBAEDf!8FoH2cEST%t_rf|!7T@McD!Mn(khRk)g=LJ=iu1PK8P*9;>gwe(>w(f(C{
zr(wxF&es2{k`;k`i~I-qI{7O3M_2{$i{vk19l+0%KOnzLehbzDe35*T{2cii^3&uw
za-Dnx#BoCcNB{{S0VIF~kN^@u0!RP}AOR$R1YVDTRL#obK4}lQd!-7vRjCZ_9;pOw
zMH&aUERBI%l19NDmk79H(g?VtQW0Dt4TC!(4S`#f3g8Y)GPpxh9^8VI16P&?!Ocqp
z;KG`K;0{Vza0jFexYB@_6~#=Jz5ib&ivsy~@-^~L@D;!>LEryR$>+%Lk<XIb(DVNV
z@&fq;`3Z6Z`u#n!L=v({zV&(;#Bd~l1dsp{Kmter2_OL^fCP{L5<miPD*}U(EQ<T8
z>2B|ybXTpUyFKM}S1F~t@_4!{jitNs(R4RP(%tAtx+BGOH!_^=ibLscxRCCK<aAen
z&jCPsaxUHF2h&|{Al(g0>24sK?xf711cI4tvG~h^RGbmWJk0<9NO9&~zqeJXVP=s4
z5<mh-00|%gB!C2v01`j~90Y1*NnQ|n*1ag#N~tKvGV*2ewD{5j-|G(`dUHYKc?G9j
zgF$0Htz_g?;WnREQY$j8JO-3%GOq!9z<@)1TKCjOc(s<u)54Q{1S%lPX+Wh$m;pSm
z0F|IdaT+iVqMQbd*G5wVINm-f6^cvH|DO~_PK`W3W{Z>e`f*f!6hQ(=00|%gB!C2v
z01`j~NB{|Z?-4jO0R1<SXJv$Pxi8Dp*(;YuR)pV#RYy49pf8P*9~Xa0<a*n^T;`We
z_5P^H^}_o`-Z=V^Z$y^aApD)kwU7bJ8)L?^K0>PZ8Ifx(gH-Q%KG{_7VZL(P;K1=z
zr$pe)xG8cy))~)&><2}z$139)kUb>IJWExMv-$rLd08NTLH>ojOg;zy;)Vo}01`j~
zNB{{S0VIF~kN^@u0!RP}yafmhXCDyPzyAWS{a3|ayWQ+&-;wpjOTFImBS(+whI>SV
zpZ<ucY1+}uzN{~=1vT4I&}5%!=m)X>|2{G*ke`R%|1ZLde}6(Qz<d9rWQLr8_x(e7
z_y67G9pngkp8PBMD0x4u4)9HKhx`L+z6C&_2}l45AOR$R1dsp{Kmter2_OL^fCSzo
z0oI+KF)iELm->81_x7efPj|d3$?g|}UXP|9Ic&7{<gz8P*<P*mV|lJ$&SxtS-!)6A
z$MB5tG|ci$e~d}D+N+~$(w;_`?_!5WbcBV4v{g*QY|}7@Qw6%|4fQ>aSzt0VrY`pn
z*jm2tagAK+F?4^Bi7e68fix+)3d;djMD~r@EVCTGbr^LT%k1NanOwFavrmPx{(qL-
z638v`67=iu5R=?_ljtxS5<mh-00|%gB!C2v01`j~NB{{Sf$sqV2eYse0LPb8%g{ld
g<N0!IiD~3{iKM~=c|O;-hY9kmEs<*EdMD+70VmcPJ^%m!

literal 0
HcmV?d00001

diff --git a/src/app/[encodedUrl]/page.tsx b/src/app/[encodedUrl]/page.tsx
new file mode 100644
index 0000000..66a14d3
--- /dev/null
+++ b/src/app/[encodedUrl]/page.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import React, { Suspense } from 'react';
+import { useParams } from 'next/navigation';
+import { ItemsList } from '@/components/ItemsList';
+
+// Loading component for better UX
+function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center min-h-[400px]">
+      <div className="flex flex-col items-center space-y-4">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+        <span className="text-gray-600 text-sm">Loading items...</span>
+      </div>
+    </div>
+  );
+}
+
+// Error boundary component
+function ErrorFallback({ error, resetError }: { error: Error; resetError: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[400px] p-8">
+      <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md w-full">
+        <h2 className="text-red-800 text-lg font-semibold mb-2">
+          Something went wrong
+        </h2>
+        <p className="text-red-600 text-sm mb-4">
+          {error.message || 'An unexpected error occurred while loading the items.'}
+        </p>
+        <div className="flex space-x-3">
+          <button
+            onClick={resetError}
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-colors text-sm"
+          >
+            Try again
+          </button>
+          <button
+            onClick={() => window.location.reload()}
+            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 transition-colors text-sm"
+          >
+            Reload page
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Simple error boundary implementation
+class ErrorBoundary extends React.Component<
+  { children: React.ReactNode; fallback: (error: Error, resetError: () => void) => React.ReactNode },
+  { hasError: boolean; error?: Error }
+> {
+  constructor(props: { children: React.ReactNode; fallback: (error: Error, resetError: () => void) => React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      return this.props.fallback(this.state.error, () => {
+        this.setState({ hasError: false, error: undefined });
+      });
+    }
+
+    return this.props.children;
+  }
+}
+
+export default function UrlPage() {
+  const params = useParams();
+  const encodedUrlParam = params.encodedUrl || '';
+  
+  // Handle both string and string[] cases
+  const encodedUrl = Array.isArray(encodedUrlParam) ? encodedUrlParam[0] : encodedUrlParam;
+  const decodedUrl = decodeURIComponent(encodedUrl);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center">
+              <h1 className="text-xl font-semibold text-gray-900">
+                CompareWare
+              </h1>
+            </div>
+            <div className="flex items-center space-x-4">
+              <div className="text-sm text-gray-500">
+                Item Comparison Tool
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">
+            {`Items Comparison for "${decodedUrl}"`}
+          </h2>
+        </div>
+
+        {/* Items list with error boundary and suspense */}
+        <ErrorBoundary fallback={(error, resetError) => <ErrorFallback error={error} resetError={resetError} />}>
+          <Suspense fallback={<LoadingSpinner />}>
+            <ItemsList url={decodedUrl} />
+          </Suspense>
+        </ErrorBoundary>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-white border-t mt-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="text-center text-gray-500 text-sm">
+            <p>&copy; 2025 CompareWare.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}