fix(react): remove console errors (#385)

https://coveord.atlassian.net/browse/CDX-513
coveo · Jul 28, 2021 · ed4069f · ed4069f
1 parent ce25520
commit ed4069f
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 10 deletions.
diff --git a/packages/cra-template/template/public/favicon.ico b/packages/cra-template/template/public/favicon.ico
diff --git a/packages/cra-template/template/public/manifest.json b/packages/cra-template/template/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Coveo Search Page Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/packages/cra-template/template/src/App.tsx b/packages/cra-template/template/src/App.tsx
@@ -62,7 +62,12 @@ const Home = () => {
 const Error = () => {
   return (
     <Box height="100vh" display="flex" align-items="center">
-      <Grid container direction="row" justify="center" alignItems="center">
+      <Grid
+        container
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+      >
         <Grid item md={9} sm={11}>
           <div className="container">
             <Typography variant="h4" color="error">

diff --git a/packages/cra-template/template/src/Components/Hero.tsx b/packages/cra-template/template/src/Components/Hero.tsx
@@ -15,8 +15,13 @@ const Hero: React.FunctionComponent<IHeroProps> = (props) => {
   return (
     <header className="App-header">
       <Grid className="logo-container">
-        {props.logos.map((logo) => (
-          <img src={logo} className="App-logo" alt="logo" />
+        {props.logos.map((logo, idx) => (
+          <img
+            src={logo}
+            key={'image-' + idx}
+            className="App-logo"
+            alt="logo"
+          />
         ))}
       </Grid>
 
@@ -62,16 +67,16 @@ const Hero: React.FunctionComponent<IHeroProps> = (props) => {
         Essential Links
       </Typography>
       <ul>
-        <li>
+        <li key="item-link-headless">
           <Anchor
             href="https://docs.coveo.com/en/headless"
             value="Coveo Headless documentation"
           />
         </li>
-        <li>
+        <li key="item-link-react">
           <Anchor href="https://reactjs.org" value="React documentation" />
         </li>
-        <li>
+        <li key="item-link-material">
           <Anchor
             href="https://material-ui.com/"
             value="Material-ui Documentation"

diff --git a/packages/cra-template/template/src/Components/Pager.tsx b/packages/cra-template/template/src/Components/Pager.tsx
@@ -14,7 +14,10 @@ const PagerRenderer: FunctionComponent<PagerProps> = (props) => {
   const [state, setState] = useState(controller.state);
 
   useEffect(
-    () => controller.subscribe(() => setState(controller.state)),
+    () =>
+      controller.subscribe(() =>
+        setTimeout(() => setState(controller.state), 0)
+      ),
     [controller]
   );
 

diff --git a/packages/cra-template/template/src/Components/SearchPage.tsx b/packages/cra-template/template/src/Components/SearchPage.tsx
@@ -25,7 +25,7 @@ const SearchPage: React.FunctionComponent<ISearchPageProps> = (props) => {
   return (
     <EngineProvider value={engine}>
       <Container maxWidth="lg">
-        <Grid container justify="center">
+        <Grid container justifyContent="center">
           <Grid item md={8}>
             <SearchBox />
           </Grid>

diff --git a/packages/cra-template/template/src/theme.tsx b/packages/cra-template/template/src/theme.tsx
@@ -1,8 +1,8 @@
 import red from '@material-ui/core/colors/red';
-import {createMuiTheme} from '@material-ui/core/styles';
+import {createTheme} from '@material-ui/core/styles';
 
 // A custom theme for this app
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     type: 'light',
     text: {