@@ -31,6 +31,9 @@ import * as grid from '../styles/grid.module.css';
3131const Download = ( { data } ) => {
3232 const intl = useIntl ( ) ;
3333 const releases = usePreparedReleases ( data . releases . nodes ) ;
34+ const prereleases = usePreparedReleases ( data . prereleases . nodes ) ;
35+
36+ const [ selectedRelease , setSelectedRelease ] = useState ( releases [ 0 ] ) ;
3437
3538 // gatsby-plugin-fathom requires us to use hooks
3639 const trackWindows = useGoal ( 'CIMDWXJV' ) ;
@@ -68,6 +71,7 @@ const Download = ({ data }) => {
6871 window . addEventListener ( 'focus' , goToDonate ) ;
6972 } ;
7073
74+
7175 return (
7276 < Layout >
7377 < HeadMatter
@@ -83,13 +87,20 @@ const Download = ({ data }) => {
8387 </ div >
8488 </ div >
8589
90+ < PreReleaseSwitch
91+ releases = { releases }
92+ prereleases = { prereleases }
93+ selectedRelease = { selectedRelease }
94+ setSelectedRelease = { setSelectedRelease }
95+ />
96+
8697 < MainDownloadSection
87- release = { releases [ 0 ] }
98+ release = { selectedRelease }
8899 onAfterDownload = { onAfterDownload }
89100 />
90101
91102 < OSSectionContainer
92- release = { releases [ 0 ] }
103+ release = { selectedRelease }
93104 onAfterDownload = { onAfterDownload }
94105 />
95106
@@ -152,6 +163,29 @@ const Download = ({ data }) => {
152163 ) ;
153164} ;
154165
166+ const PreReleaseSwitch = memo ( ( { releases, prereleases, selectedRelease, setSelectedRelease } ) => {
167+ const intl = useIntl ( ) ;
168+
169+ return (
170+ < >
171+ {
172+ prereleases . length > 0 && (
173+ < div className = { classnames ( grid . container , grid . grid , css . preReleaseSwitchContainer ) } >
174+ < div className = { classnames ( grid . col , css . preReleaseSwitch ) } >
175+ < button className = { selectedRelease === releases [ 0 ] ? css . selected : "" } onClick = { ( ) => setSelectedRelease ( releases [ 0 ] ) } >
176+ { intl . formatMessage ( { id : 'main' } ) } ({ releases [ 0 ] . version } )
177+ </ button >
178+ < button className = { selectedRelease === prereleases [ 0 ] ? css . selected : "" } onClick = { ( ) => setSelectedRelease ( prereleases [ 0 ] ) } >
179+ { intl . formatMessage ( { id : 'beta' } ) } ({ prereleases [ 0 ] . version } )
180+ </ button >
181+ </ div >
182+ </ div >
183+ )
184+ }
185+ </ >
186+ )
187+ } ) ;
188+
155189const MainDownloadSection = memo ( ( { release, onAfterDownload } ) => {
156190 const intl = useIntl ( ) ;
157191 const detectedAsset = useMachineOS ( release . assetsByOs , release . publishedAt ) ;
@@ -367,7 +401,7 @@ const Link = memo(({ href, icon, title, description }) => (
367401) ) ;
368402
369403export const query = graphql `
370- query($selectedReleases: [String!]!) {
404+ query($selectedReleases: [String!]!, $selectedPreReleases: [String!]! ) {
371405 releases: allFile(
372406 filter: {
373407 sourceInstanceName: { eq: "download" }
@@ -381,6 +415,33 @@ export const query = graphql`
381415 name
382416 tagName
383417 publishedAt
418+ isPrerelease
419+ releaseAssets {
420+ edges {
421+ node {
422+ name
423+ downloadUrl
424+ size
425+ }
426+ }
427+ }
428+ }
429+ }
430+ }
431+ prereleases: allFile(
432+ filter: {
433+ sourceInstanceName: { eq: "download" }
434+ relativeDirectory: { eq: "releases" }
435+ childJson: { tagName: { in: $selectedPreReleases } }
436+ }
437+ sort: { fields: childJson___name, order: DESC }
438+ ) {
439+ nodes {
440+ childJson {
441+ name
442+ tagName
443+ publishedAt
444+ isPrerelease
384445 releaseAssets {
385446 edges {
386447 node {
0 commit comments