feat(#775): now we see one a question at a time #785

alisamadiii · 2023-10-16T09:05:57Z

Closes #775

Summary by CodeRabbit

New Feature: Enhanced the FAQ section with an interactive accordion feature. Users can now click on a question to view the answer, providing a more streamlined and intuitive experience.
Refactor: Updated the data source for FAQs, improving the ease of updating and managing FAQ content.
Chore: Improved code quality and maintainability by enforcing commit message standards using a commit linter. This ensures more readable and consistent commit messages, aiding team collaboration.

vercel · 2023-10-16T09:06:01Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
4c-site	❌ Failed (Inspect)			Oct 24, 2023 9:51am

coderabbitai · 2023-10-16T09:06:01Z

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

If you reply to a review comment from CodeRabbit, the bot will automatically respond.
To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
Note: Review comments are made on code diffs or files, not on the PR overview.
Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai help to get help.

Note: For conversation with the bot, please use the review comments on code diffs or files.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.json

coderabbitai

Review Status

Actionable comments generated: 1

Commits

Files that changed from the base of the PR and between 77ee9ab and 6ad983e.

Files ignored due to filter (1)

src/data/faq.json

Files selected for processing (4)

.husky/commit-msg (1 hunks)
src/components/FaqAccordian.js (2 hunks)
src/components/faq.js (1 hunks)
src/data/faq.js (1 hunks)

Files skipped from review due to trivial changes (1)

.husky/commit-msg

Additional comments (Suppressed): 9

src/data/faq.js (1)

1-36: The data structure and content of the FAQs look good. The id field is unique for each FAQ, which is important for identifying each FAQ uniquely in the UI. The questions and answers fields are self-explanatory and contain the necessary information.

src/components/faq.js (4)

1-4: The import statements have been updated to import faqData from "data/faq" instead of Faqs from "data/faq.json". This change implies that the data source for FAQs has been updated. Please ensure that the new data source is correctly set up and contains the expected data structure.

8-8: The useState hook is used to manage the currentQuestion state. This is a new addition to the component and it's used to track the currently selected FAQ question.

16-18: The FaqAccordian component now receives two additional props: currentQuestion and setCurrentQuestion. Ensure that the FaqAccordian component has been updated to handle these new props correctly.

16-18: The key prop for the FaqAccordian component has been changed from idx to faq.id. This change assumes that each FAQ object has a unique id property. Please verify that this is the case to avoid potential issues with React's reconciliation process.

src/components/FaqAccordian.js (4)

6-13: The onClickHandler function has been modified to set the currentQuestion to the faq.id of the clicked FAQ item. If the clicked FAQ item is already the currentQuestion, it resets the currentQuestion to 0. This change allows only one FAQ item to be open at a time. Ensure that this behavior is intended and that the currentQuestion state is properly managed in the parent component.

22-24: The conditional class assignment based on whether currentQuestion equals faq.id has been correctly updated from the previous isOpen state. This change is consistent with the new behavior of allowing only one FAQ item to be open at a time.

29-31: The rotation of the arrow icon is now based on whether currentQuestion equals faq.id, which is consistent with the new behavior of allowing only one FAQ item to be open at a time.

36-39: The conditional rendering of the answer paragraph is now based on whether currentQuestion equals faq.id, which is consistent with the new behavior of allowing only one FAQ item to be open at a time.

coderabbitai · 2023-10-16T09:07:33Z

src/components/FaqAccordian.js

+        onClick={onClickHandler}
+        onKeyDown={onClickHandler}


The onClickHandler function is used for both onClick and onKeyDown events. This means that any key press will trigger the function, which may not be the desired behavior. Consider checking the key code in the onKeyDown event to ensure that the function is only triggered by specific keys (e.g., Enter or Space).

- onKeyDown={onClickHandler} + onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClickHandler() }}

tobySolutions · 2023-10-24T08:39:14Z

Hey there @AliReza1083, can you check your Linting issues here? There seems to be an error.

kkrishguptaa

Please run eslint once and check out the comment by @coderabbitai

alisamadiii · 2023-10-24T10:32:24Z

I am doing it but I keep getting the same issues.

kkrishguptaa · 2023-10-31T16:11:40Z

src/components/FaqAccordian.js

-        onClick={() => setIsOpen(!isOpen)}
-        onKeyDown={() => setIsOpen(!isOpen)}
+        onClick={onClickHandler}
+        onKeyDown={onClickHandler}


Suggested change

onKeyDown={onClickHandler}

onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClickHandler() }}

kkrishguptaa · 2023-10-31T16:11:47Z

src/components/FaqAccordian.js

@@ -40,7 +46,7 @@ const FaqAccordian = ({ faq }) => {
        </AnimatePresence>
      </div>
    </li>
-  )
+  );


Suggested change

);

)

kkrishguptaa · 2023-10-31T16:11:53Z

