This is the 23rd day of my participation in Gwen Challenge

Today, I was thinking of using Github Action package Dmg file to send to partners to install to see the effect. However, it was found that the Event and weather forecast could not be obtained after their installation.

The problem is that I didn’t put env in the codebase, so I couldn’t get the VITE variable:

VITE_APP_WIDTH=700
VITE_APP_HEIGHT=600
VITE_WEATHER_API=<your-weather-api>
VITE_NOtion_VERSION=2021-05-13
VITE_NOTION_DATABASE_API=https://api.notion.com/v1/databases/
VITE_NOTION_PAGE_API=https://api.notion.com/v1/pages
Copy the code

Env < span style = “box-sizing: border-box; color: RGB (74, 74, 74); display: block; line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;” Fill in the APIKey and database ID.

Look at the specific effect:

Create the Setting Tab

This is easy:

<n-tab-pane name="eventSetting" TAB ="eventSetting" > <n-form> <n-form-item-row label="NOTION_API_KEY"> <n-input v-model:value="notion_api_key" /> </n-form-item-row> <n-form-item-row label="NOTION_DATABASE_ID"> <n-input v-model:value="notion_database_id" :minlength="32" :maxlength="32" /> </n-form-item-row> </n-form> <n-button Type ="primary" block @click="updateNotion"> update </ n-divider > <n-divider type="info" :disabled="createNotionDisabled" block @click="$emit('goCreateEventView')"> Create a new event </n-button> </n-tab-pane>Copy the code

Here are a few caveats:

  1. The notion_API_key and notion_database_ID models need to be stored in the Vuex state to facilitate multiple invocation.
  2. I also put the “Create event” entry here, simply based on whether to fill in two parameters, whether to have the “create event” function. (This will be optimized in the future)
  3. < span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important; word-break: inherit! Important;”

Because notion_API_key and notion_database_id are in Vuex, and the EventService we created is a separate “project”, we can’t use Vuex’s logic and can only pass parameters instead:

'use strict'; import axios from 'axios'; import wrapper from 'axios-cache-plugin'; export default class EventService { notion_api_key: string; notion_database_id: string; constructor(notion_api_key: string, notion_database_id: string) { this.notion_api_key = notion_api_key; this.notion_database_id = notion_database_id; } /** * < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;" Date, ) { const http = wrapper(axios, { maxCacheSize: 15, }); const res = await http({ url: import.meta.env.VITE_NOTION_PAGE_API, method: 'post', headers: this.getHeaders(), data: { 'parent': { 'type': 'database_id', 'database_id': this.notion_database_id }, 'properties': this.getParams(title, start, end), }, }); return res; } /** * async patchEvent(id: string, title: string, start: Date, end: string); Date, ) { const http = wrapper(axios, { maxCacheSize: 15, }); const res = await http({ url: import.meta.env.VITE_NOTION_PAGE_API + '/' + id, method: 'patch', headers: this.getHeaders(), data: { 'properties': this.getParams(title, start, end), }, }); return res; } async getEvents() { const http = wrapper(axios, { maxCacheSize: 15, ttl: 60000, //ms }); const res = await http({ url: import.meta.env.VITE_NOTION_DATABASE_API + this.notion_database_id + '/query', method: 'post', headers: this.getHeaders(), }); return this.list2Events(res.data.results); } list2Events(results: []) { const events = results.map((element: any) => { return { 'id': element.id, 'title': element.properties? .title? .rich_text[0].plain_text, 'start': element.properties? .start? .date.start, 'end': element.properties? .end? .date.start, }; }); return events; } // add set setApiKey(notion_API_key: string): this {if (notion_API_key === "") {return this; } this.notion_api_key = notion_api_key; return this; } setDatabaseId(notion_database_id: string): this { if (notion_database_id === '') { return this; } this.notion_database_id = notion_database_id; return this; } getHeaders(): any { return { 'Notion-Version': import.meta.env.VITE_NOtion_VERSION, 'Authorization': 'Bearer '+ this.notion_api_key, }; } getParams( title: string, start: Date, end: Date, ): any { return { 'title': { 'type': 'rich_text', 'rich_text': [{ 'type': 'text', 'text': { 'content': title }, }], }, 'start': { 'type': 'date', 'date': { 'start': start }, }, 'end': { 'type': 'date', 'date': { 'start': end }, }, }; }}Copy the code

This can be optimized in the future.

Increase the Store items

Similarly, add a Notion parameter to Vuex:

// store/index.ts export interface FNotion { api_key: string, // api key database_id: String, // database id} export interface State {notion: FNotion,} export const store = createStore<State>({State: { notion: { api_key: '******', database_id: '******', } as FNotion, focusTime: 40, }, mutations: { changeNotion(state, notion) { state.notion = { api_key: notion.api_key, database_id: notion.database_id, } as FNotion; }, }, actions: { changeNotion({ commit }) { commit('changeNotion'); }, }, plugins: [dataState], });Copy the code

summary

If the “create event” is moved into the Setting, then the external Menu is mainly reserved for “Set” and “exit application” :

Or add some other operations in the future.

Change a little bit every day to make the code more rigorous. This is a busy time, it is not easy to stick to it. To be continued!

The code has been synchronized to Github, also put env in, can be packaged into DMG installation package, if you need to leave me a comment ~