Skip to content

Commit 07ffae0

Browse files
butschsterbutschster
authored
Merge pull request #27 from buggregator/issue/#6-optimize-autorefresh
Issue/#6 optimize autorefresh
2 parents fbb1c8a + ecb4c82 commit 07ffae0

File tree

7 files changed

+12841
-13509
lines changed

7 files changed

+12841
-13509
lines changed

‎config/constants.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,8 @@ export const EVENT_STATUS_COLOR_MAP = {
4646
DEBUG: "gray",
4747
SUCCESS: "green",
4848
};
49+
50+
export const LOCAL_STORAGE_KEYS = {
51+
CACHED_EVENTS: "cached_events",
52+
THEME: "theme",
53+
};

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"moment": "^2.29.4",
7676
"nuxt": "3.3.3",
7777
"pinia": "^2.0.30",
78+
"pluralize": "^8.0.0",
7879
"tailwindcss": "^3.2.4",
7980
"vue": "^3.2.45",
8081
"vue3-perfect-scrollbar": "^1.6.1",

‎pages/index.vue‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<span
2020
v-if="isEventsPaused && hiddenEventsCount"
2121
class="events-page__btn-stop-events-count"
22-
:title="hiddenEventsCount + ' new events'"
22+
:title="titleEventsCount"
2323
>
2424
{{ hiddenEventsCount }}
2525
</span>
@@ -49,6 +49,7 @@ import PageHeader from "~/components/PageHeader/PageHeader.vue";
4949
import { useNuxtApp } from "#app";
5050
import PreviewEventMapper from "~/components/PreviewEventMapper/PreviewEventMapper.vue";
5151
import { ALL_EVENTS } from "~/config/constants";
52+
import pluralize from "pluralize";
5253
5354
export default defineComponent({
5455
components: {
@@ -85,19 +86,27 @@ export default defineComponent({
8586
}
8687
return $events.items.value.filter(({ type }) => type === this.type);
8788
},
88-
cachedEvents() {
89+
isEventsPaused() {
8990
const { $cachedEvents } = useNuxtApp();
9091
91-
return $cachedEvents.savedEventsByType.value[this.type];
92-
},
93-
isEventsPaused() {
94-
return this.cachedEvents.length > 0;
92+
return $cachedEvents.eventsIdsByType.value[this.type].length > 0;
9593
},
9694
visibleEvents() {
97-
return this.isEventsPaused ? this.cachedEvents : this.allEvents;
95+
if (!this.isEventsPaused) {
96+
return this.allEvents;
97+
}
98+
99+
const { $cachedEvents } = useNuxtApp();
100+
101+
return this.allEvents.filter(({ uuid }) =>
102+
$cachedEvents.eventsIdsByType.value[this.type].includes(uuid)
103+
);
98104
},
99105
hiddenEventsCount() {
100-
return this.allEvents.length - this.cachedEvents.length;
106+
return this.allEvents.length - this.visibleEvents.length;
107+
},
108+
titleEventsCount() {
109+
return `${pluralize("new event", this.hiddenEventsCount, true)}`;
101110
},
102111
},
103112
methods: {
@@ -146,7 +155,7 @@ export default defineComponent({
146155
}
147156
148157
.events-page__btn-stop-events {
149-
@apply mr-3 text-xs text-white rounded-sm hover:opacity-100 transition-all duration-300 opacity-40 relative;
158+
@apply mr-3 text-xs text-gray-800 dark:text-white rounded-sm hover:opacity-100 transition-all duration-300 opacity-40 relative;
150159
151160
&[disabled] {
152161
@apply hover:opacity-40;

‎plugins/events.client.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,20 @@ export default defineNuxtPlugin(() => {
3636

3737
const getAll = () => {
3838
getEventsAll.then((events: ServerEvent<unknown>[]) => {
39-
eventsStore.addEvents(events);
39+
if (events.length) {
40+
eventsStore.addEvents(events);
41+
} else {
42+
// NOTE: clear cached events hardly
43+
eventsStore.removeEvents();
44+
}
45+
}).catch((err) => {
46+
console.error('getAll err', err);
4047
})
4148
}
4249

4350
const {
4451
events,
45-
cachedEventsMap,
52+
cachedEventsIdsMap,
4653
} = storeToRefs(eventsStore)
4754

4855
return {
@@ -56,7 +63,7 @@ export default defineNuxtPlugin(() => {
5663
removeById,
5764
},
5865
cachedEvents: {
59-
savedEventsByType: cachedEventsMap,
66+
eventsIdsByType: cachedEventsIdsMap,
6067
stopUpdatesByType: eventsStore.setCachedEvents,
6168
runUpdatesByType: eventsStore.removeCachedEvents,
6269
}

‎stores/events.ts‎

Lines changed: 68 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,110 @@
11
import { defineStore } from "pinia";
22
import {
33
EventId,
4-
HttpDump,
5-
Inspector,
64
OneOfValues,
7-
Profiler,
8-
RayDump,
9-
Sentry,
105
ServerEvent,
11-
SMTP,
12-
VarDump,
136
} from "~/config/types";
14-
import { ALL_EVENTS, EVENT_TYPES } from "~/config/constants";
7+
import { ALL_EVENTS, EVENT_TYPES, LOCAL_STORAGE_KEYS } from "~/config/constants";
158

16-
type TCachedEventsEmptyMap = Record<
17-
OneOfValues<typeof EVENT_TYPES>,
18-
ServerEvent<unknown>[]
19-
>;
9+
type TCachedEventsEmptyMap = Record<OneOfValues<typeof EVENT_TYPES>, EventId[]>;
2010

21-
const initialCachedEventsMap: TCachedEventsEmptyMap = {
22-
[EVENT_TYPES.SENTRY]: [] as ServerEvent<Sentry>[],
23-
[EVENT_TYPES.INSPECTOR]: [] as ServerEvent<Inspector>[],
24-
[EVENT_TYPES.PROFILER]: [] as ServerEvent<Profiler>[],
25-
[EVENT_TYPES.SMTP]: [] as ServerEvent<SMTP>[],
26-
[EVENT_TYPES.RAY_DUMP]: [] as ServerEvent<RayDump>[],
27-
[EVENT_TYPES.VAR_DUMP]: [] as ServerEvent<VarDump>[],
28-
[EVENT_TYPES.HTTP_DUMP]: [] as ServerEvent<HttpDump>[],
29-
[ALL_EVENTS]: [] as ServerEvent<unknown>[],
11+
const initialCachedEventsIdsMap: TCachedEventsEmptyMap = {
12+
[EVENT_TYPES.SENTRY]: [] as EventId[],
13+
[EVENT_TYPES.INSPECTOR]: [] as EventId[],
14+
[EVENT_TYPES.PROFILER]: [] as EventId[],
15+
[EVENT_TYPES.SMTP]: [] as EventId[],
16+
[EVENT_TYPES.RAY_DUMP]: [] as EventId[],
17+
[EVENT_TYPES.VAR_DUMP]: [] as EventId[],
18+
[EVENT_TYPES.HTTP_DUMP]: [] as EventId[],
19+
[ALL_EVENTS]: [] as EventId[],
20+
};
21+
22+
const { localStorage } = window;
23+
const getCachedEventsIdsMap = (): TCachedEventsEmptyMap => {
24+
const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.CACHED_EVENTS);
25+
26+
if (storageValue) {
27+
return JSON.parse(storageValue) as TCachedEventsEmptyMap;
28+
}
29+
30+
return initialCachedEventsIdsMap;
3031
};
3132

3233
export const useEventStore = defineStore("useEventStore", {
3334
state: () => ({
3435
events: [] as ServerEvent<unknown>[],
35-
cachedEventsMap: initialCachedEventsMap,
36+
cachedEventsIdsMap: getCachedEventsIdsMap(),
3637
}),
3738
actions: {
39+
addEvents(events: ServerEvent<unknown>[]) {
40+
events.forEach((event) => {
41+
const isExistedEvent = this.events.some((el) => el.uuid === event.uuid);
42+
if (!isExistedEvent) {
43+
this.events.unshift(event);
44+
} else {
45+
this.events = this.events.map((el) => {
46+
if (el.uuid === event.uuid) {
47+
return event;
48+
}
49+
return el;
50+
});
51+
}
52+
});
53+
},
54+
removeEvents() {
55+
this.events.length = 0;
56+
57+
this.cachedEventsIdsMap = initialCachedEventsIdsMap;
58+
},
3859
removeEventById(eventUuid: EventId) {
3960
const eventType = this.events.find(
4061
({ uuid }) => uuid === eventUuid
4162
)?.type;
4263

4364
if (eventType) {
44-
this.cachedEventsMap[eventType] = this.cachedEventsMap[
65+
this.cachedEventsIdsMap[eventType] = this.cachedEventsIdsMap[
4566
eventType
46-
].filter(({ uuid }) => uuid !== eventUuid);
67+
].filter((uuid: EventId) => uuid !== eventUuid);
4768
}
4869

49-
if (this.cachedEventsMap[ALL_EVENTS].length) {
50-
this.cachedEventsMap[ALL_EVENTS] = this.cachedEventsMap[
70+
if (this.cachedEventsIdsMap[ALL_EVENTS].length) {
71+
this.cachedEventsIdsMap[ALL_EVENTS] = this.cachedEventsIdsMap[
5172
ALL_EVENTS
52-
].filter(({ uuid }) => uuid !== eventUuid);
73+
].filter((uuid: EventId) => uuid !== eventUuid);
5374
}
5475

5576
this.events = this.events.filter(({ uuid }) => uuid !== eventUuid);
5677
},
57-
removeEvents() {
58-
this.events.length = 0;
59-
60-
this.cachedEventsMap = initialCachedEventsMap;
61-
},
6278
removeEventsByType(eventType: OneOfValues<typeof EVENT_TYPES>) {
63-
this.cachedEventsMap[eventType].length = 0;
79+
this.cachedEventsIdsMap[eventType].length = 0;
6480
this.events = this.events.filter(({ type }) => type !== eventType);
6581
},
66-
addEvents(events: ServerEvent<unknown>[]) {
67-
events.forEach((event) => {
68-
const isExistedEvent = this.events.some((el) => el.uuid === event.uuid);
69-
if (!isExistedEvent) {
70-
this.events.unshift(event);
71-
} else {
72-
this.events = this.events.map((el) => {
73-
if (el.uuid === event.uuid) {
74-
return event;
75-
}
76-
return el;
77-
});
78-
}
79-
});
80-
},
81-
setCachedEvents(eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>) {
82+
83+
setCachedEvents(
84+
eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
85+
) {
8286
this.events
8387
.filter(({ type }) =>
8488
eventType === ALL_EVENTS ? true : type === eventType
8589
)
8690
.forEach((event) => {
87-
this.cachedEventsMap[eventType].push(event);
91+
this.cachedEventsIdsMap[eventType].push(event.uuid);
8892
});
93+
94+
localStorage?.setItem(
95+
LOCAL_STORAGE_KEYS.CACHED_EVENTS,
96+
JSON.stringify(this.cachedEventsIdsMap)
97+
);
8998
},
90-
removeCachedEvents(eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>) {
91-
this.cachedEventsMap[eventType].length = 0;
99+
removeCachedEvents(
100+
eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
101+
) {
102+
this.cachedEventsIdsMap[eventType].length = 0;
103+
104+
localStorage?.setItem(
105+
LOCAL_STORAGE_KEYS.CACHED_EVENTS,
106+
JSON.stringify(this.cachedEventsIdsMap)
107+
);
92108
},
93109
},
94110
});

‎stores/theme.ts‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,38 @@
1-
import { defineStore } from 'pinia';
1+
import { defineStore } from "pinia";
2+
import { LOCAL_STORAGE_KEYS } from "~/config/constants";
23

34
export const THEME_MODES = {
4-
LIGHT: 'light',
5-
DARK: 'dark',
6-
}
5+
LIGHT: "light",
6+
DARK: "dark",
7+
};
78

89
const checkDarkTheme = () => {
910
if (process.client) {
10-
return window?.localStorage.getItem('theme') === THEME_MODES.DARK || window.matchMedia('(prefers-color-scheme: dark)').matches
11+
return (
12+
window?.localStorage.getItem(LOCAL_STORAGE_KEYS.THEME) ===
13+
THEME_MODES.DARK ||
14+
window.matchMedia("(prefers-color-scheme: dark)").matches
15+
);
1116
}
1217

1318
return {
14-
themeType: false
15-
}
16-
}
19+
themeType: false,
20+
};
21+
};
1722

18-
export const useThemeStore = defineStore('themeStore', {
23+
export const useThemeStore = defineStore("themeStore", {
1924
state: () => ({
20-
themeType: checkDarkTheme() ? THEME_MODES.DARK : THEME_MODES.LIGHT
25+
themeType: checkDarkTheme() ? THEME_MODES.DARK : THEME_MODES.LIGHT,
2126
}),
2227
actions: {
2328
themeChange() {
24-
const newType = this.themeType === THEME_MODES.DARK ? THEME_MODES.LIGHT : THEME_MODES.DARK;
29+
const newType =
30+
this.themeType === THEME_MODES.DARK
31+
? THEME_MODES.LIGHT
32+
: THEME_MODES.DARK;
2533

26-
window?.localStorage.setItem('theme', newType);
34+
window?.localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, newType);
2735
this.themeType = newType;
2836
},
2937
},
30-
})
38+
});

0 commit comments

Comments
 (0)