swsnu / swpp2020-team13

Goaling Ball: Your goal management service.

Goaling Ball: Your goal management service.

🚨 Travis CI not recognizing postgreSQL properly, resulting in build failure

Deployment

Deployed on: https://www.goalingball.com/

How to start

Frontend

cd frontend
yarn install // to install packages
yarn start // start frontend

Backend

1. Add .env file to /backend/config

2. Start virtual environment

   virtualenv --python=python3.7 venv
   source venv/bin/activate
   

3. Install requirements

   pip install -r requirements.txt
   

4. Start server

   python manage.py runserver
   

swpp2020-team13's Issues

Task title checkmark issues

The checkmark doesn't show when first displaying the goal detail page, so it is difficult to find where to click to see the task details. Then after clicking, the checkmark doesn't disappear when another task is selected.

Suggested improvements:

1. show all checkmarks anytime (+ optional: display red checkmark for the selected task)
2. show the task details when the task title is clicked, and display checkmark only for the selected task

All tasks are displayed, regardless of the day of the week settings

How to generate the bug:
Create any goal, then create any task that is repetitive with the days of the week setting.

What was expected:
The tasks for today should be displayed for default, then when the "Show all tasks" button is toggled on, other tasks should be shown as well

What happened:
No tasks are displayed for default (including the tasks for today), then when the "Show all tasks" button is toggled on, all tasks are displayed, including the tasks not for today.

There was a mistake with the task deadlines! Sorry!

New task can be created with no input data

How to generate: in add task modal, click submit button without any input data.
What was expected: an alert message asking user to submit task data
What happened: an empty task created

Handling DataTime (from backend to frontend)

1. Backend
   Import python datetime library.
   datetime.timestamp() will convert datetime into seconds from epoch(Jan 1st, 1970)
   Send it.

2. Frontend
   Import moment library.
   You can format a given seconds as you want.

Cannot delete tasks

Clicking on the delete button doesn't trigger anything, except for the error message on the console.

In mock data testing

test goal같은 정보값이 없는 goal들보다 저한테 저번주에 보내주셨던 data같은 일관된 user / goal / task-achievement 세트들을 추가해 주시면 감사하겠습니다.

Access sagemaker endpoint via URL (with Lambda & API Gateway console)

Sagemaker endpoint of blazingtext model can be accessed via sending POST request to a URL.
The method is done by AWS lambda and API Gateway console in AWS.
For the implementation method in detail, refer to the following link:

https://aws.amazon.com/blogs/machine-learning/call-an-amazon-sagemaker-model-endpoint-using-amazon-api-gateway-and-aws-lambda/

How to use

URL: https://tsiik55j32.execute-api.us-east-1.amazonaws.com/test/blazingtext
Note: currently the endpoint is closed due to charging issues

Send a POST request, with JSON body with the following format:

{"data":["word1", "word2", "word3"]}

If the process is done without errors, the response would be:

{
statusCode: 200,
body: [ { vector: [], word: "word1" },  { vector: [], word: "word2" },  { vector: [], word: "word3" } ]
}

Refinements for the project!

main & create & edit & dashboard 그리고 explore까지 핵심 기능의 구현이 끝났습니다! 🎉🎉🎉
기능 구현이 끝났음을 기념하여 세부적으로 보완할 부분(cornercase 핸들링)과 optional feature들을 정리해 보았습니다.

• 유저가 create goal / edit goal에서 사진을 추가하지 않은 경우
  1. 유저가 create goal에서 사진을 추가하지 않으면 우리가 설정한 default URL로 설정
  2. 유저가 edit goal에서 사진을 추가하지 않으면 기존 사진 유지
• Add achievement axios
  1. create goal과 마찬가지로 유저가 사진을 추가하지 않으면 우리가 설정한 default URL로 설정
• Edit achievement axios
  1. edit goal과 마찬가지로 유저가 사진을 추가하지 않으면 우리가 설정한 default URL로 설정
  2. Edit 버튼을 누르면 achievement form이 뜨는데 여기에 기존 achievement 정보가 담겨 있어야 함
• Plugging in edit task axios to taskbody components
• Frontend Testing
• Backend Testing
• Search 기능: explore page에서 키워드 입력하면 키워드에 해당하는 goal 띄워줌
• Deployment
  1. 실습수업 전에 deploy 끝내기
  2. 시간 여유가 되면, 유저가 새로 가입했을 때 아무것도 없는 상태에서 시작하는 게 아니라 튜토리얼 goal 같은 걸 하나 default로 뜨게 해서 사용자가 어플리케이션에 친숙해지도록 하기
