Merge branch 'main' of https://github.com/EOS-uiux-Solutions/user-story into tests/setup

Author: SundeepChand

.eslintrc.yml

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

.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,37 @@
 [![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/)
 
-# EOS Feature Request
+# User Story
 
-# Guideline to develop this site
+![](./static/user_story.png)
 
-In the project directory, you can run:
+# Introduction
 
-### Starting up the project
+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**.
+
+# How it works
+
+![](./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 +44,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 +56,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 +65,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/assets/scss/components/storiesList.scss

@@ -47,7 +47,7 @@
   cursor: pointer;
   flex-grow: 2;
   margin: 0px 16px;
-  width: 50%;
+  width: 40%;
 }
 
 @media only screen and (max-width: 768px) {

src/components/Comments.js

@@ -1,12 +1,11 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { Link } from '@reach/router'
 import Button from './Button'
-import axios from 'axios'
-import { apiURL } from '../config.json'
 import { useForm } from 'react-hook-form'
 
 import Context from '../modules/Context'
 import FormError from '../components/FormError'
+import userStory from '../services/user_story'
 
 const Comments = (props) => {
   const { storyId } = props
@@ -43,80 +42,14 @@ const Comments = (props) => {
 
   useEffect(() => {
     const fetchComments = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `
-        query {
-          userStory(id: "${storyId}") {
-            user_story_comments {
-              id
-              Comments
-              user {
-                id
-                username
-              }
-              createdAt
-              user_story_comment_replies {
-                createdAt
-                Comments
-                user {
-                  id
-                  username
-                }
-              }
-            }
-          }
-        }
-        `
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getComments(storyId)
       setComments(response.data.data.userStory.user_story_comments)
     }
     fetchComments()
   }, [storyId, fetchComments])
 
   const addComment = async (data) => {
-    const response = await axios.post(
-      `${apiURL}/graphql`,
-      {
-        query: `
-      mutation {
-        createUserStoryComment(input: {
-          data: {
-            Comments: "${data.addComment}"
-            user_story: "${storyId}"
-            user: "${id}"
-          }
-        }) {
-          userStoryComment {
-            id
-            user {
-              id
-              username
-            }
-            Comments
-            createdAt
-            user_story_comment_replies {
-              createdAt
-              Comments
-              user {
-                id
-                username
-              }
-            }
-          }
-        }
-      }
-      `
-      },
-      {
-        withCredentials: true
-      }
-    )
+    const response = await userStory.postComment(data.addComment, storyId, id)
     setComments([
       ...comments,
       response.data.data.createUserStoryComment.userStoryComment
@@ -125,27 +58,7 @@ const Comments = (props) => {
   }
 
   const addCommentReply = async (data) => {
-    await axios.post(
-      `${apiURL}/graphql`,
-      {
-        query: `
-      mutation {
-        createUserStoryCommentThread (input: {
-          data: {
-            Comments: "${data.addReply}"
-            user_story_comment: "${commentId}"
-            user: "${id}"
-          }
-        }){
-          userStoryCommentThread {
-            createdAt
-          }
-        }
-      }
-      `
-      },
-      { withCredentials: true }
-    )
+    await userStory.postCommentReply(data.addReply, commentId, id)
     setCommentReply('')
     setFetchComments((fetchComments) => !fetchComments)
     setRepliesToggled(null)

src/components/Notifications.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useContext, useRef } from 'react'
-import axios from 'axios'
 import { Link, navigate } from '@reach/router'
-import { apiURL } from '../config.json'
 import Context from '../modules/Context'
+import userStory from '../services/user_story'
 
 const Notifications = () => {
   const userId = localStorage.getItem('id')
@@ -39,32 +38,7 @@ const Notifications = () => {
 
   useEffect(() => {
     const fetchNotifications = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-              userStoryNotifications (where: {
-                users: {
-                  id: "${userId}"
-                }
-              }){
-                message
-                id
-                users {
-                  id
-                }
-                seenBy {
-                  id
-                }
-                date
-                link
-              }
-            }`
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getNotificationsByUserId(userId)
       let unseenNotifications = []
       if (response.data.data.userStoryNotifications) {
         unseenNotifications = response.data.data.userStoryNotifications
@@ -87,31 +61,7 @@ const Notifications = () => {
         const seenBy = notification.seenBy.map((seen) => seen.id)
         if (!seenBy.includes(userId)) {
           seenBy.push(userId)
-          await axios.post(
-            `${apiURL}/graphql`,
-            {
-              query: `mutation updateNotifications($seenBy: [ID]){
-                updateUserStoryNotification(input: {
-                  where: {
-                    id: "${notification.id}"
-                  }
-                  data: {
-                    seenBy: $seenBy
-                  }
-                }) {
-                  userStoryNotification {
-                    id
-                  }
-                }
-              }`,
-              variables: {
-                seenBy: seenBy
-              }
-            },
-            {
-              withCredentials: true
-            }
-          )
+          await userStory.markNotificationAsRead(notification.id, seenBy)
           setNotifications([])
           setNotificationCount(0)
           setNotificationsSeen(false)

src/components/UsersSuggestionDropdown.js

@@ -8,7 +8,7 @@ const UsersSuggestionDropdown = ({
   isOpen,
   userTerm,
   setUserTerm,
-  setUserQuery,
+  setAuthorQuery,
   setUsersSuggestionOpen
 }) => {
   const [usersToSuggest, setUsersToSuggest] = useState([])
@@ -90,7 +90,7 @@ const UsersSuggestionDropdown = ({
               key={user.id}
               onClick={() => {
                 setUserTerm(user.username)
-                setUserQuery(user.username)
+                setAuthorQuery(user.username)
                 setUsersSuggestionOpen(false)
               }}
               className='user-data'

src/config.json

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