UniqueSoft/serpbear
2
0
Fork 0
mirror of https://github.com/towfiqi/serpbear synced 2025-06-26 18:15:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: improves Performance & Code Readability

Browse Source 
- Replaces useEffet with useMemo & useLayoutEffect where necessary.
- Converts some useEffects to separate hooks.
- Moves the functions defined within components to utils.
- Splits the Keywords renderPosition function to its own component.
This commit is contained in:
towfiqi
2024-01-13 10:10:49 +06:00
parent 2783de5c65
commit 4a47cedad8
18 changed files with 146 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/common/Modal.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import React from 'react';
import Icon from './Icon';
import useOnKey from '../../hooks/useOnKey';
type ModalProps = {
children: React.ReactNode,
@@ -9,17 +10,7 @@ type ModalProps = {
}
const Modal = ({ children, width = '1/2', closeModal, title }:ModalProps) => {
useEffect(() => {
const closeModalonEsc = (event:KeyboardEvent) => {
if (event.key === 'Escape') {
closeModal();
}
};
window.addEventListener('keydown', closeModalonEsc, false);
return () => {
window.removeEventListener('keydown', closeModalonEsc, false);
};
}, [closeModal]);
useOnKey('Escape', closeModal);
const closeOnBGClick = (e:React.SyntheticEvent) => {
e.stopPropagation();

56
components/common/generateChartData.ts
View File

@@ -1,56 +0,0 @@
type ChartData = {
labels: string[],
sreies: number[]
}
export const generateChartData = (history: KeywordHistory): ChartData => {
const currentDate = new Date();
const priorDates = [];
const seriesDates: any = {};
let lastFoundSerp = 0;
// First Generate Labels. The labels should be the last 30 days dates. Format: Oct 26
for (let index = 30; index >= 0; index -= 1) {
const pastDate = new Date(new Date().setDate(currentDate.getDate() - index));
priorDates.push(`${pastDate.getDate()}/${pastDate.getMonth() + 1}`);
// Then Generate Series. if past date's serp does not exist, use 0.
// If have a missing serp in between dates, use the previous date's serp to fill the gap.
const pastDateKey = `${pastDate.getFullYear()}-${pastDate.getMonth() + 1}-${pastDate.getDate()}`;
const serpOftheDate = history[pastDateKey];
const lastLargestSerp = lastFoundSerp > 0 ? lastFoundSerp : 0;
seriesDates[pastDateKey] = history[pastDateKey] ? history[pastDateKey] : lastLargestSerp;
if (lastFoundSerp < serpOftheDate) { lastFoundSerp = serpOftheDate; }
}
return { labels: priorDates, sreies: Object.values(seriesDates) };
};
export const generateTheChartData = (history: KeywordHistory, time:string = '30'): ChartData => {
const currentDate = new Date(); let lastFoundSerp = 0;
const chartData: ChartData = { labels: [], sreies: [] };
if (time === 'all') {
Object.keys(history).forEach((dateKey) => {
const serpVal = history[dateKey] ? history[dateKey] : 111;
chartData.labels.push(dateKey);
chartData.sreies.push(serpVal);
});
} else {
// First Generate Labels. The labels should be the last 30 days dates. Format: Oct 26
for (let index = parseInt(time, 10); index >= 0; index -= 1) {
const pastDate = new Date(new Date().setDate(currentDate.getDate() - index));
// Then Generate Series. if past date's serp does not exist, use 0.
// If have a missing serp in between dates, use the previous date's serp to fill the gap.
const pastDateKey = `${pastDate.getFullYear()}-${pastDate.getMonth() + 1}-${pastDate.getDate()}`;
const prevSerp = history[pastDateKey];
const serpVal = prevSerp || (lastFoundSerp > 0 ? lastFoundSerp : 111);
if (serpVal !== 0) { lastFoundSerp = prevSerp; }
chartData.labels.push(pastDateKey);
chartData.sreies.push(serpVal);
}
}
// console.log(chartData);
return chartData;
};