• Optimization
  1. S3 bucket caching
  2. ML API gateway caching
• UX
  1. 로그인 실패하면 메시지나 alert

The achievement is displayed in the order it is added, not in chronological order

In the ACHIEVEMENT JOURNAL, the achievement is displayed in the order it is added, not in chronological order. This may not be a problem when the user adds the achievement for that day only, but since it is allowed to add past achievements...

The next page button doesn't work in goal card display

On the dashboard page, if the user has more than 6 goals the next page button should display the next 6 goals. This doesn't work with the error message on console (on screenshot)

API for adding and deleting tags

We might create a separate model for tags.
Either way, we will need to determine API scheme (url patterns) for adding and deleting tags.

Solution 1
(POST) "api/v1/goals/<goal_id>/tag : create a new tag (presumably one by one)
(PUT) "api/v1/goals/<goal_id>/tag/<tag_id> : update a specific tag
(DELETE) "api/v1/goals/<goal_id>/tag/<tag_id> : delete a specific tag

Solution 2
(POST) "api/v1/tags : create a new tag (a goal id is included in the request body)
(PUT) "api/v1/tags/<tag_id> : update a specific tag (a goal id is stored in a tag instance)
(DELETE) "api/v1/tags/<tag_id> : delete a specific tag (a goal id is stored in a tag instance)

Which one looks better?

테스팅 관련 피드백

이곳에 자유롭게 코멘트 달아주시면 정말 감사하겠습니다!

Goal & Task에서 time duration feature update

현재는 goal이나 task를 만든 날짜가 자동으로 goal / task의 시작 날짜로 설정이 되었지만,
사용자가 미래의 goal이나 task를 미리 만들고 싶을 수 있는 등 시간 설정에서 사용자에게 좀더 유동성을 주기 위해 backend goal/task에 'start_at' feature를 추가했고 아래와 같은 feature update를 진행했습니다.

1. Goal feature update
   즉 현재 날짜가 11/29일이어도, 12/21-2/20 (겨울방학 때 할일 goal을 미리 만든다던지) duration을 가진 goal을 만들 수 있습니다.
   이때 달력에서 11/29일을 선택하면 해당 goal이 시작 전이므로 안 뜨지만 12/22를 선택하면 해당 goal이 뜹니다.
   start_at는 유저가 아무 설정도 안할 경우 default로 오늘 날짜 00:00:00 값으로 timestamp 형태로 백엔드에 보내집니다. 즉 start_at가 none이 될 일은 없습니다.

2. Task feature update - date
   예를 들어 12/21-2/20 goal 내에서 12/21-30에만 해당하는 task를 만들고 싶다고 할 때, add task form에서 start date 12/21을 고르고 deadline에서 12/30을 고르면 됩니다. 이때 달력에서 12/31을 선택하면 해당 task는 뜨지 않습니다.
   Recurrent한 경우 (매주 월요일에만 한다던지) 에만 deadline이 있고 일시적인 task는 deadline이 없는 걸로 처음에 스프린트 때 합의가 되었었는데 이 합의를 반영해서 day_of_week가 비어 있으면 start date가 '일시적인 날' 이 되고 deadline은 자동으로 start date와 같아집니다. 이때 day_of_week가 비어 있으면 자동으로 설정된 deadline은 readOnly가 되어 유저가 프론트에서 임의로 바꿀 수 없습니다. day of week를 추가하면 readonly가 해제되어 유저가 데드라인을 설정할 수 있고요.
   그리고 task start date가 goal start date보다 앞지른다거나 (12/21에 시작된 goal이면 그 goal의 task는 12/21부터 가능) task deadline을 goal deadline보다 늦게 유저가 고를 경우 alert 창이 뜨고 자동으로 goal deadline으로 설정되도록 해 놓았습니다.

3. Task feature update - weekday
   Task가 12/21-30, 매주 토요일과 일요일로 설정되어 있다면 해당 기간이어도 요일이 다르면 task가 메인 페이지에서 보여지지 않습니다. 예를 들어 오늘 날짜가 12/21-30 사이에 있지만 금요일이면 토, 일 설정된 task는 안 보이게 해 놓았습니다.
   -> 이 부분은 요일이 다르면 안보이게 할지 아니면 색을 연한 회색 등으로 다르게 할지 좀더 고민해볼게요.
   -> taskbar에 해당 task가 언제 시작해서 언제 끝나는지, 그리고 무슨무슨 요일에 반복되는지 뜨게 할 예정입니다. 이건 아마 오늘 할 거 같네요.

