# Stories

Let's navigate to the 'stories' folder.

In the 'Story.js' file, add a new tab for Story permissions on line 15 like this:

<pre class="language-jsx"><code class="lang-jsx">&#x3C;Tabs defaultActiveKey="details">
<strong>    &#x3C;Tab eventKey="details" title="Details">&#x3C;Dashboard story={story} setSelectedStory={setSelectedStory} setStories={setStories}/>&#x3C;/Tab>
</strong>    &#x3C;Tab eventKey="permissions" title="Permissions">&#x3C;StoryPermissions story={story}/>&#x3C;/Tab>
&#x3C;/Tabs>
</code></pre>

In the Dashboard component, add new state variables and make use of the useAccess hook to see which permissions the user has for changing story elements:

```jsx
.
.
.
const [estimateAccess, setEstimateAccess] = useState(false)
const [statusAccess, setStatusAccess] = useState(false)
const [assigneeAccess, setAssigneeAccess] = useState(false)
const {story, setSelectedStory, setStories} = props

useAccess(story.id, "EstimateStory", setEstimateAccess)
useAccess(story.id, "ChangeStoryStatus", setStatusAccess)
useAccess(story.id, "ChangeStoryAssignee", setAssigneeAccess)
.
.
.
```

Now, disable form controls if the user doesn't have the required permissions:

```jsx
.
.
.
<Form.Group className="mb-3">
    <Form.Label>Estimate</Form.Label>
    <Form.Control disabled={!estimateAccess} type="number" value={estimate} onChange={handleEstimateChange} onBlur={handleEstimateBlur}/>
</Form.Group>
<Form.Group className="mb-3">
    <Form.Label>Status</Form.Label>
    <Form.Select disabled={!statusAccess} value={status} onChange={handleStatusChange}>
        <option value="todo">todo</option>
        <option value="busy">busy</option>
        <option value="done">done</option>
    </Form.Select>
</Form.Group>
<Form.Group className="mb-3">
    <Form.Label>Assignee</Form.Label>
    <Form.Select disabled={!assigneeAccess} value={assignee} onChange={handleAssigneeChange}>
    .
    .
    .
```

And add the StoryPermissions component to the same file:

```jsx
function StoryPermissions(props) {
    const {story} = props

    return <>
        <AccessGuard resourceId={story.id} action="ReadStoryPermissions">
            <Permissions resourceId={story.id} changeAction="ChangeStoryPermissions"/>
        </AccessGuard>
    </>
}
```

In the 'Stories.js' file, wrap the CreateStory button on line 70 in an AccessGuard like this:

```jsx
selectedStory
? <Story story={selectedStory} setSelectedStory={setSelectedStory} setStories={setStories}/>
: <AccessGuard resourceId={sprintCtx.sprint.id} action="CreateStory">
        <CreateStory setStories={setStories}/>
  </AccessGuard>
```

And disable the StoryButton element if the user doesn't have 'ReadStory' permission on the story:

<pre class="language-jsx"><code class="lang-jsx">function StoryButton(props) {
<strong>    const [readAccess, setReadAccess] = useState(false)
</strong>    useAccess(props.story.id, "ReadStory", setReadAccess)

    return &#x3C;>
        &#x3C;ListGroupItem
            disabled={!readAccess}
            .
            .
            .
</code></pre>

That's it! You now have a fully permissioned app, congratulations!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.a11n.io/tutorial/implementation/frontend/stories.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.