Show the ApiWarningPage when the minor number of api_version is n…

…ot the same.

package.json

@@ -12,6 +12,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.1",
+    "semver": "^7.6.0",
     "zustand": "^4.5.1"
   },
   "scripts": {

src/locales/en/translation.json

@@ -223,9 +223,12 @@
     },
     "result": {
       "api_error": {
-        "description": "Sorry, your result is incompatible with current version. Please do the quiz again.",
+        "description": "Sorry, the result is incompatible with current version. Please do the quiz again.",
         "index": "Go to index page"
       },
+      "api_warning": {
+        "description": "The data being showed is from the old question list. Consider doing the quiz again to obtain latest result."
+      },
       "diff_card": {
         "compare_with": "Compare with {{name}}",
         "user": "User",

src/locales/zh-CN/translation.json

@@ -223,9 +223,12 @@
     },
     "result": {
       "api_error": {
-        "description": "抱歉，您的测试结果无法兼容于目前新版号，请重新进行测试。",
+        "description": "抱歉，您的结果无法兼容于目前新版号，请重新进行测验。",
         "index": "回到主页"
       },
+      "api_warning": {
+        "description": "目前显示的资料是来自旧的问题集，请重新进行测验以获得最新结果。"
+      },
       "diff_card": {
         "compare_with": "与 {{name}} 的比较",
         "user": "使用者",

src/locales/zh-TW/translation.json

@@ -223,9 +223,12 @@
     },
     "result": {
       "api_error": {
-        "description": "抱歉，您的測試結果無法相容於目前新版本，請重新進行測試。",
+        "description": "抱歉，您的結果無法相容於目前新版本，請重新進行測試。",
         "index": "回到首頁"
       },
+      "api_warning": {
+        "description": "目前顯示的資料是來自舊的問題集，請重新進行測試以獲得最新結果。"
+      },
       "diff_card": {
         "compare_with": "與 {{name}} 的比較",
         "user": "使用者",

src/pages/Result.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { Card, Flex, Switch, message } from 'antd'
+import { WarningOutlined } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 import { useThemeStore } from '../store/store'
 import MatchCard from '../components/MatchCard'
@@ -9,7 +10,7 @@ import { useBreakpoint, getContentMaxWidth } from '../utils/useBreakpoint'
 import { getIdeologyTags } from '../data/ideology_tag'
 import { getIdeologyMatchScores, getPoliticalPartyMatchScores } from '../utils/match'
 import { getValueConstant } from '../utils/getValueConstant'
-import { API_VERSION_KEY, API_VERSION_VALUE } from '../utils/apiVersion'
+import { API_VERSION_KEY, isApiVersionCompatible, isApiVersionEqual } from '../utils/apiVersion'
 import * as stylex from '@stylexjs/stylex'
 
 const apiErrorButtonStyles = stylex.create({
@@ -126,7 +127,7 @@ const Result = () => {
   const [messageApi, contextHolder] = message.useMessage()
   const [expandTags, setExpandTags] = useState(false, [])
 
-  const isApiVersionOK = searchParams.get(API_VERSION_KEY) == API_VERSION_VALUE
+  const apiVersion = searchParams.get(API_VERSION_KEY) || ''
 
   const weights = {
     economic: searchParams.get('economic'),
@@ -196,6 +197,7 @@ const Result = () => {
   const ApiErrorPage = () => (
     <Flex
       vertical={true}
+      justify='center'
       align='center'
       style={{
         width: '100%',
@@ -204,11 +206,12 @@ const Result = () => {
         borderStyle: 'solid',
         borderWidth: '4px',
         borderRadius: '20px',
+        padding: '20px',
       }}
     >
       <h2
         style={{
-          margin: '40px',
+          margin: '5px',
           color: 'red',
         }}
       >
@@ -225,6 +228,33 @@ const Result = () => {
     </Flex>
   )
 
+  const ApiWarningPage = () => (
+    <Flex
+      vertical={false}
+      justify='center'
+      align='center'
+      style={{
+        width: '100%',
+        backgroundColor: resultStyles.apiWarningPage.backgroundColor,
+        borderColor: resultStyles.apiWarningPage.borderColor,
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        borderRadius: '20px',
+        padding: '20px',
+      }}
+    >
+      <WarningOutlined style={{ color: resultStyles.apiWarningPage.color, fontSize: 'large' }} />
+      <h3
+        style={{
+          margin: '5px',
+          color: resultStyles.apiWarningPage.color,
+        }}
+      >
+        {t(`quiz.result.api_warning.description`)}
+      </h3>
+    </Flex>
+  )
+
   return (
     <Flex
       vertical={true}
@@ -241,10 +271,11 @@ const Result = () => {
         padding: '5px',
       }}
     >
-      {!isApiVersionOK ? (
+      {!isApiVersionCompatible(apiVersion) ? (
         <ApiErrorPage />
       ) : (
         <>
+          {!isApiVersionEqual(apiVersion) && <ApiWarningPage />}
           <MatchCard
             title={t('quiz.result.ideologies.name')}
             data={getIdeologyMatchScores(weights)}

src/themes/dark.js

@@ -24,6 +24,11 @@ const theme = {
         color: 'white',
         backgroundColor: '#000000',
       },
+      apiWarningPage: {
+        color: 'yellow',
+        backgroundColor: 'black',
+        borderColor: 'yellow',
+      },
     },
   },
 }

src/themes/light.js

@@ -24,6 +24,11 @@ const theme = {
         color: 'black',
         backgroundColor: 'white',
       },
+      apiWarningPage: {
+        color: 'orangered',
+        backgroundColor: 'white',
+        borderColor: 'black',
+      },
     },
   },
 }

src/utils/apiVersion.js

@@ -1,3 +1,26 @@
+import semver from 'semver'
+
 export const API_VERSION_KEY = 'api_version'
 
-export const API_VERSION_VALUE = 1
+export const API_VERSION_VALUE = '1.0.0'
+
+export const isApiVersionCompatible = (apiVersion) => {
+  const version = fixApiVersion1(apiVersion)
+  if (!semver.valid(version)) {
+    return false
+  }
+
+  return semver.major(version) == semver.major(API_VERSION_VALUE)
+}
+
+export const isApiVersionEqual = (apiVersion) => {
+  const version = fixApiVersion1(apiVersion)
+  if (!semver.valid(version)) {
+    return false
+  }
+
+  return semver.eq(version, API_VERSION_VALUE)
+}
+
+// For the legacy `api_version=1` not being made as correct semver format.
+const fixApiVersion1 = (apiVersion) => (apiVersion == '1' ? '1.0.0' : apiVersion)

src/utils/apiVersion.test.js

@@ -0,0 +1,24 @@
+import { expect, test } from 'vitest'
+import { isApiVersionCompatible, isApiVersionEqual, API_VERSION_VALUE } from './apiVersion'
+
+test('identical apiVersion', () => {
+  expect(isApiVersionCompatible(API_VERSION_VALUE)).toBe(true)
+  expect(isApiVersionEqual(API_VERSION_VALUE)).toBe(true)
+})
+
+test('incompatible apiVersion', () => {
+  expect(isApiVersionCompatible('0')).toBe(false)
+  expect(isApiVersionEqual('0')).toBe(false)
+  expect(isApiVersionCompatible('0.0.0')).toBe(false)
+  expect(isApiVersionEqual('0.0.0')).toBe(false)
+})
+
+test('legacy apiVersion=1', () => {
+  expect(isApiVersionCompatible('1')).toBe(true)
+  expect(isApiVersionEqual('1')).toBe(true)
+})
+
+test('apiVersion with identical major number only', () => {
+  expect(isApiVersionCompatible('1.1000.0')).toBe(true)
+  expect(isApiVersionEqual('1.1000.0')).toBe(false)
+})