프론트와 백엔드 모두 이 feature를 반영해서 수정하였으며 프론트 상에서 잘 작동하는지 확인하였습니다.
다만 기존의 goal들을 get할때 start_at이 없으므로 에러가 날 수 있으니 먼저 django admin으로 예전에 추가한 goal들을 삭제한 후 테스트 해보시길 바랍니다.
테스팅이 꼬일 것 같아 일단 develop에는 푸시하지 않고 jiye-frontend-dateChanges 브랜치에 푸시해 두었습니다.

Please update development status in README

Everyone, please update branch development status in github-master branch-README.

You can also use Notion for markdown syntax, put don't forget to paste it to README after updating it into Notion.
This is for preventing any confusion, overlapping, or conflicts in development.

I have updated development status for branch 'jiye-backend-goalcrud' as an example.
Thank you!

Postman Request example

JSON format for Goal CRUD

What would be JSON response format for GET/POST/PUT in Goal CRUD?
While implementation, I have arbitarily set the JSON format as:

1. For goalList(/goals/) : GET : list of {'title': goal.title, 'photo': goal.photo, 'user': goal.user.id}
2. For goalList(/goals/) : POST : {'title': new_goal.title, 'photo': new_goal.photo, 'user': new_goal.user.id}
3. For goalDetail(/goals/:id) : GET : {'title': goal.title, 'photo': goal.photo, 'user': goal.user.id, 'created_at': str(goal.created_at) }
4. For goalDetail(/goals/:id) : PUT: {'title': goal.title, 'photo': goal.photo, 'user': goal.user.id, 'created_at': str(goal.created_at), 'updated_at': str(goal.updated_at)}
   Is there ideas or suggestions regarding JSON response format?
   Thanks!

URL formatting

As far as I remember, the URL formatting of our pages was not decided. It should have been discussed before sprint 2, but I guess our minds were too busy at that time. When I tried to find our previous decisions, I discovered some inconsistencies in our documents.

Below is what our first few sections say:

• Intro page (/)
• Main board (goals) page (/main)
• Dashboard page (/dashboard)
  • Goal-detail-page (/dashboard/{:goal_id})
• Explore page (/explore)
• Profile page (/profile)
  • Edit-profile-page (/profile/edit)

and following is what our Frontend Component per page section says:

• Intro page (/)
• Main board (goals) page (/<:username>/main)
• Dashboard page (/<:username>/dashboard)
  • Goal-detail-page (/<:username>/dashboard/{:goal_id})
• Explore page (/explore)
• Profile page (/<:username>/profile)

It seems that we haven't done any proper discussion after TA feedback, and didn't arrive at any agreement regarding this issue. This may be a long talk to have here so I will bring this up at our meeting tonight. (This issue is for the record.)

There will be no extra API for adding and deleting Tags

This is a follow up for issue#4 (API for adding and deleting tags)

Tags will be a field in Goal and you will be able to fetch them by simply goal.tags (goal is an instance that is fetched from backend by /api/goals/<goal_id/ )

There will be no partial update for tags.
You should send a full list of tags if you want to update them.
ex) If your current tags are:
["apple", "banana"]
and you want to add "orange" and remove "banana", then you should send like below:
tags: ["apple", "orange"]

The logic to handle it will be implemented in frontend.

For your information, that is exactly how you update day_of_week field in Task.

Tasks starting after the goal deadlines are accepted without any alert

The tasks starting before the goal start / ending after the goal end are all rejected by the service, but if the starting date is set after the deadline it is accepted and saved. Although it is not displayed on the main screen, it is still visible on the task list. (look at the Purchase a guidebook with designs task in the screenshot)

Tips for React Hooks declaration orders

Inside Auth.jsx in frontend, we are navigating between CreateSignupForm() and CreateLoginForm().

The thing is, both CreateSignupForm and CreateLoginForm are using React Hooks.
If the order of hooks declarations in CreateSignupForm and CreateLoginForm are not consistent,
it will result in mixed order of hook declarations in Auth.jsx, which invokes CreateSignupForm and CreateLoginForm.

