FAQ Screen

[civictechindex]

FAQ Screen

[ashleyerffmeyer]

Created FAQ card component that displays question and shows answer when clicked. Next steps include refining styling & dropdown animation on FAQ card component and adding content management system that updates from a Google sheets file/ displays content on necessary number of FAQ cards.

[ashleyerffmeyer]

Styled page to look and feel like Figma wireframe and completed initial set up of React, Node, and Google Sheets content management system (CMS). Next steps are to add icon to search bar and finish setting up CMS.

[cnk]

I think 5:30 tomorrow works.

…

On Mon, Sep 14, 2020 at 5:23 PM Ashley Erffmeyer ***@***.***> wrote: Thanks @cnk <https://github.com/cnk> almost back to 100%. The work you did looks great so far. Are you free tomorrow evening around 5:30 PT/ 7:30 CT to discuss what you've done and how to hook it up to the front end? Feel free to propose a more convenient time if needed. This is what I have so far: https://github.com/ashleyerffmeyer/CTI-website-frontend/tree/faq-page-issue-63 . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAABOQFAXIEYHHVFNGKG7C3SF2XWNANCNFSM4QGZCT2A> .

-- Cynthia Kiser [email protected]

[ashleyerffmeyer]

Looked into a couple of different content management system options. Believe some common technologies we can implement are Mongo, Postgres, and the Google Sheets option described in Tim's article included in "Resources/Instructions" above. I would be most interested in trying out the React/Google Sheets/Node option to try something new that also seems straight forward. Would be interested in discussing this path forward on Sunday!

[jsachsman]

@ashleyerffmeyer sounds like a great idea, I will probably have to skip the meeting Sunday but hoping @ExperimentsInHonesty will be able to review this path with you tomorrow.

[jsachsman]

@ashleyerffmeyer as per today's discussion, we would prefer the Google Sheets option, thanks!

[ashleyerffmeyer]

Next steps include create card component and wire up back end.

[ashleyerffmeyer]

No new screen shots this update. Working on step 3 of 7 to hook up content management system. Currently running into an issue ensuring the proper port is called for local host, but working through it.

[ExperimentsInHonesty]

@josh Bubar can you show @ashley Erffmeyer how you did the wiring up of the google sheet to the wins-page

[cnk]

Since the backend of CTI is Django, I would suggest you add a Django CMS to the app. Personally I would suggest Wagtail because that is what I use at work but if you think that is too much, there are other options. https://djangopackages.org/grids/g/cms/

[ashleyerffmeyer]

I'm unable to make tonight's meeting due to work. Here's my update: Talked with Josh regarding the use of Google's api key per Bonnie's suggestion last meeting to hook up React to Google Sheets. Will move forward with that approach. This week has been busier than anticipated but I will be able to pick this ticket up again this weekend. If there is discussion this evening about django/wagtail and the group decides to use django instead, please let me know. Thanks!

[cnk]

If the team is interested in exploring a Django based CMS, let me know. I can't make it to this evening's meeting but could come to the weekend meeting if the team wants more information about Django options.

[jsachsman]

@cnk I think that would be a great discussion to have, if you're available for the weekend meeting, @ashleyerffmeyer of course would love to have you as well.

[ashleyerffmeyer]

Thanks for the update! I've been working this weekend and am now under the weather and/or suffering from allergies. I won't be able to make the call today. However, feel free to let me know how the discussion goes regarding django/ wagtail. If it's something we want to definitely do, I can catch up with @cnk early this week to learn more as I am no longer on call after Monday morning. I don't have experience in django but am definitely willing to learn!

[cnk]

@ashleyerffmeyer Hope you are feeling better soon.

I have a rough draft of an FAQ management interface using django admin at https://github.com/cnk/CTI-website-backend/tree/FAQ. It currenly has one, read only API endpoint that lists all FAQs marked 'live'. Next step is to add an endpoint that will increment a counter - which can be used when people click to view the answer.

[ashleyerffmeyer]

Thanks @cnk almost back to 100%. The work you did looks great so far. Are you free tomorrow evening around 5:30 PT/ 7:30 CT to discuss what you've done and how to hook it up to the front end? Feel free to propose a more convenient time if needed. This is what I have so far: https://github.com/ashleyerffmeyer/CTI-website-frontend/tree/faq-page-issue-63.

[cnk]

