Client: Fix hard-coded qualifier dropdown options

[jdtech3]

Migrate to pulling qualifier options from server (new API endpoints required) rather than hard-coding the values. This logic will have to be implemented once editing is enabled.

https://github.com/utat-ss/tree-visualizer/blob/f3d971e563dfb52b1c61999892d0275e639f999b/client/src/app/components/inspector/inspector.component.ts#L13

[DM1122]

@dosu-bot how can this feature be implemented?

[dosubot[bot]]

🤖

To migrate from hard-coded qualifier dropdown options to pulling them from the server, you'll need to make use of the Notion API client that the application is already interacting with.

First, you'll need to create a new API endpoint that will return the qualifier options. This can be done in the server-side code of your application. The endpoint should interact with the Notion API to fetch the necessary data.

Here's a basic example of how you might set up this endpoint:

const { Client } = require("@notionhq/client");

// Initialize Notion client
const notion = new Client({ auth: process.env.NOTION_TOKEN });

app.get('/api/qualifiers', async (req, res) => {
  const databaseId = process.env.NOTION_DATABASE_ID;
  const response = await notion.databases.query({ database_id: databaseId });

  // Extract qualifier options from response
  const qualifiers = response.results.map(result => result.properties.Qualifier.select.name);

  res.json(qualifiers);
});

In this example, the endpoint /api/qualifiers fetches data from a Notion database and extracts the qualifier options, which are then returned in the response.

Next, you'll need to modify the client-side code to fetch the qualifier options from this new endpoint instead of using the hard-coded values. This can be done using the fetch function or any HTTP client like axios.

Here's how you might modify the inspector.component.ts file:

qualifiers: string[] = [];

ngOnInit() {
  this.fetchQualifiers();
}

fetchQualifiers() {
  fetch('/api/qualifiers')
    .then(response => response.json())
    .then(data => this.qualifiers = data)
    .catch(error => console.error('Error:', error));
}

In this example, the fetchQualifiers method fetches the qualifier options from the new endpoint and assigns them to the qualifiers array. This method is called in the ngOnInit lifecycle hook, so the qualifiers are fetched when the component is initialized.

Please note that this is a basic example and might need to be adjusted based on your application's structure and requirements. Also, remember to handle errors and edge cases appropriately in your actual implementation.

Sources

• package.json
• documentation.json

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.