You can use a provider and context to display a notification component at the root of your application when a fetch fails in a functional React component. Here's an example of how you can do this:
Create a context for the notification:
import { createContext } from 'react';
const NotificationContext = createContext();
Create a provider component that wraps the root of your application and manages the state of the notification:
Copy code
import { useState } from 'react';
| // Global 'window' loader for locale.js module | |
| // This removes the need to pull in a standard i18next JS file - it's all built using the same | |
| // code as on the React app (so should be better for consistency) | |
| // Use with Browserify in 'standalone' mode | |
| module.exports = function() { | |
| var locale = require('./locale.js'), | |
| i18nextJquery = require('jquery-i18next'); // Extra support for translation via jQuery | |
| window.i18ninit = locale; |
| import initLocale from '../../utils/locale'; | |
| initLocale(utils.getCurrentLocale(),function() { | |
| ReactDom.render( | |
| <Page />, | |
| document.getElementById('container') | |
| ); | |
| }); |
| #Sync Content from both Repos (Flybe-app and flybe-static and push to phecd) | |
| date | |
| #Sync the content folder | |
| #cd /var/content/flybe-static/content/content | |
| #git reset --hard | |
| #git pull origin master | |
| #cd /var/content/flybe-static/content && git pull | |
| #rsync -rav /var/content/flybe-static/content/content/ deployer@10.202.2.77:/var/www/html/flybe |
| <!--[if lte IE 9]> | |
| <script src="/web-app/lib/jqueryext/jquery.xdomainrequest.min.js"></script> | |
| <script src="/web-app/common/js/ieFixes/IEConsoleFix.js"></script> | |
| <![endif]--> | |
| <!--[if lt IE 8]> | |
| <script src="/web-app/common/js/ieFixes/json2.js"></script> | |
| <link rel="stylesheet" href="/web-app/common/css/ie7.css"> | |
| <![endif]--> | |
| <link rel="stylesheet" href="/web-app/lib/chosen/chosen.min.css"> | |
| <link rel="stylesheet" href="/web-app/search-widget/css/search-widget.css" /> |
| //this is needed to find out which seats can be picked and the layoit of the aircaft. | |
| var params = { | |
| dep : "AMS", | |
| dest : "BHX", | |
| flightNumber : "108", //flight number witout the letters in front. // might need to remove them | |
| depDate : "2015-02-10", | |
| } | |
| //this is all the passenger data I have used. | |
| var passengers = |
| //get the rules | |
| var promise = $.ajax({ url: ruleURL }) | |
| promiseArray.push(promise); | |
| $.when.apply($, promiseArray).then(function(schemas) { | |
| console.log(schemas); | |
| }, function(e) { | |
| console.log("promise ajax failed"); | |
| }); |
| var sessionData = Flybe.utils.getDataFromSessionStore('baggageRules'); | |
| var url = "http://testwww.flybe.com/ancillaries/ancillaries/all?channel=cam&context=new-booking&tx-amount="+sessionData.data.total_price+"&indexed=true" | |
| console.log(url); | |
| console.log("sessionData.data.baggageRules ",JSON.stringify(sessionData.data.baggageRules)); | |
| $.ajax({ | |
| url: url, | |
| //url: "app/basket/js/thing.json", | |
| type: 'POST', |
| {"outbound":{"totalAdultTaxes":39.43,"totalChildNetFare":26.9,"totalAdultGrossFare":66.33,"totalInfantNetFare":3.23,"totalInfantGrossFare":17.23,"flights":[{"isAlwaysDisplay":"Y","aircraftType":"DH4","airline":"BE","maxSeats":8,"ruleCode":"5166","seatsAvailable":1,"dep":"BHD","departureTime":"06:50","fare":{"infantNetFare":1.69,"taxes":[{"infant":0,"child":13,"adult":13,"departureArrival":"D","taxCode":"GB","fareId":19825},{"infant":7,"child":7,"adult":7,"departureArrival":"D","taxCode":"YR","fareId":19825}],"ruleCode":"5166","fareClass":"P","currency":"GBP","fareBasis":"PWWWSS","childNetFare":14.1,"travelCategory":1,"adultNetFare":14.1},"destinationTime":"08:00","flightNumber":"BE401","departDate":"2014-11-11T00:00:00.000+0000","sectorSequence":1,"tripId":"11112014469138090","arriveDate":"2014-11-11T00:00:00.000+0000","dest":"BHX"},{"isAlwaysDisplay":"Y","aircraftType":"E75","airline":"BE","maxSeats":8,"ruleCode":"5166","seatsAvailable":6,"dep":"BHX","departureTime":"11:25","fare":{"infantNetFare":1.54,"taxe |
| # custom environment variables | |
| JkEnvVar REDIRECT_URL | |
| JkEnvVar REDIRECT_REMOTE_HOST | |
| JkEnvVar REDIRECT_PATH | |
| JkEnvVar REDIRECT_QUERY_STRING | |
| JkEnvVar REDIRECT_HTTP_ACCEPT | |
| JkEnvVar REDIRECT_HTTP_USER_AGENT | |
| JkEnvVar REDIRECT_REMOTE_ADDR | |
| JkEnvVar REDIRECT_SERVER_NAME | |
| JkEnvVar REDIRECT_SERVER_PORT |