Ranranaway (#8)

* feat(add): introduce new components, hooks, and API routes; update existing files and configurations

* shift every single  thing to react-icons and more bug fixes

* shift every single  thing to react-icons and more bug fixes

* shift every single  thing to react-icons and more bug fixes

* everything works!

* chore: update change logs

* fix: dashboard navbar text color and hover

* feat: update database from PostgreSQL to MySQL (wordings not like db db), add system status API, and enhance footer with status display

* feat(add): new nsfw warning

* refactor: improve user authentication logic and enhance API response handling

* chore: update changelog

* feat: implement NSFW warning modal with age verification for links containing adult content

* chore: update og logic

* chore: update og logic

* Update README.md

* Update README.md

* Update CHANGELOG.md for version 0.3.2, including new features, improvements, and bug fixes. Upgrade Next.js and React versions in package.json. Enhance account linking logic in account-linking.tsx and improve QR code download functionality in share-modal.tsx. Fix location flag URL in location-stats.tsx.

* Update CHANGELOG.md for version 0.3.2, including new features, improvements, and bug fixes. Upgrade Next.js and React versions in package.json. Enhance account linking logic in account-linking.tsx and improve QR code download functionality in share-modal.tsx. Fix location flag URL in location-stats.tsx.

---------

Co-authored-by: RizonFTW <rizon@nodebyte.co.uk>
Co-authored-by: Rizon <kye021@hotmail.co.uk>
Co-authored-by: Pixelated <toxic.dev09@gmail.com>

Author: 3 people

CHANGELOG.md

@@ -16,21 +16,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bulk link import/export
 - Link scheduling
 
-## [0.3.1] - 2025-09-23  
-### 🚀 New Features  
-- 🌐 **Social Meta Customization** — users can now fully customize how their Lynkr profile looks when shared on social media (custom backgrounds, layouts, typography, and live preview).  
-- ⚠️ **NSFW Warning Modal** — added age verification prompt for links marked as sensitive.  
-
-### ⚡ Improvements  
-- 🔄 Migrated database from **PostgreSQL → MySQL** for better performance and consistency.  
-- 🎨 Unified all icons under **react-icons** for improved consistency across the app.  
-- 🔐 Refactored user authentication logic with enhanced API responses for smoother login and onboarding.  
-- 🛠️ Improved Open Graph (OG) logic for better link previews.  
-- 🖼️ Added real-time theme application for meta images when sharing links.  
-
-### 🐛 Bug Fixes  
-- 🎯 Fixed dashboard navbar text color and hover states.  
-- ⚙️ Resolved minor layout, icon, and preview inconsistencies.  
+## [0.3.2] - 2025-09-29
+
+### ⚡ Improvements
+
+- 🔄 Updated site to NextJs V15
+
+### 🐛 Bug Fixes
+
+- 🎯 Fixed QR code not downloading issue
+
+## [0.3.1] - 2025-09-23
+
+### 🚀 New Features
+
+- 🌐 **Social Meta Customization** — users can now fully customize how their Lynkr profile looks when shared on social media (custom backgrounds, layouts, typography, and live preview).
+- ⚠️ **NSFW Warning Modal** — added age verification prompt for links marked as sensitive.
+
+### ⚡ Improvements
+
+- 🔄 Migrated database from **PostgreSQL → MySQL** for better performance and consistency.
+- 🎨 Unified all icons under **react-icons** for improved consistency across the app.
+- 🔐 Refactored user authentication logic with enhanced API responses for smoother login and onboarding.
+- 🛠️ Improved Open Graph (OG) logic for better link previews.
+- 🖼️ Added real-time theme application for meta images when sharing links.
+
+### 🐛 Bug Fixes
+
+- 🎯 Fixed dashboard navbar text color and hover states.
+- ⚙️ Resolved minor layout, icon, and preview inconsistencies.
 
 ## [0.3.0] - 2025-08-08
 

README.md

@@ -12,7 +12,8 @@
   [![GitHub License](https://img.shields.io/github/license/LynkrApp/Website?style=for-the-badge)](https://github.com/LynkrApp/Website/blob/main/LICENSE)
   [![Discord](https://img.shields.io/discord/1387524650895933540?style=for-the-badge&logo=discord)](https://discord.gg/g76w2v7RzG)
 
-  [🌐 Live Demo](https://lynkr.link) • [📖 Documentation](#getting-started) • [🐛 Report Bug](https://github.com/LynkrApp/Website/issues) • [💡 Request Feature](https://github.com/LynkrApp/Website/issues)
+[🌐 Live Demo](https://lynkr.link) • [📖 Documentation](#getting-started) • [🐛 Report Bug](https://github.com/LynkrApp/Website/issues) • [💡 Request Feature](https://github.com/LynkrApp/Website/issues)
+
 </div>
 
 ---
@@ -46,19 +47,21 @@
 
 ### Prerequisites
 
-- Node.js 18+ 
+- Node.js 18+
 - npm or yarn or bun
 - MySQL database
 
 ### Installation
 
 1. **Clone the repository**
+
    ```bash
    git clone https://github.com/LynkrApp/Website.git
    cd Website
    ```
 
 2. **Install dependencies**
+
    ```bash
    npm install
    # or
@@ -68,37 +71,42 @@
    ```
 
 3. **Set up environment variables**
+
    ```bash
    cp .env.example .env.local
    ```
-   
+
    Fill in your environment variables:
+
    ```env
    # Database
    DATABASE_URL="mysql://USER:PASSWORD@HOST:PORT/DATABASEr"
-   
+  
+  
    # NextAuth
    NEXTAUTH_URL="http://localhost:3000"
    NEXTAUTH_SECRET="your-secret-key"
-   
+
    # OAuth Providers
    GOOGLE_CLIENT_ID="your-google-client-id"
    GOOGLE_CLIENT_SECRET="your-google-client-secret"
-   
+
    GITHUB_CLIENT_ID="your-github-client-id"
    GITHUB_CLIENT_SECRET="your-github-client-secret"
-   
+
    DISCORD_CLIENT_ID="your-discord-client-id"
    DISCORD_CLIENT_SECRET="your-discord-client-secret"
    ```
 
 4. **Set up the database**
+
    ```bash
    npx prisma migrate dev
    npx prisma generate
    ```
 
 5. **Run the development server**
+
    ```bash
    npm run dev
    # or

components/core/account-linking/account-linking.tsx

@@ -8,14 +8,13 @@ import { FaDiscord, FaGithub, FaGoogle } from 'react-icons/fa';
 import React from 'react';
 import ReAuthModal from '@/components/shared/modals/reauth-modal';
 import { CheckCircle, X, Link as LinkIcon } from 'lucide-react';
-import type { IconType } from 'react-icons';
 
 const AccountLinking = () => {
   const { data: session } = useSession();
   const queryClient = useQueryClient();
-  const [loadingProvider, setLoadingProvider] = useState(null);
+  const [loadingProvider, setLoadingProvider] = useState<string | null>(null);
   const [showReAuthModal, setShowReAuthModal] = useState(false);
-  const [providerToLink, setProviderToLink] = useState(null);
+  const [providerToLink, setProviderToLink] = useState<string | null>(null);
 
   // Fetch linked accounts
   const {
@@ -32,41 +31,55 @@ const AccountLinking = () => {
   });
 
   // Handle re-authentication completion
-  const handleReAuthCompletion = useCallback(async (token, linkProvider) => {
-    try {
-      console.log(
-        'Re-auth completed, will start linking in 2 seconds...',
-        linkProvider
-      );
-      setLoadingProvider(linkProvider);
+  const handleReAuthCompletion = useCallback(
+    async (token: string, linkProvider: string) => {
+      try {
+        console.log(
+          'Re-auth completed, will start linking in 2 seconds...',
+          linkProvider
+        );
+        setLoadingProvider(linkProvider);
 
-      // Add a delay to ensure the previous OAuth flow has fully completed
-      // This prevents OAuth state conflicts between GitHub reauth and Discord linking
-      setTimeout(() => {
-        console.log('Starting Discord OAuth flow for account linking');
-        signIn(linkProvider, {
-          callbackUrl: `/admin/settings?tab=accounts&action=complete&token=${token}`,
-        });
-      }, 2000); // 2 second delay to ensure OAuth state is cleared
-    } catch (error) {
-      console.error('Error completing re-auth:', error);
-      toast.error('Failed to complete account linking');
-      setLoadingProvider(null);
-    }
-  }, []);
+        // Add a delay to prevent OAuth state conflicts
+        setTimeout(() => {
+          console.log(
+            'Starting OAuth flow for account linking with:',
+            linkProvider
+          );
+          signIn(linkProvider, {
+            callbackUrl: `/admin/settings?tab=accounts&action=complete&token=${token}&linkProvider=${linkProvider}`,
+          });
+        }, 2000);
+      } catch (error) {
+        console.error('Error completing re-auth:', error);
+        toast.error('Failed to complete account linking');
+        setLoadingProvider(null);
+      }
+    },
+    []
+  );
 
   // Handle account linking completion
   const handleLinkCompletion = useCallback(
-    async (token) => {
+    async (token: string, linkProvider: string | null) => {
       try {
-        console.log('Processing account link completion with token:', token);
+        console.log(
+          'Processing account link completion with token:',
+          token,
+          'provider:',
+          linkProvider
+        );
 
-        const response = await axios.post('/api/auth/process-link', { token });
+        const response = await axios.post('/api/auth/process-link', {
+          token,
+          linkProvider,
+        });
 
         if (response.status === 200) {
           toast.success('Account linked successfully!');
-          refetch(); // Refresh the linked accounts list
+          refetch();
           setLoadingProvider(null);
+          setProviderToLink(null);
         }
       } catch (error) {
         console.error('Error completing account link:', error);
@@ -75,6 +88,7 @@ const AccountLinking = () => {
           : undefined;
         toast.error(message || 'Failed to link account');
         setLoadingProvider(null);
+        setProviderToLink(null);
       }
     },
     [refetch]
@@ -94,37 +108,23 @@ const AccountLinking = () => {
     });
 
     if (action === 'link') {
-      // Refresh the linked accounts data after regular sign-in
       refetch();
       setLoadingProvider(null);
-      // Clear URL to prevent re-triggering
       window.history.replaceState({}, '', '/admin/settings?tab=accounts');
     } else if (action === 'reauth' && token && linkProvider) {
-      // Handle re-authentication completion
-      console.log(
-        'Re-authentication completed, preparing to link:',
-        linkProvider
-      );
-
-      // Clear the URL parameters first to prevent re-triggering
-      const newUrl = window.location.pathname + '?tab=accounts';
-      window.history.replaceState({}, '', newUrl);
-
-      // Add a delay and then trigger the Discord linking
+      // Clear URL first to prevent re-triggering
+      window.history.replaceState({}, '', '/admin/settings?tab=accounts');
       handleReAuthCompletion(token, linkProvider);
     } else if (action === 'complete' && token) {
-      // Handle account linking completion
-      console.log('CALLING handleLinkCompletion with token:', token);
-      handleLinkCompletion(token);
-
       // Clear URL immediately to prevent duplicate calls
       window.history.replaceState({}, '', '/admin/settings?tab=accounts');
+      handleLinkCompletion(token, linkProvider);
     }
   }, [refetch, handleLinkCompletion, handleReAuthCompletion]);
 
   // Unlink account mutation
   const unlinkMutation = useMutation({
-    mutationFn: async (provider) => {
+    mutationFn: async (provider: string) => {
       await axios.delete(`/api/auth/unlink-account?provider=${provider}`);
     },
     onSuccess: () => {
@@ -160,31 +160,35 @@ const AccountLinking = () => {
     },
   ] as const;
 
-  const handleLinkAccount = (providerId) => {
+  const handleLinkAccount = (providerId: string) => {
     setProviderToLink(providerId);
     setShowReAuthModal(true);
   };
 
   const handleReAuthSuccess = () => {
     setShowReAuthModal(false);
-    setLoadingProvider(providerToLink);
+    if (providerToLink) {
+      setLoadingProvider(providerToLink);
+    }
   };
 
   const handleCloseReAuthModal = () => {
     setShowReAuthModal(false);
     setProviderToLink(null);
   };
 
-  const handleUnlinkAccount = (provider) => {
+  const handleUnlinkAccount = (provider: string) => {
     if (linkedAccounts?.length <= 1) {
       toast.error('You must have at least one linked account');
       return;
     }
     unlinkMutation.mutate(provider);
   };
 
-  const isLinked = (providerId) => {
-    return linkedAccounts?.some((account) => account.provider === providerId);
+  const isLinked = (providerId: string) => {
+    return linkedAccounts?.some(
+      (account: any) => account.provider === providerId
+    );
   };
 
   if (isLoading) {
@@ -212,9 +216,7 @@ const AccountLinking = () => {
         <div className="space-y-4">
           {providers.map((provider) => {
             const linked = isLinked(provider.id);
-            const IconComponent = provider.icon as React.ComponentType<
-              React.SVGProps<SVGSVGElement>
-            >;
+            const IconComponent = provider.icon;
 
             return (
               <div

components/core/profile-analytics/location-stats.tsx

@@ -46,7 +46,7 @@ export const LocationStats = ({
                     {location ? (
                       <div className="h-8 w-8 border rounded-full">
                         <img
-                          src={`https://flag.vercel.app/m/${location}.svg`}
+                          src={`https://flag.vercel.app/l/${location}.svg`}
                           alt={location}
                           className="h-8 w-8 blur-0 rounded-full lg:h-8 lg:w-8"
                           loading="lazy"