@@ -7,10 +7,13 @@ import {
7
7
Text ,
8
8
Tooltip ,
9
9
SegmentedControl ,
10
+ Indicator ,
11
+ Alert ,
10
12
} from '@mantine/core' ;
11
13
import { useColorScheme } from '@mantine/hooks' ;
12
- import { useState } from 'react' ;
13
- import { Settings as SettingsIcon } from 'tabler-icons-react' ;
14
+ import { useEffect , useState } from 'react' ;
15
+ import { AlertCircle , Settings as SettingsIcon } from 'tabler-icons-react' ;
16
+ import { CURRENT_VERSION , REPO_URL } from '../../data/constants' ;
14
17
import { useConfig } from '../../tools/state' ;
15
18
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch' ;
16
19
import SaveConfigComponent from '../Config/SaveConfig' ;
@@ -19,13 +22,23 @@ import ModuleEnabler from './ModuleEnabler';
19
22
function SettingsMenu ( props : any ) {
20
23
const { config, setConfig } = useConfig ( ) ;
21
24
const colorScheme = useColorScheme ( ) ;
25
+ const { current, latest } = props ;
22
26
const matches = [
23
27
{ label : 'Google' , value : 'https://google.com/search?q=' } ,
24
28
{ label : 'DuckDuckGo' , value : 'https://duckduckgo.com/?q=' } ,
25
29
{ label : 'Bing' , value : 'https://bing.com/search?q=' } ,
26
30
] ;
31
+
27
32
return (
28
33
< Group direction = "column" grow >
34
+ < Alert
35
+ icon = { < AlertCircle size = { 16 } /> }
36
+ title = "Update available"
37
+ radius = "lg"
38
+ hidden = { current === latest }
39
+ >
40
+ Version { latest } is available. Current : { current }
41
+ </ Alert >
29
42
< Group >
30
43
< SegmentedControl
31
44
title = "Search engine"
@@ -82,7 +95,20 @@ function SettingsMenu(props: any) {
82
95
}
83
96
84
97
export function SettingsMenuButton ( props : any ) {
98
+ const [ update , setUpdate ] = useState ( false ) ;
85
99
const [ opened , setOpened ] = useState ( false ) ;
100
+ const [ latestVersion , setLatestVersion ] = useState ( CURRENT_VERSION ) ;
101
+ useEffect ( ( ) => {
102
+ // Fetch Data here when component first mounted
103
+ fetch ( `https://api.github.com/repos/${ REPO_URL } /releases/latest` ) . then ( ( res ) => {
104
+ res . json ( ) . then ( ( data ) => {
105
+ setLatestVersion ( data . tag_name ) ;
106
+ if ( data . tag_name !== CURRENT_VERSION ) {
107
+ setUpdate ( true ) ;
108
+ }
109
+ } ) ;
110
+ } ) ;
111
+ } , [ ] ) ;
86
112
return (
87
113
< >
88
114
< Modal
@@ -91,7 +117,7 @@ export function SettingsMenuButton(props: any) {
91
117
opened = { props . opened || opened }
92
118
onClose = { ( ) => setOpened ( false ) }
93
119
>
94
- < SettingsMenu />
120
+ < SettingsMenu current = { CURRENT_VERSION } latest = { latestVersion } />
95
121
</ Modal >
96
122
< ActionIcon
97
123
variant = "default"
@@ -102,7 +128,14 @@ export function SettingsMenuButton(props: any) {
102
128
onClick = { ( ) => setOpened ( true ) }
103
129
>
104
130
< Tooltip label = "Settings" >
105
- < SettingsIcon />
131
+ < Indicator
132
+ size = { 12 }
133
+ disabled = { CURRENT_VERSION === latestVersion }
134
+ offset = { - 3 }
135
+ position = "top-end"
136
+ >
137
+ < SettingsIcon />
138
+ </ Indicator >
106
139
</ Tooltip >
107
140
</ ActionIcon >
108
141
</ >
0 commit comments