So please be careful when you declare a hook or change the order of hooks in CreateSignupForm and CreateLoginForm.

Deadline with Unix Timestamp

We are using a unix timestamp format both in backend and frontend.
Deadline, which is a DateTime field, is converted to a unix timestamp when a json response is constructed.

When adding a new goal on the frontend side, deadline is modified to 23:59:00 of the original day.
For example, if a deadline is Nov 17, 2020 then frontend will change it to 23:59:00 Nov 17, 2020.
The updated deadline will be converted to a unix timestamp and then sent to the backend.

The motivation of forcing 23:59:00 suffix to deadline is to fix a bug that a new goal is not showing up when the deadline of the goal is the same as today.

I've decided to handle the 23:59:00 suffix on the frontend side in order to keep backend views.py clean.

The default value of "recurrent" field in Task model

What is the default value of "recurrent" field in Task model supposed to be? True or False?
What would be a more common case?

In fact, we can indicate that some task is not recurrent by setting day_of_week field as "NONE."
Do we still need this field? Would it be better to leave it or not?

Order of goals are getting messed up after adding task

How to generate bug:

1. Add goal 1, 2, 3 in order => goal 1, 2, 3 shows up in order
2. Add task in goal 2 => order of goal list changes: 1, 3, 2
3. Add taskA in goal 2 => taskA is added in goal3, not 2

What happened:
I guess the actual order of goal(created order) hasn't changed, but the order shown in the list is changing..?
So the actual order of goals is : 1, 2, 3 / but it is listed in : 1, 3, 2
So when we add a task to goal 2(actually goal 3) it is added to goal3 (actually goal 2)

+no error message on console

When reporting bugs

에러가 났을 경우 F12를 누르면 console.log에 어떤 에러가 떴는지 나타날 것입니다
버그 리포팅 할때 어떻게 generate bug / expected behavior 랑 같이 console.log에 어떤 에러가 떴는지 (에러가 있는 버그라면) 사진 첨부해 주세요

Allow Partial Update or Not

We are allowing only PUT but not PATCH.
Are we going to allow partial updates with PUT method, which is not the default behavior?

Calendar panel now contains the example goal text by default

Right after creating the account & being redirected to the main page, the calendar panel contains the "Example goal 1" and "Example goal 2" text by default.

If the feature is undecided, maybe it would be better to keep it empty?

The List of Frontend tests that have problems

Below are frontend test modules with problems.
I just commented out to increase coverage but those modules should be handled correctly in the future.

• CreateGoalComponent.test.js
• TaskBody.test.js
• EditGoalComponent.test.js

The upload button for photo doesn't do anything?

Although there is an upload button under the photo attaching, clicking the button doesn't produce any effect. Submitting the form without clicking upload seems to work without any problems, so I was just wondering what this button was supposed to do?

The range of importance field

The importance field in Task model is defined as FloatField.
Thus, the value of importance can be literally any number, which does not seem logical.

What would be a good range of numbers for importance?
ex) 110, 05, 0~100 ...

Would it be better to make it discrete or continuous?
ex) [0, 5] vs {0, 1, 2, 3, 4, 5}

How to test backend

As mentioned in "Design and Planning", we have decided to choose pytest over unittest.

Prerequisites:
(venv) pip install -r requirements.txt (pip install django-pytest pytest-cov)

Commands:
(venv) pytest (without a coverage report)
(venv) pytest --cov (with a coverage report)
(venv) pytest --cov --cov-report term-missing (with a coverage report and missing statements)

API for day_of_week (Task) and deadline (Goal and Task) have changed

There is no more "NONE" choice for day_of_week in Task model.
A blank list ([]) indicates that a task is not recurrent.
If you still feel that "NONE" choice is required, please let me know.

Also, deadline field has become optional and is not required in a request form.
However, it is at a model level and you might add validation login in views.py if you want.

Resolving 404 issue in reload

https://medium.com/@besoftyoon/spa-새로고침-시-404-에러-3b59db7e9b4a

도움될 것 같아 링크 올려봅니다

위 방법 말고도 index.html fetch를 위해서 nginx에 try_files에 추가하는 방법도 있다고 합니다. 이부분은 구글링 좀더 해서 링크 달겠습니다.

In dashboard-goal detail page, the task importance is not displayed properly

This is a relatively minor bug:
On the dashboard-goal detail page, the task importance reacts when the mouse is over the importance stars, as if it can be edited. However, clicking on it doesn't trigger anything, and the task importance remains the same.

