Merge remote-tracking branch 'origin/dev'

components/common/FilterLink.js

@@ -6,14 +6,15 @@ import usePageQuery from 'hooks/usePageQuery';
 import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';
 
-export function FilterLink({ id, value, label, externalUrl }) {
+export function FilterLink({ id, value, label, externalUrl, children, className }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl, query } = usePageQuery();
   const active = query[id] !== undefined;
   const selected = query[id] === value;
 
   return (
-    <div className={styles.row}>
+    <div className={classNames(styles.row, className)}>
+      {children}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
         <Link

components/common/FilterLink.module.css

@@ -1,6 +1,7 @@
 .row {
   display: flex;
   align-items: center;
+  gap: 10px;
 }
 
 .row .inactive {

components/metrics/CountriesTable.js

@@ -11,9 +11,14 @@ export function CountriesTable({ websiteId, ...props }) {
 
   function renderLink({ x: code }) {
     return (
-      <div className={locale}>
+      <FilterLink
-        <FilterLink id="country" value={countryNames[code] && code} label={countryNames[code]} />
+        id="country"
-      </div>
+        className={locale}
+        value={countryNames[code] && code}
+        label={countryNames[code]}
+      >
+        <img src={`/images/flags/${code.toLowerCase()}.png`} alt={code} />
+      </FilterLink>
     );
   }
 

components/metrics/RegionsTable.js

@@ -15,11 +15,11 @@ export function RegionsTable({ websiteId, ...props }) {
     return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x;
   };
 
-  const renderLink = ({ x }) => {
+  const renderLink = ({ x: code }) => {
     return (
-      <div className={locale}>
+      <FilterLink id="region" className={locale} value={code} label={renderLabel(code)}>
-        <FilterLink id="region" value={x} label={renderLabel(x)} />
+        <img src={`/images/flags/${code.split('-')[0].toLowerCase()}.png`} alt={code} />
-      </div>
+      </FilterLink>
     );
   };
 

lib/middleware.ts

@@ -20,14 +20,19 @@ export const useCors = createMiddleware(
 );
 
 export const useSession = createMiddleware(async (req, res, next) => {
-  const session = await findSession(req as NextApiRequestCollect);
+  try {
+    const session = await findSession(req as NextApiRequestCollect);
 
-  if (!session) {
+    if (!session) {
-    log('useSession: Session not found');
+      log('useSession: Session not found');
-    return badRequest(res, 'Session not found.');
+      return badRequest(res, 'Session not found.');
+    }
+
+    (req as any).session = session;
+  } catch (e: any) {
+    return badRequest(res, e.message);
   }
 
-  (req as any).session = session;
   next();
 });
 

lib/session.ts

@@ -11,7 +11,7 @@ export async function findSession(req: NextApiRequestCollect) {
   const { payload } = getJsonBody<CollectRequestBody>(req);
 
   if (!payload) {
-    return null;
+    throw new Error('Invalid payload.');
   }
 
   // Check if cache token is passed
@@ -29,14 +29,14 @@ export async function findSession(req: NextApiRequestCollect) {
   const { website: websiteId, hostname, screen, language } = payload;
 
   if (!validate(websiteId)) {
-    return null;
+    throw new Error('Invalid website ID.');
   }
 
   // Find website
   const website = await loadWebsite(websiteId);
 
   if (!website) {
-    throw new Error(`Website not found: ${websiteId}`);
+    throw new Error(`Website not found: ${websiteId}.`);
   }
 
   const { userAgent, browser, os, ip, country, subdivision1, subdivision2, city, device } =

package.json

@@ -32,7 +32,7 @@
     "merge-messages": "node scripts/merge-messages.js",
     "generate-lang": "npm-run-all extract-messages merge-messages",
     "format-lang": "node scripts/format-lang.js",
-    "compile-lang": "formatjs compile-folder --ast build public/intl/messages",
+    "compile-lang": "formatjs compile-folder --ast build/messages public/intl/messages",
     "check-lang": "node scripts/check-lang.js",
     "download-country-names": "node scripts/download-country-names.js",
     "download-language-names": "node scripts/download-language-names.js",