Merge pull request #34 from EOS-uiux-Solutions/refactor-services

Refactor GraphQL queries and mutations for Home.js

Author: sharmaadityaHQ

.eslintrc.yml

@@ -15,5 +15,4 @@ rules:
   prefer-const: 'error'
   prefer-template: 'error'
   prefer-destructuring: ['error', { 'object': true, 'array': false }]
-  object-curly-spacing: [2, 'always']
-  no-console: 'error'
+  object-curly-spacing: [2, 'always']

.gitignore

@@ -30,7 +30,6 @@
 .env.development.local
 .env.test.local
 .env.production.local
-config.json
 .vscode/
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1,31 +1,34 @@
 [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
 [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](https://choosealicense.com/licenses/mit/)
-[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://suse-uiux.gitlab.io/eos-feature-request/)
+# User Story
 
-# EOS Feature Request
+![](./static/user_story.png)
+# Introduction
 
-# Guideline to develop this site
+The goal of **User Story** is to design and present a scalable backend infrastructure that delivers a web interface allowing users to request new features and give feedback in an easy and intuitive way. Users can attach files with their story to explain what they want. The admins can then resolve, close and update the status of these stories. Users can interact with other stories via comments and votes. This can also serve as an efficient feedback and response mechanism which is critical for any organization to improve and make progress. Simply, its a **product management tool**.
 
-In the project directory, you can run:
+# How it works
 
-### Starting up the project
+![](./static/user_story_workflow.png)
+
+# Guidelines for development
+### Setting up the project
 
 After cloning this repository you will need to install all the dependencies: `npm i`
 
-There are two options to set up the `backend` for this repository:
+User Story uses [this repository](https://github.com/EOS-uiux-Solutions/strapi) as its `backend`. There are two ways to set up the `backend`:
 
-1. If you are planning to work only on the UI/UX of `eos-user-story`, then follow along. Skip to point 2 if you need to setup backend as well. For setting up using `docker`, first make sure you have `docker` & `docker-compose` installed ([Install instructions](https://docs.docker.com/engine/install/)). Next, run `docker-compose up` and wait for the server to start on `http://localhost:1337`. Visit [http://localhost:1337/admin/auth/](http://localhost:1337/admin/auth/) and create the admin user for Strapi. Then set the roles and permissions for the api endpoints. That's it, the backend is up and running. Proceed to the next paragraph for further instructions.
+- You can use Docker to setup backend by following [these instructions](https://github.com/EOS-uiux-Solutions/strapi#using-docker) If you are planning to work only on the `frontend` of User Story, then follow along.
 
-2. This repository uses [EOS-uiux-Solutions/strapi](https://github.com/EOS-uiux-Solutions/strapi) as the backend Strapi server. Follow [these](https://github.com/EOS-uiux-Solutions/strapi#how-to-install-it) instructions to set it up.
+- You can setup `backend` locally by following [these instructions](https://github.com/EOS-uiux-Solutions/strapi#locally).
 
-After setting up the backend, you need to connect the frontend to the Strapi server. To do this, duplicate the file `src/config.json.template` into a new file called `src/config.json` and replace the content of the variable with your server URL.
+If you want to work only on the `frontend` then go to `src/config.json` and change the value of `apiURL` to `https://userstory-strapi.herokuapp.com`.
 
-Then run: `npm start` to run the app in the development mode.
+Then run: `npm start` to run the app in development mode.
 
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+The page will reload if you make edits. You will also see any lint errors in the console.
 
 ### JS and SCSS quality assurance
 
@@ -38,10 +41,10 @@ To make sure your SCSS is compliant run: `npm run test:scss`
 
 `npm run build`
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.<br />
+
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
@@ -50,7 +53,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 ### Code contributions
 
-1. Open a new or pick an open issue from the issue list and claim it in the comments. Make sure that the issue is confirmed so you don't work on something that will not be approved to be merged.
+1. Open a new issue or pick an open issue from the issue list and claim it in the comments. Make sure that the issue is confirmed so you don't work on something that will not be approved to be merged.
 2. Make sure you follow our best practices: [refer to our Wiki](https://gitlab.com/SUSE-UIUX/eos/-/wikis/home). You'll find information on writing code, how to name a branch, how we release, etc.
 3. Join Slack [optional] to get in touch with the maintainers if you have any doubt: [join slack](http://slack.eosdesignsystem.com/)
 4. Make sure you fork the project, cloning it will not give you the right access to open a PR/MR. [How to open a PR in open source](https://gitlab.com/SUSE-UIUX/eos/-/wikis/Basic-git-instructions-for-beginners)
@@ -59,7 +62,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 If you'd like to contribute with design changes, you'll have to do as follows:
 
-1. [Open an issue](https://gitlab.com/SUSE-UIUX/eos-feature-request/-/issues/new)
+1. [Open an issue](https://github.com/EOS-uiux-Solutions/user-story/issues/new)
 2. Add all relevant information to the issue. Please be as descriptive as possible. Add links to references, images, videos, etc.
 3. While working on your design, please make sure you follow our [design guidelines](https://gitlab.com/SUSE-UIUX/eos/wikis/Design-process-and-feedback-gathering).
 4. Once the issue is approved by us, it'll be ready to be implemented.

src/config.json

@@ -0,0 +1,4 @@
+{
+    "apiURL": "http://localhost:1337",
+    "APP_ENV": "dev"
+}

src/pages/Home.js

@@ -5,9 +5,7 @@ import React, {
   useCallback,
   useContext
 } from 'react'
-import axios from 'axios'
 import { Link } from '@reach/router'
-import { apiURL } from '../config.json'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
 import { Helmet } from 'react-helmet'
 
@@ -23,6 +21,7 @@ import UsersSuggestionDropdown from '../components/UsersSuggestionDropdown'
 import Lists from '../utils/Lists'
 import useAuth from '../hooks/useAuth'
 import Context from '../modules/Context'
+import userStory from '../services/user_story'
 
 const Home = () => {
   const { logout } = useAuth()
@@ -104,55 +103,13 @@ const Home = () => {
 
   useEffect(() => {
     const fetchStories = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-            userStories(sort: "createdAt:desc", limit: 5, start: ${
-              (page - 1) * 5
-            }, where: {
-                user_story_status : {
-                  Status: "${currentStateSelected}"
-                },
-                author: {
-                  username_contains: "${userQuery}"
-                }
-                ${categoryQuery}
-                ${productQuery}
-                ${searchQuery}
-            }) {
-              id
-              Title
-              Description
-              user_story_status {
-                Status
-              }
-              user_story_comments {
-                Comments
-              }
-              product {
-                Name
-              }
-              author {
-                id
-                username
-                profilePicture {
-                  id
-                  url
-                }
-              }
-              followers {
-                id
-                username
-              }
-              Category
-            }
-          }
-          `
-        },
-        {
-          withCredentials: true
-        }
+      const response = await userStory.getStories(
+        page,
+        currentStateSelected,
+        userQuery,
+        categoryQuery,
+        productQuery,
+        searchQuery
       )
       setStories(response.data.data.userStories)
     }
@@ -168,30 +125,11 @@ const Home = () => {
 
   useEffect(() => {
     const fetchStoryCount = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `
-          query {
-            userStoriesConnection(where: {
-              user_story_status: {
-                Status: "${currentStateSelected}"
-              },
-              author: {
-                username_contains: "${userQuery}"
-              }
-              ${productQuery},
-              ${searchQuery}
-            }) {
-              aggregate {
-                count
-              }
-            }
-          }`
-        },
-        {
-          withCredentials: true
-        }
+      const response = await userStory.getStoryCount(
+        currentStateSelected,
+        userQuery,
+        productQuery,
+        searchQuery
       )
       setStoryCount(response.data.data.userStoriesConnection.aggregate.count)
     }
@@ -200,20 +138,7 @@ const Home = () => {
 
   useEffect(() => {
     const fetchProducts = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-            products {
-              Name
-            }
-          }`
-        },
-        {
-          withCredentials: true
-        }
-      )
-
+      const response = await userStory.getProducts()
       return response.data.data.product !== null
         ? setProducts([
             'All',
@@ -228,9 +153,7 @@ const Home = () => {
 
   useEffect(() => {
     const fetchCategories = async () => {
-      const response = await axios.post(`${apiURL}/graphql`, {
-        query: '{ __type(name: "ENUM_USERSTORY_CATEGORY") {enumValues {name}}}'
-      })
+      const response = await userStory.getCategories()
       setCategories([
         'All',
         ...response.data.data.__type.enumValues.map((ele) => {
@@ -264,29 +187,7 @@ const Home = () => {
 
   useEffect(() => {
     const fetchPolicyNotifications = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `
-        query {
-          userStoryNotifications(where: {message: "User story privacy policy has been updated"}) {
-            message
-            id
-            users {
-              id
-            }
-            seenBy {
-              id
-            }
-            date
-            link
-          }
-        }`
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getPolicyNotifications()
       if (response.data.data.userStoryNotifications) {
         const seenBy = response.data.data.userStoryNotifications[0]?.seenBy.map(
           (seen) => seen.id
@@ -308,31 +209,7 @@ const Home = () => {
   const acceptUpdatedPolicy = async () => {
     const seenBy = policyUpdate.seenBy.map((seen) => seen.id)
     seenBy.push(userId)
-    await axios.post(
-      `${apiURL}/graphql`,
-      {
-        query: `mutation updateNotifications($seenBy: [ID]){
-          updateUserStoryNotification(input: {
-            where: {
-              id: "${policyUpdate.id}"
-            }
-            data: {
-              seenBy: $seenBy
-            }
-          }) {
-            userStoryNotification {
-              id
-            }
-          }
-        }`,
-        variables: {
-          seenBy: seenBy
-        }
-      },
-      {
-        withCredentials: true
-      }
-    )
+    await userStory.updateNotifications(policyUpdate.id, seenBy)
     setModal(false)
   }
 

src/services/api.js

@@ -0,0 +1,42 @@
+import axios from 'axios'
+import { apiURL, APP_ENV } from '../config.json'
+
+const config = {
+  baseURL: apiURL,
+  withCredentials: true
+}
+
+const apiClient = axios.create(config)
+
+apiClient.interceptors.response.use(
+  (response) => {
+    if (APP_ENV !== 'prod') {
+      console.log('RESPONSE: ', response)
+    }
+    return response
+  },
+  (error) => {
+    if (error.response) {
+      // The request was made and the server responded with a status code
+      console.log('RESPONSE_ERROR: ', error.response)
+      return Promise.reject(error.response)
+    } else if (error.request) {
+      // The request was made but no response was received
+      console.log('NO_RESPONSE: ', error.request)
+    } else {
+      // Something happened in setting up the request that triggered an error
+      console.log('REQUEST_ERROR: ', error.message)
+    }
+  }
+)
+
+function apiCall(url, data) {
+  return apiClient.request({
+    url,
+    method: 'post',
+    data,
+    ...config
+  })
+}
+
+export default apiCall