(edit) the console doesn't have any output for this error.

Frontend Redux Store and Reducers Design

We need to design how redux store and reducers should look like.

Are we going to make a reducer per model in the backend?
ex) goalReducer, taskReducer, achievementReducer

Also, how are we going to keep user's session information in the frontend? Some reducer should be responsible for it and we will need to design how it looks like.

Minor rendering error with achievement photos

The photo sticks out of the box, due to the text "See Photo Preview".

Cannot add more achievements after editing an achievement

How to produce the bug: After editing any achievement on date A, click another date B and click the add achievement button for the same goal.

What is expected: The empty create achievement form appears.

What happens: The edit achievement form appears, with the input from the past edit already there. When submit is clicked, date B still contains no achievement. Instead, the achievement of date A is edited with the input. This repeats when you attempt to add achievement again, for any date. This persists until you try adding achievement to another task, and after that the add achievement acts properly for the task that had the problem.

The goal images are not updated after clicking the next page button

Clicking the next page button updates the goal names, but not the goal images. This is not the problem of the data itself, since the images are rendered correctly when on the edit goal page, and when the goal order changes due to edit/add. (Before editing the oil painting goal, the pottery goal was there and had the knitting image. But after the order is changed the pottery goal has its own proper image now.)

Deadline field for Goal or Task

Goal model has deadline field but Task model does not.
What makes more sense between a goal or tasks having a deadline?

The refresh button doesn't work?

When the refresh button is hit on the browser, any page runs into a 404 Not Found error. According to @ ChanwooLucioLee this is (unfortunately) the problem with React and needs to be handled by developers.

CI 연동 완료

CI와 SonarCloud 연동 완료했습니다. 세부 설정은 팀 레포에 맞게 수정바랍니다. 수업 레포의 공지사항 참고하여 뱃지도 추가해 주시면 됩니다.

https://travis-ci.org/github/swsnu/swpp2020-team13/jobs/741809332

Change in a way to store objects in reducers in frontend

We have stored objects in an array in reducers in frontend.
For example, the initial state of "goals" in goalReducer is [], which is an array.

However, we will start to store objects in an object with its id as a key.
For example, goals = [{'id': 1, 'title': 'TITLE1'}, {'id': 2, 'title': 'TITLE2'}] will be stored as
goals = {1: {'id': 1, 'title': 'TITLE1'}, {'id': 2, 'title': 'TITLE2'}}

Why is it better?

• You don't need to use filter() to find an object when you edit or delete. goals[] is all you need to do.

How to migrate?

• Backend will still send objects as before. So the response.data (action.payload) will look the same as before.
• We will use lodash library's "mapKeys" function to convert an array to an object with a key as id.
  _.mapKeys(action.payload, 'id'} will do the job. The second argument 'id' indicates that the 'id' value of each item will be the key for the item.
• When you want to convert the object to an array as before, use Object.values(). That will convert
  {1: {'id': 1, 'title': 'TITLE1'}, {'id': 2, 'title': 'TITLE2'}} to [{'id': 1, 'title': 'TITLE1'}, {'id': 2, 'title': 'TITLE2'}].

  I cannot terminate the list.

  Precaution: there might be issues during migration. Please check the format of the data you are using is what you expected.

Hitting the explore button redirects to a blank page

How to produce the bug: When the account is first created & redirected to the main page, click the explore button.

The explore page is displayed for a short moment, but then becomes a blank page.

Daily Goal View: UI/UX topics

By "Daily Goal View" I mean the former "Today's Goals" section, where we decided to change the title text to today's date, since a new date may be selected from the calendar. It is just a name I made up just now.
I am weighing with some design choices related to UI/UX here, and would like to address some of them.

1. What goals should we display?
   Some goals would have no tasks to address now. Should we display them as well? (My opinion now is yes, since we can add tasks in this daily goal page, it should be here ready to be added any task)

2. In what order?
   For the tasks, it would be logical to sort them by importance, but how about the goals? These are my ideas now:

   1. Sort by pending: the end date of the goal is nearest
   2. Sort alphabetically
   3. Sort by goal creation date: newest first / oldest first
   4. Sort by most important task: this might be confusing when the order changes every day
   5. Let the user set the importance of the goal as well
   6. Let users drag & drop the goals to reorder them, and save it for the next session & days: This is what I prefer for now, but the implementation may be overly difficult for a class project?