src/components/faq.js

 const Faq = () => {
+  const [currentQuestion, setCurrentQuestion] = useState(1);


Suggested change

const [currentQuestion, setCurrentQuestion] = useState(1);

const [currentQuestion, setCurrentQuestion] = useState(1)

kkrishguptaa · 2023-10-31T16:12:04Z

src/data/faq.js

+export const faqData = [
+  {
+    id: 1,
+    questions: 'What does "4C" stands for?',


Suggested change

questions: 'What does "4C" stands for?',

questions: "What does "4C" stands for?",

kkrishguptaa · 2023-10-31T16:12:18Z

src/data/faq.js

+  {
+    id: 1,
+    questions: 'What does "4C" stands for?',
+    answers: '4C stands for "Cool Community of Content Creators".',


Suggested change

answers: '4C stands for "Cool Community of Content Creators".',

answers: "4C stands for \"Cool Community of Content Creators\".",

kkrishguptaa · 2023-10-31T16:12:29Z

src/data/faq.js

+  },
+  {
+    id: 2,
+    questions: 'What is the goal of "4C"? ',


Suggested change

questions: 'What is the goal of "4C"? ',

questions: "What is the goal of "4C"?",

kkrishguptaa · 2023-10-31T16:12:47Z

src/data/faq.js

+  },
+  {
+    id: 3,
+    questions: 'Is "4C" open-source and how can I contribute?',


Suggested change

questions: 'Is "4C" open-source and how can I contribute?',

questions: "Is \"4C\" open-source and how can I contribute?",

kkrishguptaa · 2023-10-31T16:13:02Z

src/data/faq.js

+  },
+  {
+    id: 5,
+    questions: 'Is "4C" only for experienced content creators?',


Suggested change

questions: 'Is "4C" only for experienced content creators?',

questions: "Is \"4C\" only for experienced content creators?",

kkrishguptaa · 2023-10-31T16:13:14Z

src/data/faq.js

+  },
+  {
+    id: 6,
+    questions: 'What are the benefits of the "4C" community?',


Suggested change

questions: 'What are the benefits of the "4C" community?',

questions: 'What are the benefits of the \"4C\" community?',

kkrishguptaa · 2023-10-31T16:13:27Z

src/data/faq.js

+    answers:
+      "You get support, activities, collaborations, free dedicated content creation webinars (yes, you got it right ! 😄), coffee chat, and a meme channel! ",
+  },
+];


Suggested change

];

]

FrancescoXX · 2023-11-09T15:04:40Z

@AliReza1083 @tobySolutions I am closing this

feat(FrancescoXX#775): now we see one a question at a time

6ad983e

vercel bot had a problem deploying to Preview October 16, 2023 09:06 Failure

coderabbitai bot reviewed Oct 16, 2023

View reviewed changes

Update commit-msg

e6dd032

vercel bot had a problem deploying to Preview October 16, 2023 09:10 Failure

Merge branch 'FrancescoXX:main' into faq

5a3ff83

vercel bot had a problem deploying to Preview October 24, 2023 09:51 Failure

kkrishguptaa suggested changes Oct 24, 2023

View reviewed changes

kkrishguptaa suggested changes Oct 31, 2023

View reviewed changes

FrancescoXX closed this Nov 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(#775): now we see one a question at a time #785

feat(#775): now we see one a question at a time #785

alisamadiii commented Oct 16, 2023 •

edited by coderabbitai bot

Loading

vercel bot commented Oct 16, 2023 •

edited

Loading

coderabbitai bot commented Oct 16, 2023 •

edited

Loading

Chat with CodeRabbit Bot (`@coderabbitai`)

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

coderabbitai bot left a comment

coderabbitai bot Oct 16, 2023

tobySolutions commented Oct 24, 2023

kkrishguptaa left a comment

alisamadiii commented Oct 24, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

kkrishguptaa Oct 31, 2023

FrancescoXX commented Nov 9, 2023

	onKeyDown={onClickHandler}
	onKeyDown={(e) => { if (e.key === 'Enter' \|\| e.key === ' ') onClickHandler() }}

		const Faq = () => {
		const [currentQuestion, setCurrentQuestion] = useState(1);

	questions: 'What does "4C" stands for?',
	questions: "What does "4C" stands for?",

	answers: '4C stands for "Cool Community of Content Creators".',
	answers: "4C stands for \"Cool Community of Content Creators\".",

	questions: 'What is the goal of "4C"? ',
	questions: "What is the goal of "4C"?",

	questions: 'Is "4C" open-source and how can I contribute?',
	questions: "Is \"4C\" open-source and how can I contribute?",

	questions: 'Is "4C" only for experienced content creators?',
	questions: "Is \"4C\" only for experienced content creators?",

	questions: 'What are the benefits of the "4C" community?',
	questions: 'What are the benefits of the \"4C\" community?',

feat(#775): now we see one a question at a time #785

feat(#775): now we see one a question at a time #785

Conversation

alisamadiii commented Oct 16, 2023 • edited by coderabbitai bot Loading

Summary by CodeRabbit

vercel bot commented Oct 16, 2023 • edited Loading

coderabbitai bot commented Oct 16, 2023 • edited Loading

Chat with CodeRabbit Bot (@coderabbitai)

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Oct 16, 2023

Choose a reason for hiding this comment

tobySolutions commented Oct 24, 2023

kkrishguptaa left a comment

Choose a reason for hiding this comment

alisamadiii commented Oct 24, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FrancescoXX commented Nov 9, 2023

alisamadiii commented Oct 16, 2023 •

edited by coderabbitai bot

Loading

vercel bot commented Oct 16, 2023 •

edited

Loading

coderabbitai bot commented Oct 16, 2023 •

edited

Loading

Chat with CodeRabbit Bot (`@coderabbitai`)

CodeRabbit Configration File (`.coderabbit.yaml`)