From ab68a9f756700779f27f54e2066972f4facba3a8 Mon Sep 17 00:00:00 2001
From: arthurfiorette <arthur.fiorette@gmail.com>
Date: Tue, 1 Feb 2022 14:01:20 -0300
Subject: [PATCH] docs: more examples

---
 docs/pages/usage-examples.md    |  4 ++-
 examples/node/index.js          | 49 +++++++++++++++++++++++++++++++++
 examples/react/app.js           | 36 ++++++++++++++++++++++++
 examples/react/axios-context.js | 29 +++++++++++++++++++
 examples/react/index.js         | 13 +++++++++
 examples/runkit.js              |  4 +--
 6 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 examples/node/index.js
 create mode 100644 examples/react/app.js
 create mode 100644 examples/react/axios-context.js
 create mode 100644 examples/react/index.js

diff --git a/docs/pages/usage-examples.md b/docs/pages/usage-examples.md
index ce0339d1..74642aac 100644
--- a/docs/pages/usage-examples.md
+++ b/docs/pages/usage-examples.md
@@ -1,4 +1,6 @@
-# Interceptor
+# Usage and Examples
+
+There are some other examples in the [examples]([https://](https://github.com/arthurfiorette/axios-cache-interceptor/tree/main/examples), check them out! You can also make a PR to add some more.
 
 ## Applying
 
diff --git a/examples/node/index.js b/examples/node/index.js
new file mode 100644
index 00000000..0ee25c30
--- /dev/null
+++ b/examples/node/index.js
@@ -0,0 +1,49 @@
+/* eslint-disable */
+
+const express = require('express');
+const app = express();
+
+const Axios = require('axios');
+const { setupCache } = require('axios-cache-interceptor');
+
+const api = setupCache(
+  Axios.create({ baseURL: 'https://jsonplaceholder.typicode.com/' }),
+  // 5 seconds
+  { ttl: 5 * 1000 }
+);
+
+// Every time an api call reaches here, it will
+// make another internal request and forward the response.
+app.get('/', (req, res) => {
+  api.get('/users').then(
+    ({ data, cached, id }) => {
+      res.json({
+        cached,
+        id: {
+          value: id,
+          deleteUrl: `/cache/${id}/delete`,
+          getUrl: `/cache/${id}/get`
+        },
+        data
+      });
+    },
+    (error) => {
+      res.json({ error });
+    }
+  );
+});
+
+app.get('/cache/:id/delete', async (req, res) => {
+  await api.storage.remove(req.params.id);
+  res.send({
+    status: 'Deleted!',
+    current: await api.storage.get(req.params.id)
+  });
+});
+
+app.get('/cache/:id/get', async (req, res) => {
+  const cache = await api.storage.get(req.params.id);
+  res.json(cache);
+});
+
+app.listen(3000);
\ No newline at end of file
diff --git a/examples/react/app.js b/examples/react/app.js
new file mode 100644
index 00000000..249e5d18
--- /dev/null
+++ b/examples/react/app.js
@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+import React, { useState } from 'react';
+import { useAxios } from './axios-context';
+
+export const App = () => {
+  // You can use react context, as exemplified here
+  // but you can also just export the AxiosCacheInstance
+  // from a file and use it directly. Happy coding :)
+  const axios = useAxios();
+
+  const [{ data, error, loading }, setResponse] = useState({
+    data: [],
+    loading: true,
+    error: null
+  });
+
+  axios.get('https://jsonplaceholder.typicode.com/users').then(
+    ({ data }) => setResponse({ data, loading: false, error: null }),
+    (error) => setResponse({ data: [], loading: false, error })
+  );
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  return (
+    <div>
+      <div>{data}</div>
+    </div>
+  );
+};
diff --git a/examples/react/axios-context.js b/examples/react/axios-context.js
new file mode 100644
index 00000000..886b2cfb
--- /dev/null
+++ b/examples/react/axios-context.js
@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+/*
+ * Replace ../../src with axios-cache-interceptor
+ */
+
+import Axios from 'axios';
+import { createContext, useContext, useState } from 'react';
+import { setupCache } from '../../src'; // axios-cache-interceptor
+
+/**
+ * @type {import('react').Context<import('../../src').AxiosCacheInstance>}
+ */
+const AxiosContext = createContext(null);
+
+export const useAxios = () => useContext(AxiosContext);
+
+export const AxiosProvider = ({ children }) => {
+  const [axios] = useState(
+    setupCache(
+      // Custom instance to prevent conflict with other pieces of code
+      Axios.create(),
+      // cache config
+      {}
+    )
+  );
+
+  return <AxiosContext.Provider value={axios}>{children}</AxiosContext.Provider>;
+};
diff --git a/examples/react/index.js b/examples/react/index.js
new file mode 100644
index 00000000..5e7e1cc5
--- /dev/null
+++ b/examples/react/index.js
@@ -0,0 +1,13 @@
+/* eslint-disable */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './app';
+import { AxiosProvider } from './axios-context';
+
+ReactDOM.render(
+  <AxiosProvider>
+    <App />
+  </AxiosProvider>,
+  document.getElementById('root')
+);
diff --git a/examples/runkit.js b/examples/runkit.js
index 9dbea689..26bbd1fb 100644
--- a/examples/runkit.js
+++ b/examples/runkit.js
@@ -1,6 +1,4 @@
-//@ts-check
-
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable */
 
 const { create: createAxios } = require('axios').default;
 const { setupCache } = require('axios-cache-interceptor');