replace sharing from clipboard to share API

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

README.md

@@ -1,8 +1,7 @@
 # <img src="resources/play_store_512.png" width="45" align="left"> SociQuote
 
-A open source quotes app made possible by [Airtable](https://airtable.com/) and [React Native](https://reactnative.dev/).
+A open source quotes app made possible by [React Native](https://reactnative.dev/).
 
-![Airtable](https://img.shields.io/badge/Airtable-18BFFF?style=for-the-badge&logo=Airtable&logoColor=white)
 ![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
 
 ## Status
@@ -14,7 +13,12 @@ A open source quotes app made possible by [Airtable](https://airtable.com/) and
 
 Head over to [releases](https://github.com/siddsarkar/SociQuote/releases) to grab the latest apk from assets.
 
-## Design 
+## Features
+
+- [x] Pull to refresh
+- [x] Longpress for sharing
+
+## Design
 
 ![cover image](resources/cover.jpeg)
 

package.json

@@ -12,7 +12,6 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@react-native-clipboard/clipboard": "^1.8.4",
     "appcenter": "^4.3.0",
     "appcenter-analytics": "^4.3.0",
     "appcenter-crashes": "^4.3.0",

src/api/index.js

@@ -1,3 +1,3 @@
-import airtable from './providers/airtable.js';
+import quotable from './providers/quotable';
 
-export default {airtable};
+export default {quotable};

src/api/providers/quotable.js

@@ -0,0 +1,22 @@
+import {generateQueryStrFromObject, processFetchRequest} from '../../utils';
+
+const QUOTABLE_BASE_URL = 'https://quotable.io';
+
+/**
+ * Get list of quotes
+ * @param {object=} params query params as object
+ * @returns json response
+ */
+const getQuotes = async function (params) {
+  let url = `${QUOTABLE_BASE_URL}/quotes`;
+  if (params) {
+    url += generateQueryStrFromObject(params);
+  }
+
+  return processFetchRequest(url);
+};
+
+export default {
+  getQuotes,
+  // other methods here
+};

src/libs/Caraousel.js → src/components/common/Caraousel/Caraousel.js

@@ -1,13 +1,14 @@
 /**
- * @source https://lloyds-digital.com/blog/lets-create-a-carousel-in-react-native
- * @modified
+ * This caraousel was made by following the below article link
+ * https://lloyds-digital.com/blog/lets-create-a-carousel-in-react-native
  */
 
+import Analytics from 'appcenter-analytics';
 import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
 import {
-  Clipboard,
   Dimensions,
   FlatList,
+  Share,
   StyleSheet,
   Text,
   ToastAndroid,
@@ -17,19 +18,35 @@ import {
 const {width: windowWidth, height: windowHeight} = Dimensions.get('window');
 
 const Slide = memo(function Slide({data}) {
-  const copyToClipboard = () => {
-    Clipboard.setString(data.fields.content + '  — ' + data.fields.author);
-    ToastAndroid.show('Copied', ToastAndroid.SHORT);
+  const onShare = async () => {
+    try {
+      const result = await Share.share({
+        message: data.content + '\n  — ' + data.author,
+      });
+      if (result.action === Share.sharedAction) {
+        if (result.activityType) {
+          // shared with activity type of result.activityType
+        } else {
+          // shared
+          Analytics.trackEvent('Quote Shared', {id: data._id});
+        }
+      } else if (result.action === Share.dismissedAction) {
+        // dismissed
+      }
+    } catch (error) {
+      ToastAndroid.show(error.message, ToastAndroid.SHORT);
+    }
   };
 
   return (
     <View style={s.slide}>
       <Text style={s.quoteSymbol}>〃</Text>
-      <Text onLongPress={copyToClipboard} style={s.slideText}>
-        {data.fields.content}
+
+      <Text onLongPress={onShare} style={s.slideText}>
+        {data.content}
       </Text>
-      <Text onLongPress={copyToClipboard} style={s.slideTextAuthor}>
-        — {data.fields.author}
+      <Text onLongPress={onShare} style={s.slideTextAuthor}>
+        — {data.author}
       </Text>
     </View>
   );
@@ -69,7 +86,7 @@ const Caraousel = ({slideList = []}) => {
     removeClippedSubviews: true,
     scrollEventThrottle: 16,
     windowSize: 2,
-    keyExtractor: useCallback(s => String(s.id), []),
+    keyExtractor: useCallback(s => s._id, []),
     getItemLayout: useCallback(
       (_, idx) => ({
         index: idx,

src/components/common/index.js

@@ -0,0 +1,5 @@
+/**
+ * Components that can be used anywhere in the project
+ */
+
+export {default as Caraousel} from './Caraousel/Caraousel';

src/components/ui/index.js

@@ -0,0 +1,3 @@
+/**
+ * UI Elements goes here
+ */

src/utils/generateQueryStrFromObject.js

@@ -0,0 +1,16 @@
+/**
+ * Returns query string from object
+ * @param {{ [param: string]: string|number|boolean }} obj query params as object
+ * @example generateQueryStrFromObject({"q":"any","page":1}) returns "?q=any&page=1"
+ */
+const generateQueryStrFromObject = obj =>
+  Object.keys(obj)
+    .map((key, idx) => {
+      if (idx === 0) {
+        return `?${key}=${obj[key]}`;
+      }
+      return `&${key}=${obj[key]}`;
+    })
+    .join('');
+
+export default generateQueryStrFromObject;

src/utils/index.js

@@ -0,0 +1,6 @@
+/**
+ * Utlities to be used anywhere in the project
+ */
+
+export {default as generateQueryStrFromObject} from './generateQueryStrFromObject';
+export {default as processFetchRequest} from './processFetchRequest';

src/api/requestHandler.js → src/utils/processFetchRequest.js

@@ -1,10 +1,10 @@
 /**
  * Global network request handler
- * @param {string} url url to fetch
- * @param {Request} options fetch options
+ * @param {RequestInfo} url url to fetch
+ * @param {RequestInit=} options fetch options
  * @returns json response
  */
-async function requestHandler(url, options) {
+const processFetchRequest = async (url, options) => {
   const ts = Date.now();
   const method = options?.method || 'GET';
   const endpoint = url.match(
@@ -18,6 +18,6 @@ async function requestHandler(url, options) {
     return response.json();
   }
   throw response.json();
-}
+};
 
-export default requestHandler;
+export default processFetchRequest;

src/views/Home/HomeScreen.js

@@ -7,24 +7,24 @@ import {
   View,
 } from 'react-native';
 import api from '../../api';
-import Caraousel from '../../libs/Caraousel';
+import {Caraousel} from '../../components/common';
 
 const HomeScreen = () => {
   const [data, setData] = useState([]);
-  const [pageOffset, setPageOffset] = useState('');
+  const [page, setPage] = useState(1);
   const [isLoading, setIsLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
 
   const onRefresh = () => {
     setRefreshing(true);
     async function fetchData() {
-      const response = await api.airtable.getTable({
-        table: 'quotes',
-        params: {limit: 10, offset: pageOffset},
+      const response = await api.quotable.getQuotes({
+        limit: 10,
+        page,
       });
 
-      setPageOffset(response.offset);
-      setData(response.records);
+      setPage(response.page + 1);
+      setData(response.results);
       setRefreshing(false);
     }
 
@@ -33,12 +33,10 @@ const HomeScreen = () => {
 
   useEffect(() => {
     async function fetchData() {
-      const response = await api.airtable.getTable({
-        table: 'quotes',
-        params: {limit: 10},
-      });
-      setPageOffset(response.offset);
-      setData(response.records);
+      const response = await api.quotable.getQuotes({limit: 10});
+      setPage(response.page + 1);
+      setData(response.results);
+
       setIsLoading(false);
     }
 

src/views/index.js

@@ -1 +1,5 @@
+/**
+ * All App Screens are Exported here
+ */
+
 export {default as HomeScreen} from './Home/HomeScreen';

yarn.lock

@@ -979,11 +979,6 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@react-native-clipboard/clipboard@^1.8.4":
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.8.4.tgz#4bc1fb00643688e489d8220cd635844ab5c066f9"
-  integrity sha512-poFq3RvXzkbXcqoQNssbZ+aNbCRzBFAWkR9QL7u9xNMgsyWZtk7d16JQoaBo8D2E+kKi+/9JOiVQzA5w+9N67w==
-
 "@react-native-community/cli-debugger-ui@^6.0.0-rc.0":
   version "6.0.0-rc.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-6.0.0-rc.0.tgz#774378626e4b70f5e1e2e54910472dcbaffa1536"