Merge pull request #516 from acelaya-forks/feature/geolocation-rules

Geolocation redirect conditions

Author: acelaya

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 ### Added
 * [#491](https://github.com/shlinkio/shlink-web-component/issues/491) Add support for colors in QR code configurator.
+* [#515](https://github.com/shlinkio/shlink-web-component/issues/515) Add support for geolocation redirect conditions when using Shlink 4.3 or newer.
 
 ### Changed
 * *Nothing*

package-lock.json

@@ -47,7 +47,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@shlinkio/shlink-frontend-kit": "^0.6.0",
-    "@shlinkio/shlink-js-sdk": "^1.2.0",
+    "@shlinkio/shlink-js-sdk": "^1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.1",

package.json

@@ -67,6 +67,8 @@ export const RedirectRuleCard: FC<RedirectRuleCardProps> = (
                   <>Query string contains {condition.matchKey}={condition.matchValue}</>
                 )}
                 {condition.type === 'ip-address' && <>IP address matches {condition.matchValue}</>}
+                {condition.type === 'geolocation-country-code' && <>Country code is {condition.matchValue}</>}
+                {condition.type === 'geolocation-city-name' && <>City name is {condition.matchValue}</>}
               </div>
             ))}
           </div>

src/redirect-rules/helpers/RedirectRuleCard.tsx

@@ -10,14 +10,15 @@ import type { FC, FormEvent } from 'react';
 import { useMemo } from 'react';
 import { useCallback, useId, useState } from 'react';
 import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
+import { countryCodes } from '../../utils/country-codes';
 import { useFeature } from '../../utils/features';
 import './RedirectRuleModal.scss';
 
 const deviceNames = {
   android: 'Android',
   ios: 'iOS',
   desktop: 'Desktop',
-} satisfies Record<string, string>;
+} as const satisfies Record<string, string>;
 
 type DeviceType = keyof typeof deviceNames;
 
@@ -116,12 +117,40 @@ const QueryParamControls: FC<{
   );
 };
 