@ashleyerffmeyer This is the structure of the JSON I am currently producing. If that is not what you want to consume, please let me know and I will change it.

[
    {
        "id": 1,
        "question": "What should I ask?",
        "answer": "Anything you like",
        "view_count": 7
    },
    {
        "id": 3,
        "question": "How now brown cow?",
        "answer": "See you later alligator!",
        "view_count": 0
    },
    {
        "id": 2,
        "question": "Why is this site so gray?",
        "answer": "Because we like gray.",
        "view_count": 0
    }
]

Next step: get this deployed to heroku

[Abhishek-AC]

@cnk PR merged. Kudos 👏
I have applied migrations to include the FAQs model. Also, I have added the above dummy data.

@ashleyerffmeyer You can view the endpoint here.
Executing the GET /api/faqs/ you should be able to see the exact same response as Cynthia shared in the above comment

[ashleyerffmeyer]

No new image to show quite yet. Working on hooking up backend data to front end; I'm about half way done with this. ETA is Thursday, 9/24.

[jsachsman]

Note @ashleyerffmeyer let me know today she will be out for three weeks or so due to a family emergency.
Her code is hosted here: https://github.com/ashleyerffmeyer/CTI-website-frontend/tree/faq-page-issue-63

[jsachsman]

Note Contributors screen is using a component that would be useful here (opening and closing expanding panels)

[ExperimentsInHonesty]

@cnk I was reading back on this issue and it looks like there is a django cms #63 (comment). Before I ask design to come up with a screen design, can you show us what is possible? I see that we have the following apis

What do we need to be able to have screens / forms for people to submit questions and for us to either use them or rewrite them and pair them with answers so that they appear in the faq on the site.

[ExperimentsInHonesty]

@chalimar please add screen shots that Cnk showed us, to this issue.

[chalimar]

[ExperimentsInHonesty]

@nrrao - Progress update is that api is working and styling needs to be incorporated.

[nrrao]

Progress
Working on styling

Blockers
none

Availability
Medium

Working on Next
Should be able to finish by Thursday

[ExperimentsInHonesty]

@cnk @shinjonathan We need to decide if

1. the data for the FAQs is going to get pulled all at once (would need a new api to pull them all) after the api call for the most frequently is pulled. then when search happens is happening locally
   or
2. We get an api that instead takes in search and processes it in the back end and delivers results based on search.

Which is preferable and why?

Bonnie

[shinjonathan]

1. At first pass through (since I wouldn't imagine there to be too many questions) we can just have the api return all of the results.

2.) The API can expose a query parameter for the search string and spit back a more specific result.
/faq?q=Search => [searchResult, searchResult]

[chalimar]

FAQ Design for mobile now in Figma file.

[cnk]

@cnk @shinjonathan We need to decide if

1. the data for the FAQs is going to get pulled all at once (would need a new api to pull them all) after the api call for the most frequently is pulled. then when search happens is happening locally
   or
2. We get an api that instead takes in search and processes it in the back end and delivers results based on search.

We have an API endpoint that pulls all FAQs. This PR adds a search endpoint that uses Postgres's full text search capability via a feature built into Django Rest Framework

[ExperimentsInHonesty]

@shinjonathan added you onto the Added full text search to FAQ api civictechindex/CTI-website-backend#27 PR

[nrrao]

progress: I finished refactoring. Will start working on the search component once API faq PR is approved.
blocks: none
Availability: Medium
ETA: next weeks meeting

[nrrao]

Need to work on implementing the counter for faq.
Will display 5 questions of faq
Also, implement pagination for search.

[nrrao]

PR is approved for full-text search.
progress: Need to implement counter for faq
blocks: none
Availability: Medium
ETA: one week

[nrrao]

progress: started working on Counter for FAQ
blocks: none
Availability: Medium
ETA: one week

[Olivia-Chiong]

@nrrao Can you please share the URL for the faq page?

[Olivia-Chiong]

@cnk will provide a search endpoint for @nrrao

[cnk]

@nrrao searching FAQs now works: https://test-civictechindexadmin.herokuapp.com/api/faqs/?search=brown

[nrrao]

Thanks @cnk
I was able to implement the search endpoint.
Need clarification regarding displaying search results.

[Olivia-Chiong]

Product will talk to UI to mock up returned search results screen, #213

[mariastudnicka]

Pls do a competitive analysis for UX recommendations on returned results and make wire frame.