mirrors/netbird-dashboard
1
0
Fork 0
mirror of https://github.com/netbirdio/dashboard.git synced 2026-01-26 01:21:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't display announcement after user close it (#95)

Browse Source 
We store the banner text as md5
and the state if user closed already
This commit is contained in:
Maycon Santos
2022-10-13 17:45:51 +02:00
committed by GitHub
parent bb94342cc8
commit 17e671200e
3 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -48,6 +48,7 @@
"redux-saga": "^1.1.3",
"styled-components": "^5.3.5",
"tailwindcss": "^3.0.23",
"ts-md5": "^1.3.1",
"typesafe-actions": "^5.1.0",
"typescript": "^4.6.4",
"web-vitals": "^2.1.4"
@@ -15508,6 +15509,14 @@
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
},
"node_modules/ts-md5": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.3.1.tgz",
"integrity": "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==",
"engines": {
"node": ">=12"
}
},
"node_modules/tsconfig-paths": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -27799,6 +27808,11 @@
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
},
"ts-md5": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.3.1.tgz",
"integrity": "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg=="
},
"tsconfig-paths": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",

1
package.json
View File

@@ -43,6 +43,7 @@
"redux-saga": "^1.1.3",
"styled-components": "^5.3.5",
"tailwindcss": "^3.0.23",
"ts-md5": "^1.3.1",
"typesafe-actions": "^5.1.0",
"typescript": "^4.6.4",
"web-vitals": "^2.1.4"

28
src/components/Banner.tsx
View File

@@ -1,16 +1,24 @@
import { useState } from "react";
import {useEffect, useState} from "react";
import {Button, Col, Row, Space, Typography} from "antd";
import { CloseOutlined } from '@ant-design/icons';
import {Md5} from "ts-md5";
const { Text } = Typography
const Banner = () => {
const [show, setShow] = useState(true);
const [show, setShow] = useState(false);
const banner_md5_key = 'banner_md5'
const banner_closed_key = 'banner_closed'
const dismiss = () => {
setShow(false);
localStorage.setItem(banner_closed_key,'true');
};
const announcement = "New Release! Access private networks with the Network Routes feature."
const announcement_md5 = Md5.hashStr(announcement)
const linkLearnMore = () => {
return (
<a
@@ -22,12 +30,24 @@ const Banner = () => {
)
}
useEffect(()=>{
let store_banner_md5 = localStorage.getItem(banner_md5_key);
let stored_banner_closed = localStorage.getItem(banner_closed_key);
if((!stored_banner_closed || stored_banner_closed !== 'true') ||
(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
setShow(true);
localStorage.setItem(banner_md5_key,announcement_md5);
localStorage.setItem(banner_closed_key,'false');
}
},[])
return show ? (
<div className="relative bg-indigo-600 white" color="white" style={{position: "relative", padding: "0.3rem"}} >
<Row>
<Col xs={24} sm={0} lg={0}>
<Text className="ant-col-md-0" style={{color: "#ffffff"}}>
New Release! Access private networks with the Network Routes feature.
{announcement}
</Text>
</Col>
<Col xs={24} sm={0} lg={0}>
@@ -38,7 +58,7 @@ const Banner = () => {
<Col xs={0} sm={24}>
<Space align="center" style={{display: "flex", justifyContent: "center"}}>
<Text style={{color: "#ffffff"}}>
New Release! Access private networks with the Network Routes feature.
{announcement}
</Text>
<span>
{linkLearnMore()}