-const IpAddressControls: FC<{ ipAddress?: string; onIpAddressChange: (lang: string) => void; }> = (
+const IpAddressControls: FC<{ ipAddress?: string; onIpAddressChange: (ipAddress: string) => void; }> = (
   { ipAddress, onIpAddressChange },
 ) => (
   <PlainValueControls value={ipAddress} onValueChange={onIpAddressChange} label="IP address" placeholder="192.168.1.10" />
 );
 
+const CountryCodeControls: FC<{ countryCode?: string; onCountryCodeChange: (countryCode: string) => void }> = ({
+  countryCode,
+  onCountryCodeChange,
+}) => {
+  const countryCodeId = useId();
+  return (
+    <div>
+      <label htmlFor={countryCodeId}>Country:</label>
+      <select
+        id={countryCodeId}
+        className="form-select"
+        value={countryCode}
+        onChange={(e) => onCountryCodeChange(e.target.value)}
+        required
+      >
+        {!countryCode && <option value="">- Select country -</option>}
+        {Object.entries(countryCodes).map(([code, name]) => <option key={code} value={code}>{name}</option>)}
+      </select>
+    </div>
+  );
+};
+
+const CityNameControls: FC<{ cityName?: string; onCityNameChange: (cityName: string) => void; }> = (
+  { cityName, onCityNameChange },
+) => (
+  <PlainValueControls value={cityName} onValueChange={onCityNameChange} label="City name" placeholder="New York" />
+);
+
 const Condition: FC<{
   condition: ShlinkRedirectCondition;
   onConditionChange: (condition: ShlinkRedirectCondition) => void;
@@ -142,21 +171,25 @@ const Condition: FC<{
     [condition, onConditionChange],
   );
   const supportsIpRedirectCondition = useFeature('ipRedirectCondition');
+  const supportsGeolocationRedirectCondition = useFeature('geolocationRedirectCondition');
   const conditionNames = useMemo((): Partial<Record<ShlinkRedirectConditionType, string>> => {
-    const commonConditionNames: Partial<Record<ShlinkRedirectConditionType, string>> = {
+    const conditionNames: Partial<Record<ShlinkRedirectConditionType, string>> = {
       device: 'Device type',
       language: 'Language',
       'query-param': 'Query param',
     };
-    if (!supportsIpRedirectCondition) {
-      return commonConditionNames;
+
+    if (supportsIpRedirectCondition) {
+      conditionNames['ip-address'] = 'IP address';
     }
 
-    return {
-      ...commonConditionNames,
-      'ip-address': 'IP address',
-    };
-  }, [supportsIpRedirectCondition]);
+    if (supportsGeolocationRedirectCondition) {
+      conditionNames['geolocation-country-code'] = 'Country (geolocation)';
+      conditionNames['geolocation-city-name'] = 'City name (geolocation)';
+    }
+
+    return conditionNames;
+  }, [supportsGeolocationRedirectCondition, supportsIpRedirectCondition]);
 
   return (
     <div className="redirect-rule-modal__condition rounded p-3 h-100 d-flex flex-column gap-2 position-relative">
@@ -200,6 +233,12 @@ const Condition: FC<{
       {condition.type === 'ip-address' && (
         <IpAddressControls ipAddress={condition.matchValue} onIpAddressChange={setConditionValue} />
       )}
+      {condition.type === 'geolocation-country-code' && (
+        <CountryCodeControls countryCode={condition.matchValue} onCountryCodeChange={setConditionValue} />
+      )}
+      {condition.type === 'geolocation-city-name' && (
+        <CityNameControls cityName={condition.matchValue} onCityNameChange={setConditionValue} />
+      )}
     </div>
   );
 };

src/redirect-rules/helpers/RedirectRuleModal.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { UnstyledButton } from '../utils/components/UnstyledButton';
@@ -20,6 +20,38 @@ type ShortUrlsTableDeps = {
   ShortUrlsRow: ShortUrlsRowType;
 };
 
+type ShortUrlsTableBodyProps = ShortUrlsTableDeps & Pick<ShortUrlsTableProps, 'shortUrlsList' | 'onTagClick'>;
+
+const ShortUrlsTableBody: FC<ShortUrlsTableBodyProps> = ({ shortUrlsList, onTagClick, ShortUrlsRow }) => {
+  const { error, loading, shortUrls } = shortUrlsList;
+
+  if (error) {
+    return (
+      <tr>
+        <td colSpan={6} className="text-center table-danger text-dark">
+          Something went wrong while loading short URLs :(
+        </td>
+      </tr>
+    );
+  }
+
+  if (loading) {
+    return <tr><td colSpan={6} className="text-center">Loading...</td></tr>;
+  }
+
+  if (!loading && (!shortUrls || shortUrls.data.length === 0)) {
+    return <tr><td colSpan={6} className="text-center">No results found</td></tr>;
+  }
+
+  return shortUrls?.data.map((shortUrl) => (
+    <ShortUrlsRow
+      key={shortUrl.shortUrl}
+      shortUrl={shortUrl}
+      onTagClick={onTagClick}
+    />
+  ));
+};
+
 const ShortUrlsTable: FCWithDeps<ShortUrlsTableProps, ShortUrlsTableDeps> = ({
   orderByColumn,
   renderOrderIcon,
@@ -28,39 +60,10 @@ const ShortUrlsTable: FCWithDeps<ShortUrlsTableProps, ShortUrlsTableDeps> = ({
   className,
 }: ShortUrlsTableProps) => {
   const { ShortUrlsRow } = useDependencies(ShortUrlsTable);
-  const { error, loading, shortUrls } = shortUrlsList;
   const actionableFieldClasses = clsx({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
   const orderableColumnsClasses = clsx('short-urls-table__header-cell', actionableFieldClasses);
   const tableClasses = clsx('table table-hover responsive-table short-urls-table', className);
 
-  const renderShortUrls = () => {
-    if (error) {
-      return (
-        <tr>
-          <td colSpan={6} className="text-center table-danger text-dark">
-            Something went wrong while loading short URLs :(
-          </td>
-        </tr>
-      );
-    }
-
-    if (loading) {
-      return <tr><td colSpan={6} className="text-center">Loading...</td></tr>;
-    }
-
-    if (!loading && (!shortUrls || shortUrls.data.length === 0)) {
-      return <tr><td colSpan={6} className="text-center">No results found</td></tr>;
-    }
-
-    return shortUrls?.data.map((shortUrl) => (
-      <ShortUrlsRow
-        key={shortUrl.shortUrl}
-        shortUrl={shortUrl}
-        onTagClick={onTagClick}
-      />
-    ));
-  };
-
   return (
     <table className={tableClasses}>
       <thead className="responsive-table__header short-urls-table__header">
@@ -88,7 +91,7 @@ const ShortUrlsTable: FCWithDeps<ShortUrlsTableProps, ShortUrlsTableDeps> = ({
         </tr>
       </thead>
       <tbody>
-        {renderShortUrls()}
+        <ShortUrlsTableBody ShortUrlsRow={ShortUrlsRow} shortUrlsList={shortUrlsList} onTagClick={onTagClick} />
       </tbody>
     </table>
   );