chore(deps): update react to 18 (#2943)

src/components/UserList/BulkEditModal.tsx

@@ -23,13 +23,13 @@ const messages = defineMessages({
   edituser: 'Edit User Permissions',
 });
 
-const BulkEditModal: React.FC<BulkEditProps> = ({
+const BulkEditModal = ({
   selectedUserIds,
   users,
   onCancel,
   onComplete,
   onSaving,
-}) => {
+}: BulkEditProps) => {
   const { user: currentUser } = useUser();
   const intl = useIntl();
   const { addToast } = useToasts();

src/components/UserList/PlexImportModal.tsx

@@ -25,10 +25,7 @@ const messages = defineMessages({
     'The <strong>Enable New Plex Sign-In</strong> setting is currently enabled. Plex users with library access do not need to be imported in order to sign in.',
 });
 
-const PlexImportModal: React.FC<PlexImportProps> = ({
-  onCancel,
-  onComplete,
-}) => {
+const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
   const intl = useIntl();
   const settings = useSettings();
   const { addToast } = useToasts();
@@ -62,9 +59,7 @@ const PlexImportModal: React.FC<PlexImportProps> = ({
       addToast(
         intl.formatMessage(messages.importedfromplex, {
           userCount: createdUsers.length,
-          strong: function strong(msg) {
-            return <strong>{msg}</strong>;
-          },
+          strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
         }),
         {
           autoDismiss: true,
@@ -125,11 +120,9 @@ const PlexImportModal: React.FC<PlexImportProps> = ({
           {settings.currentSettings.newPlexLogin && (
             <Alert
               title={intl.formatMessage(messages.newplexsigninenabled, {
-                strong: function strong(msg) {
-                  return (
-                    <strong className="font-semibold text-white">{msg}</strong>
-                  );
-                },
+                strong: (msg: React.ReactNode) => (
+                  <strong className="font-semibold text-white">{msg}</strong>
+                ),
               })}
               type="info"
             />

src/components/UserList/index.tsx

@@ -81,7 +81,7 @@ const messages = defineMessages({
 
 type Sort = 'created' | 'updated' | 'requests' | 'displayname';
 
-const UserList: React.FC = () => {
+const UserList = () => {
   const intl = useIntl();
   const router = useRouter();
   const settings = useSettings();
@@ -325,13 +325,11 @@ const UserList: React.FC = () => {
                 {!settings.currentSettings.localLogin && (
                   <Alert
                     title={intl.formatMessage(messages.localLoginDisabled, {
-                      strong: function strong(msg) {
-                        return (
-                          <strong className="font-semibold text-white">
-                            {msg}
-                          </strong>
-                        );
-                      },
+                      strong: (msg: React.ReactNode) => (
+                        <strong className="font-semibold text-white">
+                          {msg}
+                        </strong>
+                      ),
                     })}
                     type="warning"
                   />
@@ -374,9 +372,11 @@ const UserList: React.FC = () => {
                           inputMode="email"
                         />
                       </div>
-                      {errors.email && touched.email && (
-                        <div className="error">{errors.email}</div>
-                      )}
+                      {errors.email &&
+                        touched.email &&
+                        typeof errors.email === 'string' && (
+                          <div className="error">{errors.email}</div>
+                        )}
                     </div>
                   </div>
                   <div
@@ -422,9 +422,11 @@ const UserList: React.FC = () => {
                           disabled={values.genpassword}
                         />
                       </div>
-                      {errors.password && touched.password && (
-                        <div className="error">{errors.password}</div>
-                      )}
+                      {errors.password &&
+                        touched.password &&
+                        typeof errors.password === 'string' && (
+                          <div className="error">{errors.password}</div>
+                        )}
                     </div>
                   </div>
                 </Form>
@@ -680,9 +682,9 @@ const UserList: React.FC = () => {
                             ? pageIndex * currentPageSize + data.results.length
                             : (pageIndex + 1) * currentPageSize,
                         total: data.pageInfo.results,
-                        strong: function strong(msg) {
-                          return <span className="font-medium">{msg}</span>;
-                        },
+                        strong: (msg: React.ReactNode) => (
+                          <span className="font-medium">{msg}</span>
+                        ),
                       })}
                   </p>
                 </div>