convert class component to function component

Author: gcd

App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {ReactElement, useEffect, useRef, useState} from 'react';
 import {
   StyleSheet,
   View,
@@ -60,33 +60,25 @@ const styles = StyleSheet.create({
   },
 });
 
-interface State {
-  access_token?: string
-  expires_in?: number
-  refreshing: boolean
-  localizedFirstName?: string
-  message?: string
-}
-export default class AppContainer extends React.Component<{}, State> {
-  state = {
-    access_token: undefined,
-    expires_in: undefined,
-    refreshing: false,
-    localizedFirstName: undefined,
-    message: undefined,
-  }
+export default function AppContainer() : ReactElement {
+  const [accessToken, setAccessToken] = useState<string | undefined>();
+  const [expiresIn, setExpiresIn] = useState<any | undefined>();
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [localizedFirstName, setLocalizedFirstName] = useState<string>();
+  const [message, setMessage] = useState<string | undefined>();
+
 
-  modal = React.createRef<LinkedInModal>()
+  const modal = useRef<any>();
 
-  constructor(props: any) {
-    super(props)
+  useEffect(() => {
     StatusBar.setHidden(true)
-  }
+  }, []);
+
 
-  getUser = async (data: LinkedInToken) => {
+  const getUser = async (data: LinkedInToken) => {
     const {access_token, authentication_code} = data;
     if (!authentication_code) {
-      this.setState({refreshing: true});
+      setRefreshing(true);
 
       const response = await fetch('https://api.linkedin.com/v2/me', {
         method: 'GET',
@@ -95,13 +87,17 @@ export default class AppContainer extends React.Component<{}, State> {
         },
       });
       const payload = await response.json();
-      this.setState({...payload, refreshing: false});
+      setAccessToken(payload.access_token);
+      setExpiresIn(payload?.expires_in);
+      setLocalizedFirstName(payload?.localizedFirstName);
+      setMessage(payload?.message);
+      setRefreshing(false);
     } else {
       alert(`authentication_code = ${authentication_code}`);
     }
   }
 
-  renderItem(label: string, value: string) {
+  const renderItem = (label: string, value: string): ReactElement => {
     return value ? (
       <View style={styles.item}>
         <View style={styles.labelContainer}>
@@ -112,47 +108,44 @@ export default class AppContainer extends React.Component<{}, State> {
           <Text style={styles.value}>{value}</Text>
         </View>
       </View>
-    ) : null;
+    ) : <></>;
   }
 
-  signOut = () => {
-    this.setState({refreshing: true});
-    this.modal.current
-      ?.logoutAsync()
-      .then(() =>
-        this.setState({ localizedFirstName: undefined, refreshing: false }),
-      );
+  const signOut = () => {
+    setRefreshing(true);
+    modal.current?.logoutAsync()
+      .then(() => {
+        setLocalizedFirstName(undefined);
+        setRefreshing(false);
+      });
   }
 
-  render() {
-    const {refreshing, localizedFirstName} = this.state;
-    return (
-      <View style={styles.container}>
-        <View style={styles.linkedInContainer}>
-          <LinkedInModal
-            ref={this.modal}
-            clientID={CLIENT_ID}
-            clientSecret={CLIENT_SECRET}
-            redirectUri={REDIRECT_URL}
-            onSuccess={this.getUser}
-          />
-          <Button
-            title="Open from external"
-            onPress={() => this.modal.current?.open()}
-          />
-        </View>
+  return (
+    <View style={styles.container}>
+      <View style={styles.linkedInContainer}>
+        <LinkedInModal
+          ref={modal}
+          clientID={CLIENT_ID}
+          clientSecret={CLIENT_SECRET}
+          redirectUri={REDIRECT_URL}
+          onSuccess={getUser}
+        />
+        <Button
+          title="Open from external"
+          onPress={() => {modal.current?.open()}}
+        />
+      </View>
 
-        {refreshing && <ActivityIndicator size="large" />}
+      {refreshing && <ActivityIndicator size="large" />}
 
-        {localizedFirstName && (
-          <>
-            <View style={styles.userContainer}>
-              {this.renderItem('Last name', localizedFirstName)}
-            </View>
-            <Button title="Log Out" onPress={this.signOut} />
-          </>
-        )}
-      </View>
-    );
-  }
+      {localizedFirstName && (
+        <>
+          <View style={styles.userContainer}>
+            {renderItem('Last name', localizedFirstName)}
+          </View>
+          <Button title="Log Out" onPress={signOut} />
+        </>
+      )}
+    </View>
+  );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcou/react-native-linkedin",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "main": "lib/index.tsx",
   "description": "React-Native LinkedIn, a simple LinkedIn login library for React-Native with WebView and Modal - compatibility with RN 0.69",
   "repository": {
@@ -29,7 +29,6 @@
     "linkedin"
   ],
   "dependencies": {
-    "deprecated-react-native-prop-types": "^4.1.0",
     "expo-random": "^12.3.0",
     "query-string": "8.1.0",
     "ramda": "0.29.0",
@@ -39,11 +38,11 @@
   "devDependencies": {
     "@types/jest": "29.5.2",
     "@types/ramda": "^0.29.2",
-    "@types/react": "~18.0.38",
+    "@types/react": "~18.2.14",
     "@types/react-native": "~0.70.14",
     "@types/uuid": "^9.0.2",
     "babel-jest": "29.5.0",
-    "babel-preset-expo": "^9.5.0",
+    "babel-preset-expo": "^9.3.2",
     "babel-preset-react-native": "^4.0.1",
     "expo": "^46.0.21",
     "jest-expo": "^46.0.2",