Úvod
Je to už nějakou dobu, co jsem s Reactem udělal hodně. Když jsem to zkoušel s jednoduchou správou stavu, vestavěnými háčky, základním stylováním a správou událostí, řekl jsem si, proč nepostavit něco užitečného? Tehdy vznikla myšlenka postavit jednoduchý a lehký notification-timeline přišlo mi na mysl.
Co je tedy časová osa oznámení?
- Jak název napovídá, upozorní vás dříve, než přijde oznámení.
- Pomáhá vám číst oznámení v časovém pořadí. Odtud pochází časová osa.
- Oznámení můžete označit jako přečtená.
- Můžete určit, jaké oznámení bylo přijato a kdy.
- Několik dalších možností přizpůsobení, o kterých budeme hovořit později.
Jak to vypadá?
-
Základní vzhled a chování obsahuje ikonu zvonku spolu s řadou nepřečtených oznámení, která si můžete prohlédnout.
-
Kliknutím na ikonu zvonku otevřete vyskakovací okno pro přečtení oznámení a v případě potřeby je označíte jako přečtené.
TL;DR
V tomto článku vysvětlím některé zdrojové kódy na vysoké úrovni. Prosím, držte se toho. Jsem si jistý, že si z toho něco odnesete.
V případě, že se chcete ke kódu nebo ukázce dostat brzy, zde jsou podrobnosti:
Ukázka
K ukázce se dostanete zde:https://notify-timeline.netlify.app/
Zdrojový kód
Veškerý zdrojový kód je zde v git repo. Pokud se vám práce líbí, ukažte prosím svou podporu repo hvězdičkou.
https://github.com/atapas/notifymeYayyy, je k dispozici jako npm
Věděli jste, že tato součást je k dispozici také jako npm? To jo! můžete si jej stáhnout a nainstalovat pomocí,
npm i react-notification-timeline
nebo
yarn add react-notification-timeline
Po instalaci jej lze importovat do vašeho projektu React jako,
import NotifyMe from 'react-notification-timeline';
Použijte komponentu jako,
<NotifyMe
data={data}
storageKey='notific_key'
notific_key='timestamp'
notific_value='update'
heading='Notification Alerts'
sortedByKey={false}
showDate={true}
size={64}
color="yellow"
/>
Další podrobnosti o vlastnostech a přizpůsobeních si přečtěte zde.
Zkuste to prosím a dejte mi vědět, jak to jde. Téměř nic není bez chyb! Neváhejte být přispěvatelem, pokud byste chtěli najít a zkusit opravit chyby nebo přidat funkce. Jste srdečně vítáni.
Porozumění části „Jak“
Děkuji, že jste to dočetli až sem! Tato část článku vysvětlí několik důležitých částí zdrojového kódu a základní logiku kolem něj. Zde je přímý odkaz na soubor součásti.
Na prvním místě jsou data
notification-timeline komponenta očekává data v následujícím formátu,
[
{
"update":"70 new employees are shifted",
"timestamp":1596119688264
},
{
"update": "Time to Take a Break, TADA!!!",
"timestamp":1596119686811
}
]
Objekt musí mít dvě vlastnosti.
- časové razítko:Časové razítko času vygenerování zprávy. Toto musí být typu long, který představuje hodnotu časového razítka.
- aktualizace:Zpráva, která zobrazí upozornění.
Poznámka:Názvy klíčů timestamp a update lze přizpůsobit, jak je vysvětleno v části vlastností.
Státy ke správě
Háček useState vrací pár. První je aktuální stav a druhá je funkce aktualizace. Obvykle využíváme výhody array destructuring k přiřazení hodnot. Hodnotu počátečního stavu lze předat pomocí argumentu.
Oznamovací komponenta spravuje několik stavů pomocí useState ,
- Zobrazení počtu nepřečtených zpráv
const [showCount, setShowCount] = useState(false); - Kolik nepřečtených zpráv
const [messageCount, setMessageCount] = useState(0); - Pro zobrazení panelu zpráv po kliknutí na ikonu zvonku
const [show, setShow] = useState(false); - Chcete-li nastavit cíl kliknutí na panelu zpráv
const [target, setTarget] = useState(null); - Chcete-li udržovat index čtení. Toto má určit, jak daleko byly zprávy přečteny, aby se nepřečtené zprávy mohly zobrazit jiným stylem.
const [raedIndex, setReadIndex] = useState(0);
Řešení vedlejších účinků
Háček useEffect se používá ke zpracování jakéhokoli druhu vedlejších efektů, jako jsou změny hodnoty stavu, jakýkoli druh předplatného, síťové požadavky atd. Vyžaduje dva argumenty, nejprve funkci, která bude vyvolána za běhu, a pole hodnot, které spustí háček.
Ve výchozím nastavení se spouští po dokončení každého vykreslování. Můžeme jej však spustit vždy, když se konkrétní hodnota změní, tím, že ji předáme jako druhý parametr. Můžeme jej také zajistit, aby se spustil pouze jednou, když jako druhý parametr předáme prázdné pole.
Oznamovací komponenta zpracovává vedlejší efekt změn dat. Kdykoli přijde nové oznámení, data se ztlumí a my musíme tento vedlejší efekt vyřešit.
useEffect(() => {
if (!sortedByKey) {
data.sort((a, b) => b[key] - a[key]);
}
let readItemLs = reactLocalStorage.getObject(storageKey);
let readMsgId = Object.keys(readItemLs).length > 0 ? readItemLs['id'] : '';
let readIndex = (readMsgId === '') ? data.length :
data.findIndex(
elem =>
elem[key] === readMsgId);
readIndex === -1 ? readIndex = data.length : readIndex;
setReadIndex(readIndex);
(data.length && readIndex) > 0 ?
setShowCount(true) : setShowCount(false);
setMessageCount(readIndex);
}, [data]);
Při změně dat
- V případě potřeby zkontrolujte a seřaďte podle časového razítka.
- Poslední přečtenou zprávu sledujeme přidáním jejího časového razítka do místního úložiště. Zkontrolujeme, zda je nějaké ID poslední přečtené položky v místním úložišti.
- Nastavíme počet zpráv a podle toho index posledního přečtení.
Vykreslovací část
Poslední část renderu. Máme ikonu zvonku, která ukazuje počet nepřečtených zpráv a způsob zpracování události kliknutí.
<div className="notification-container">
<div className =
{
showCount ?
'notification notify show-count' :
'notification notify'
}
data-count={messageCount}
onClick={event => handleClick(event)}>
<Bell color={bellColor} size={bellSize} />
</div>
</div>
Zde je důležité poznamenat, že používáme data-* atribut pro vložení vlastních dat. V tomto případě se jedná o počet nepřečtených zpráv pomocí data-count atribut. Přečtěte si více o atributu HTML data-* zde.
Dále handleClick() úchyty metod pro zobrazení vyskakovacího okna s oznamovacími zprávami. Abychom to mohli udělat, stačí aktualizovat několik stavů,
// Handle the click on the notification bell
const handleClick = (event) => {
setShow(!show);
setTarget(event.target);
}
To je vše pro pokrytí všech důležitých částí zde. Použil jsem ikony prolnutí pro ikonu zvonku a zaváděcí systém reakce pro komponentu překryvné zprávy.
Uzavření s plánem
Chtěl bych vylepšit kód lépe jako v, mohu ho zpřesnit a zkrátit. Existuje mnoho možností, jak tuto komponentu vylepšit o další funkce, jako je
- Zobrazuje se celkový počet zpráv.
- Označit jako nepřečtené.
- Omezení celkového počtu oznámení a vyprázdnění.
- Přečíst/Nepřečíst vybrané zprávy s upozorněním.
- Smažte všechny zprávy s upozorněním.
- Lepší háček pro perzistenci, jiný než místní úložiště prohlížeče.
- Lepší vzhled a dojem.
To je prozatím vše. Jsem rád, že se s vámi mohu podělit o své učení a to mě motivuje k dalšímu učení.
Pokud vám to bylo užitečné, dejte like/sdílejte, aby se to dostalo i k ostatním. Chcete-li dostávat e-mailová upozornění na mé nejnovější příspěvky, přihlaste se k odběru mého blogu kliknutím na Přihlásit se k odběru tlačítko v horní části stránky. Můžete mě také sledovat na Twitteru @tapasadhikary.
Titulní fotka je improvizací na vrcholu úžasné práce od freepika.