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

feat: Highlights tracked keywords in Discovery tab

Browse Source
This commit is contained in:
Towfiq 2022-12-21 13:04:07 +06:00
parent 6a1f1d4adf
commit ee32435d05
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/keywords/SCKeyword.tsx
View File

@ -7,11 +7,12 @@ type SCKeywordProps = {
selected: boolean,
selectKeyword: Function,
lastItem?:boolean,
isTracked: boolean,
style: Object
}
const SCKeyword = (props: SCKeywordProps) => {
const { keywordData, selected, lastItem, selectKeyword, style } = props;
const { keywordData, selected, lastItem, selectKeyword, style, isTracked = false } = props;
const { keyword, uid, position, country, impressions, ctr, clicks } = keywordData;
const renderPosition = () => {
@ -31,10 +32,11 @@ const SCKeyword = (props: SCKeywordProps) => {
<div className=' w-3/4 lg:flex-1 lg:basis-20 lg:w-auto font-semibold cursor-pointer'>
<button
className={`p-0 mr-2 leading-[0px] inline-block rounded-sm pt-0 px-[1px] pb-[3px] border
${selected ? ' bg-blue-700 border-blue-700 text-white' : 'text-transparent'}`}
onClick={() => selectKeyword(uid)}
${isTracked || selected ? ' bg-blue-700 border-blue-700 text-white' : 'text-transparent'}
${isTracked ? 'bg-gray-400 border-gray-400 cursor-default' : ''}`}
onClick={() => !isTracked && selectKeyword(uid)}
>
<Icon type="check" size={10} />
<Icon type="check" size={10} title={isTracked ? 'Already in Tracker' : ''} />
</button>
<a className='py-2 hover:text-blue-600'>
<span className={`fflag fflag-${country} w-[18px] h-[12px] mr-2`} title={countries[country] && countries[country][0]} />{keyword}

6
components/keywords/SCKeywordsTable.tsx
View File

@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
import React, { useState, useMemo, useEffect } from 'react';
import { Toaster } from 'react-hot-toast';
import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
import { useAddKeywords } from '../../services/keywords';
import { useAddKeywords, useFetchKeywords } from '../../services/keywords';
import { SCfilterKeywords, SCkeywordsByDevice, SCsortKeywords } from '../../utils/SCsortFilter';
import Icon from '../common/Icon';
import KeywordFilters from './KeywordFilter';
@ -29,7 +29,8 @@ const SCKeywordsTable = ({ domain, keywords = [], isLoading = true, isConsoleInt
const [sortBy, setSortBy] = useState<string>('imp_asc');
const [isMobile, setIsMobile] = useState<boolean>(false);
const [SCListHeight, setSCListHeight] = useState(500);
const { keywordsData } = useFetchKeywords(router);
const addedkeywords: string[] = keywordsData?.keywords?.map((key: KeywordType) => `${key.keyword}:${key.country}:${key.device}`) || [];
const { mutate: addKeywords } = useAddKeywords(() => { if (domain && domain.slug) router.push(`/domain/${domain.slug}`); });
const finalKeywords: {[key:string] : SCKeywordType[] } = useMemo(() => {
const procKeywords = keywords.filter((x) => x.device === device);
@ -112,6 +113,7 @@ const SCKeywordsTable = ({ domain, keywords = [], isLoading = true, isConsoleInt
selected={selectedKeywords.includes(keyword.uid)}
selectKeyword={selectKeyword}
keywordData={keyword}
isTracked={addedkeywords.includes(`${keyword.keyword}:${keyword.country}:${keyword.device}`)}
lastItem={index === (finalKeywords[device].length - 1)}
/>
);

2
services/keywords.tsx
View File

@ -8,7 +8,7 @@ export const fetchKeywords = async (router: NextRouter) => {
return res.json();
};
export function useFetchKeywords(router: NextRouter, setKeywordSPollInterval:Function, keywordSPollInterval:undefined|number = undefined) {
export function useFetchKeywords(router: NextRouter, setKeywordSPollInterval?:Function, keywordSPollInterval:undefined|number = undefined) {
const { data: keywordsData, isLoading: keywordsLoading, isError } = useQuery(
['keywords', router.query.slug],
() => fetchKeywords(router),