Persist data with Realm

ios/Podfile.lock

@@ -66,6 +66,9 @@ PODS:
     - boost-for-react-native
     - DoubleConversion
     - glog
+  - GCDWebServer (3.5.4):
+    - GCDWebServer/Core (= 3.5.4)
+  - GCDWebServer/Core (3.5.4)
   - glog (0.3.5)
   - OpenSSL-Universal (1.0.2.19):
     - OpenSSL-Universal/Static (= 1.0.2.19)
@@ -296,6 +299,9 @@ PODS:
     - React-cxxreact (= 0.62.1)
     - React-jsi (= 0.62.1)
     - ReactCommon/callinvoker (= 0.62.1)
+  - RealmJS (5.0.3):
+    - GCDWebServer
+    - React
   - RNCMaskedView (0.1.7):
     - React
   - RNGestureHandler (1.6.1):
@@ -343,6 +349,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RealmJS (from `../node_modules/realm`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -361,6 +368,7 @@ SPEC REPOS:
     - Flipper-PeerTalk
     - Flipper-RSocket
     - FlipperKit
+    - GCDWebServer
     - OpenSSL-Universal
     - YogaKit
 
@@ -417,6 +425,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RealmJS:
+    :path: "../node_modules/realm"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
@@ -443,6 +453,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: 1260a31c05c238eabfa9bb8a64e3983049048371
   FlipperKit: 6dc9b8f4ef60d9e5ded7f0264db299c91f18832e
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
+  GCDWebServer: 2c156a56c8226e2d5c0c3f208a3621ccffbe3ce4
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
   RCTRequired: e291538a455f5ad1afc2139a4288990be0cadd46
@@ -466,6 +477,7 @@ SPEC CHECKSUMS:
   React-RCTText: 239e040f401505001327a109f9188a4e6dad1bd2
   React-RCTVibration: 072c3b427dd29e730c2ee5bfc509cf5054741a50
   ReactCommon: 3585806280c51d5c2c0d3aa5a99014c3badb629d
+  RealmJS: 85d246ec57ac1420faf933c282c0b379e61f38a0
   RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48

package.json

@@ -22,7 +22,8 @@
     "react-native-screens": "^2.4.0",
     "react-navigation": "^4.3.7",
     "react-navigation-stack": "^2.3.11",
-    "react-navigation-tabs": "^2.7.0"
+    "react-navigation-tabs": "^2.7.0",
+    "realm": "^5.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

src/api/AlbumProvider.tsx

@@ -1,30 +1,61 @@
 import React from 'react';
+import Realm from 'realm';
 import AlbumContext from 'src/store/AlbumContext';
 import data from 'src/api/data/data';
 import API from 'src/api/API';
+import {
+  photoDetailOptions,
+  PHOTO_DETAIL_SCHEMA,
+} from 'src/database/photoDetailRealm/schema';
+import {realmObjectsToJson} from 'src/utils/utils';
 
 type Props = {
-  children: any;
+  children: JSX.Element;
 };
 
 type State = {
+  realm: Realm;
   photos: CardItem[];
 };
 
 const BASE_API = 'https://jsonplaceholder.typicode.com/';
+const PHOTOS_URL = 'albums/1/photos';
 
 class AlbumProvider extends React.Component<Props> {
-  state = {
-    photos: [],
-  } as State;
+  state = {photos: [], realm: null} as State;
 
   componentDidMount() {
-    this.getData();
+    this.syncPhotosData();
   }
 
-  getData = async () => {
-    const photos = await API.get({url: `${BASE_API}albums/1/photos`});
-    this.setState({photos});
+  componentWillUnmount() {
+    const {realm} = this.state;
+    if (realm !== null && !realm.isClosed) {
+      realm.close();
+    }
+  }
+
+  syncPhotosData = async () => {
+    try {
+      const realm = await Realm.open(photoDetailOptions);
+      let photos: CardItem[] = [];
+
+      photos = realmObjectsToJson(realm.objects(PHOTO_DETAIL_SCHEMA));
+      if (photos?.length > 0) {
+        this.setState({photos, realm});
+        return;
+      }
+
+      photos = await API.get({url: `${BASE_API}${PHOTOS_URL}`});
+      realm.write(() => {
+        photos?.map((item: CardItem) => {
+          realm.create(PHOTO_DETAIL_SCHEMA, item);
+        });
+      });
+      this.setState({photos, realm});
+    } catch (error) {
+      throw new Error(`Error syncing photos data: ${error}`);
+    }
   };
 
   render() {

src/database/photoDetailRealm/schema.ts

@@ -0,0 +1,34 @@
+export const PHOTO_DETAIL_SCHEMA = 'PhotoDetail';
+const PHOTO_DETAIL_DB_NAME = 'PhotoDetailRealm.realm';
+
+const DATA_BASE_VERSION = 0;
+
+type PhotoDetailSchema = {
+  name: string;
+  primaryKey: string;
+  properties: {
+    title: string;
+    thumbnailUrl: string;
+  };
+};
+
+const PhotoDetailSchema: PhotoDetailSchema = {
+  name: PHOTO_DETAIL_SCHEMA,
+  primaryKey: 'title',
+  properties: {
+    title: 'string',
+    thumbnailUrl: 'string',
+  },
+};
+
+type PhotoDetailOptions = {
+  path: string;
+  schema: PhotoDetailSchema[];
+  schemaVersion: number;
+};
+
+export const photoDetailOptions: PhotoDetailOptions = {
+  path: PHOTO_DETAIL_DB_NAME,
+  schema: [PhotoDetailSchema],
+  schemaVersion: DATA_BASE_VERSION,
+};

src/utils/utils.ts

@@ -0,0 +1,4 @@
+export const realmObjectsToJson = (objects: any) => {
+  const data = JSON.stringify(Array.from(objects));
+  return JSON.parse(data);
+};