feat: show latest rc versions in from dropdown (#91)

feat: show latest `rc` versions in `from` dropdown

Co-authored-by: Lucas Bento <[email protected]>

Author: Lucas Bento

src/__tests__/__snapshots__/App.spec.js.snap

@@ -30,13 +30,37 @@ exports[`renders without crashing 1`] = `
             </h1>
           </a>
           <div
-            class="sc-gPEVay iMFRcs"
+            class="sc-gPEVay bKLGYK"
           >
             <div>
               ReactGitHubBtn - 
               Star
             </div>
           </div>
+          <button
+            class="ant-btn ant-btn-icon-only"
+            type="button"
+          >
+            <i
+              aria-label="icon: setting"
+              class="anticon anticon-setting"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="setting"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
+                />
+              </svg>
+            </i>
+          </button>
         </div>
         <div
           class="sc-htpNat hqmgw"

src/__tests__/components/__snapshots__/Home.spec.js.snap

@@ -30,13 +30,37 @@ exports[`renders without crashing 1`] = `
             </h1>
           </a>
           <div
-            class="sc-gPEVay iMFRcs"
+            class="sc-gPEVay bKLGYK"
           >
             <div>
               ReactGitHubBtn - 
               Star
             </div>
           </div>
+          <button
+            class="ant-btn ant-btn-icon-only"
+            type="button"
+          >
+            <i
+              aria-label="icon: setting"
+              class="anticon anticon-setting"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="setting"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
+                />
+              </svg>
+            </i>
+          </button>
         </div>
         <div
           class="sc-htpNat hqmgw"

src/components/common/Settings.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { Popover, Button, Checkbox } from 'antd'
+import { SHOW_LATEST_RCS } from '../../utils'
+
+const Settings = ({ handleSettingsChange }) => {
+  const [popoverVisibility, setVisibility] = useState(false)
+
+  const handleClickChange = visibility => setVisibility(visibility)
+
+  const updateCheckboxValues = checkboxValues =>
+    handleSettingsChange(checkboxValues)
+
+  return (
+    <Popover
+      placement="bottomRight"
+      content={
+        <Checkbox.Group onChange={updateCheckboxValues}>
+          <div>
+            <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
+          </div>
+        </Checkbox.Group>
+      }
+      trigger="click"
+      visible={popoverVisibility}
+      onVisibleChange={handleClickChange}
+    >
+      <Button icon="setting" />
+    </Popover>
+  )
+}
+
+export default Settings

src/components/common/VersionSelector.js

@@ -47,26 +47,50 @@ const getVersionsInURL = () => {
   }
 }
 
-// Compare versions by removing the `rc` from them, e.g. `0.60.0-rc.1` becomes `0.60.0`
 const compareReleaseCandidateVersions = ({ version, versionToCompare }) =>
