Upgrading to Capacitor 3

components/AppShell.jsx

@@ -1,4 +1,5 @@
 import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
+import { StatusBar, Style } from '@capacitor/status-bar';
 
 import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route } from 'react-router-dom';
@@ -6,6 +7,14 @@ import Menu from './Menu';
 
 import Tabs from './pages/Tabs';
 
+window.matchMedia("(prefers-color-scheme: dark)").addListener(async (status) => {
+  try {
+    await StatusBar.setStyle({
+      style: status.matches ? Style.Dark : Style.Light,
+    });
+  } catch {}
+});
+
 const AppShell = () => {
   return (
     <IonApp>

components/Menu.jsx

@@ -1,4 +1,4 @@
-import { Plugins, StatusBarStyle } from '@capacitor/core';
+import { StatusBar, Style } from '@capacitor/status-bar';
 import {
   IonContent,
   IonHeader,
@@ -8,13 +8,11 @@ import {
   IonList,
   IonMenu,
   IonMenuToggle,
-  IonRouterContext,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { cog, flash, list } from 'ionicons/icons';
-import { useHistory, useLocation } from 'react-router-dom';
 
 const pages = [
   {
@@ -35,24 +33,19 @@ const pages = [
 ];
 
 const Menu = () => {
-  const { StatusBar } = Plugins;
-
-  const ionRouterContext = useContext(IonRouterContext);
-  const location = useLocation();
-
   const [isDark, setIsDark] = useState(false);
 
   const handleOpen = async () => {
     try {
       await StatusBar.setStyle({
-        style: isDark ? StatusBarStyle.Light : StatusBarStyle.Dark,
+        style: isDark ? Style.Dark : Style.Light,
       });
     } catch {}
   };
   const handleClose = async () => {
     try {
       await StatusBar.setStyle({
-        style: isDark ? StatusBarStyle.Dark : StatusBarStyle.Light,
+        style: isDark ? Style.Dark : Style.Light,
       });
     } catch {}
   };
@@ -70,7 +63,7 @@ const Menu = () => {
       </IonHeader>
       <IonContent>
         <IonList>
-          {pages.map(p => (
+          {pages.map((p, k) => (
             <IonMenuToggle autoHide={false}>
               <IonItem routerLink={p.url} routerDirection="none" detail={false} lines="none">
                 <IonIcon icon={p.icon} slot="start" />

components/pages/Feed.jsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Card from '../ui/Card';
 
 import {
@@ -19,15 +20,17 @@ import Store from '../../store';
 
 const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
   <Card className="my-4 mx-auto">
-    <div>
-      <img className="rounded-t-xl h-32 w-full object-cover" src={image} />
+    <div className="h-32 w-full relative">
+      <Image className="rounded-t-xl" objectFit="cover" src={image} alt="" layout='fill' />
     </div>
     <div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
       <h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">{type}</h4>
       <h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">{title}</h2>
       <p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">{text}</p>
       <div className="flex items-center space-x-4">
-        <img src={authorAvatar} className="rounded-full w-10 h-10" />
+        <div className="w-10 h-10 relative">
+          <Image layout='fill' src={authorAvatar} className="rounded-full" alt="" />
+        </div>
         <h3 className="text-gray-500 dark:text-gray-200 m-l-8 text-sm font-medium">{author}</h3>
       </div>
     </div>

components/pages/ListDetail.jsx

@@ -19,7 +19,7 @@ import * as selectors from '../../store/selectors';
 const ListItems = ({ list }) => {
   return (
     <IonList>
-      {(list?.items || []).map(item => (
+      {(list?.items || []).map((item, key) => (
         <ListItemEntry list={list} item={item} />
       ))}
     </IonList>