-  semver.compare(
-    semver.valid(semver.coerce(version)),
-    semver.valid(semver.coerce(versionToCompare))
-  ) === 0
-
-// Filters out release candidates from `releasedVersion` with the exception of
-// the release candidates from the latest version & target version that comes from the URL
-// but only if any of them is a release candidate
-const getReleasedVersionsWithoutCandidates = ({
+  ['prepatch', null].includes(semver.diff(version, versionToCompare))
+
+const getLatestMajorReleaseVersion = releasedVersions =>
+  semver.valid(
+    semver.coerce(
+      releasedVersions.find(
+        releasedVersion =>
+          !semver.prerelease(releasedVersion) &&
+          semver.patch(releasedVersion) === 0
+      )
+    )
+  )
+
+// Check if `from` rc version is one of the latest major release (ie. 0.60.0)
+const checkLatestReleaseCandidate = ({ version, latestVersion }) =>
+  semver.prerelease(version) &&
+  compareReleaseCandidateVersions({
+    version: latestVersion,
+    versionToCompare: version
+  })
+
+// Filters out release candidates from `releasedVersion` with the
+// exception of the release candidates from the latest version
+const getReleasedVersionsWithCandidates = ({
   releasedVersions,
   toVersion,
-  latestVersion
+  latestVersion,
+  showReleaseCandidates
 }) => {
   const isToVersionAReleaseCandidate = semver.prerelease(toVersion) !== null
   const isLatestAReleaseCandidate = semver.prerelease(latestVersion) !== null
 
-  return releasedVersions.filter(
-    releasedVersion =>
+  return releasedVersions.filter(releasedVersion => {
+    // Show the release candidates of the latest version
+    const isLatestReleaseCandidate =
+      showReleaseCandidates &&
+      checkLatestReleaseCandidate({
+        version: releasedVersion,
+        latestVersion
+      })
+
+    return (
+      isLatestReleaseCandidate ||
       semver.prerelease(releasedVersion) === null ||
       (isToVersionAReleaseCandidate &&
         compareReleaseCandidateVersions({
@@ -78,16 +102,28 @@ const getReleasedVersionsWithoutCandidates = ({
           version: latestVersion,
           versionToCompare: releasedVersion
         }))
-  )
+    )
+  })
 }
 
-const getReleasedVersions = ({ releasedVersions, minVersion, maxVersion }) =>
-  releasedVersions.filter(
+const getReleasedVersions = ({ releasedVersions, minVersion, maxVersion }) => {
+  const latestMajorReleaseVersion = getLatestMajorReleaseVersion(
+    releasedVersions
+  )
+
+  const isVersionAReleaseAndOfLatest = version =>
+    version.includes('rc') &&
+    semver.valid(semver.coerce(version)) === latestMajorReleaseVersion
+
+  return releasedVersions.filter(
     releasedVersion =>
       releasedVersion.length > 0 &&
       ((maxVersion && semver.lt(releasedVersion, maxVersion)) ||
-        (minVersion && semver.gt(releasedVersion, minVersion)))
+        (minVersion &&
+          semver.gt(releasedVersion, minVersion) &&
+          !isVersionAReleaseAndOfLatest(releasedVersion)))
   )
+}
 
 // Finds the first minor release (which in react-native is the major) when compared to another version
 const getFirstMajorRelease = ({ releasedVersions, versionToCompare }) =>
@@ -122,7 +158,7 @@ const updateURLVersions = ({ fromVersion, toVersion }) => {
   window.history.replaceState(null, null, `${pageURL}${newURL}`)
 }
 
-const VersionSelector = ({ showDiff }) => {
+const VersionSelector = ({ showDiff, showReleaseCandidates }) => {
   const [isLoading, setLoading] = useState(true)
   const [allVersions, setAllVersions] = useState([])
   const [fromVersionList, setFromVersionList] = useState([])
@@ -160,10 +196,11 @@ const VersionSelector = ({ showDiff }) => {
         : latestVersion
 
       // Remove `rc` versions from the array of versions
-      const sanitizedVersions = getReleasedVersionsWithoutCandidates({
+      const sanitizedVersions = getReleasedVersionsWithCandidates({
         releasedVersions: allVersionsFromResponse,
         toVersion: toVersionToBeSet,
-        latestVersion
+        latestVersion,
+        showReleaseCandidates
       })
 
       setAllVersions(sanitizedVersions)
@@ -188,6 +225,7 @@ const VersionSelector = ({ showDiff }) => {
           minVersion: fromVersionToBeSet
         })
       )
+
       setLocalFromVersion(fromVersionToBeSet)
       setLocalToVersion(toVersionToBeSet)
 
@@ -203,7 +241,7 @@ const VersionSelector = ({ showDiff }) => {
     }
 
     fetchVersions()
-  }, [setLocalFromVersion, setLocalToVersion])
+  }, [setLocalFromVersion, setLocalToVersion, showReleaseCandidates])
 
   useEffect(() => {
     if (isLoading) {
@@ -227,7 +265,8 @@ const VersionSelector = ({ showDiff }) => {
     allVersions,
     localFromVersion,
     localToVersion,
-    hasVersionsFromURL
+    hasVersionsFromURL,
+    showReleaseCandidates
   ])
 
   const onShowDiff = ({ fromVersion, toVersion }) => {

src/components/pages/Home.js

@@ -5,8 +5,10 @@ import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
 import VersionSelector from '../common/VersionSelector'
 import DiffViewer from '../common/DiffViewer'
+import Settings from '../common/Settings'
 import { homepage } from '../../../package.json'
 import logo from '../../assets/logo.svg'
+import { SHOW_LATEST_RCS } from '../../utils'
 
 const Page = styled.div`
   display: flex;
@@ -43,12 +45,16 @@ const StarButton = styled(({ className, ...props }) => (
 ))`
   margin-top: 10px;
   margin-left: 15px;
+  margin-right: auto;
 `
 
 const Home = () => {
   const [fromVersion, setFromVersion] = useState('')
   const [toVersion, setToVersion] = useState('')
   const [showDiff, setShowDiff] = useState(false)
+  const [settings, setSettings] = useState({
+    [`${SHOW_LATEST_RCS}`]: false
+  })
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
@@ -67,6 +73,15 @@ const Home = () => {
     setShowDiff(true)
   }
 
+  const handleSettingsChange = settingsValues => {
+    const normalizedIncomingSettings = settingsValues.reduce((acc, val) => {
+      acc[val] = true
+      return acc
+    }, {})
+
+    setSettings(normalizedIncomingSettings)
+  }
+
   return (
     <Page>
       <Container>
@@ -89,9 +104,14 @@ const Home = () => {
           >
             Star
           </StarButton>
+
+          <Settings handleSettingsChange={handleSettingsChange} />
         </TitleContainer>
 
-        <VersionSelector showDiff={handleShowDiff} />
+        <VersionSelector
+          showDiff={handleShowDiff}
+          showReleaseCandidates={settings[SHOW_LATEST_RCS]}
+        />
       </Container>
 
       <DiffViewer

src/utils.js

@@ -33,3 +33,6 @@ export const getChangelogURL = ({ version }) =>
     '.',
     ''
   )}`
+
+// settings constants
+export const SHOW_LATEST_RCS = 'Show latest release candidates'