Minor fix for follow button feature in non-secure mode (#491)

This commit is contained in:
darth-coder00 2021-09-14 19:00:21 +05:30 committed by GitHub
parent 0fafc00f97
commit 96729e49e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 25 deletions

View File

@ -1,9 +1,10 @@
import { AxiosPromise, AxiosResponse } from 'axios'; import { AxiosPromise, AxiosResponse } from 'axios';
import classNames from 'classnames'; import classNames from 'classnames';
import { compare } from 'fast-json-patch'; import { compare } from 'fast-json-patch';
import { ColumnTags, TableDetail } from 'Models'; import { ColumnTags, TableDetail, User } from 'Models';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom'; import { Link, useParams } from 'react-router-dom';
import AppState from '../../AppState';
import { getChartById, updateChart } from '../../axiosAPIs/chartAPI'; import { getChartById, updateChart } from '../../axiosAPIs/chartAPI';
import { import {
addFollower, addFollower,
@ -27,6 +28,7 @@ import { getServiceDetailsPath } from '../../constants/constants';
import { EntityType } from '../../enums/entity.enum'; import { EntityType } from '../../enums/entity.enum';
import { Chart } from '../../generated/entity/data/chart'; import { Chart } from '../../generated/entity/data/chart';
import { Dashboard, TagLabel } from '../../generated/entity/data/dashboard'; import { Dashboard, TagLabel } from '../../generated/entity/data/dashboard';
import { useAuth } from '../../hooks/authHooks';
import { import {
addToRecentViewed, addToRecentViewed,
getCurrentUserId, getCurrentUserId,
@ -46,6 +48,9 @@ type ChartType = {
} & Chart; } & Chart;
const MyDashBoardPage = () => { const MyDashBoardPage = () => {
const USERId = getCurrentUserId(); const USERId = getCurrentUserId();
const { isAuthDisabled } = useAuth();
const [tagList, setTagList] = useState<Array<string>>([]); const [tagList, setTagList] = useState<Array<string>>([]);
const { dashboardFQN } = useParams() as Record<string, string>; const { dashboardFQN } = useParams() as Record<string, string>;
const [dashboardDetails, setDashboardDetails] = useState<Dashboard>( const [dashboardDetails, setDashboardDetails] = useState<Dashboard>(
@ -54,7 +59,8 @@ const MyDashBoardPage = () => {
const [dashboardId, setDashboardId] = useState<string>(''); const [dashboardId, setDashboardId] = useState<string>('');
const [isLoading, setLoading] = useState<boolean>(false); const [isLoading, setLoading] = useState<boolean>(false);
const [description, setDescription] = useState<string>(''); const [description, setDescription] = useState<string>('');
const [followers, setFollowers] = useState<number>(0); const [followers, setFollowers] = useState<Array<User>>([]);
const [followersCount, setFollowersCount] = useState<number>(0);
const [isFollowing, setIsFollowing] = useState(false); const [isFollowing, setIsFollowing] = useState(false);
const [owner, setOwner] = useState<TableDetail['owner']>(); const [owner, setOwner] = useState<TableDetail['owner']>();
const [tier, setTier] = useState<string>(); const [tier, setTier] = useState<string>();
@ -142,6 +148,12 @@ const MyDashBoardPage = () => {
return chartsData; return chartsData;
}; };
const setFollowersData = (followers: Array<User>) => {
// need to check if already following or not with logedIn user id
setIsFollowing(followers.some(({ id }: { id: string }) => id === USERId));
setFollowersCount(followers?.length);
};
const fetchDashboardDetail = (dashboardFQN: string) => { const fetchDashboardDetail = (dashboardFQN: string) => {
setLoading(true); setLoading(true);
getDashboardByFqn(dashboardFQN, [ getDashboardByFqn(dashboardFQN, [
@ -166,11 +178,11 @@ const MyDashBoardPage = () => {
setDashboardDetails(res.data); setDashboardDetails(res.data);
setDashboardId(id); setDashboardId(id);
setDescription(description ?? ''); setDescription(description ?? '');
setFollowers(followers?.length); setFollowers(followers);
setFollowersData(followers);
setOwner(getOwnerFromId(owner?.id)); setOwner(getOwnerFromId(owner?.id));
setTier(getTierFromTableTags(tags)); setTier(getTierFromTableTags(tags));
setTags(getTagsWithoutTier(tags)); setTags(getTagsWithoutTier(tags));
setIsFollowing(followers.some(({ id }: { id: string }) => id === USERId));
getServiceById('dashboardServices', service?.id).then( getServiceById('dashboardServices', service?.id).then(
(serviceRes: AxiosResponse) => { (serviceRes: AxiosResponse) => {
setSlashedDashboardName([ setSlashedDashboardName([
@ -210,12 +222,12 @@ const MyDashBoardPage = () => {
const followDashboard = (): void => { const followDashboard = (): void => {
if (isFollowing) { if (isFollowing) {
removeFollower(dashboardId, USERId).then(() => { removeFollower(dashboardId, USERId).then(() => {
setFollowers((preValu) => preValu - 1); setFollowersCount((preValu) => preValu - 1);
setIsFollowing(false); setIsFollowing(false);
}); });
} else { } else {
addFollower(dashboardId, USERId).then(() => { addFollower(dashboardId, USERId).then(() => {
setFollowers((preValu) => preValu + 1); setFollowersCount((preValu) => preValu + 1);
setIsFollowing(true); setIsFollowing(true);
}); });
} }
@ -377,6 +389,12 @@ const MyDashBoardPage = () => {
fetchDashboardDetail(dashboardFQN); fetchDashboardDetail(dashboardFQN);
}, [dashboardFQN]); }, [dashboardFQN]);
useEffect(() => {
if (isAuthDisabled && AppState.users.length && followers.length) {
setFollowersData(followers);
}
}, [AppState.users, followers]);
useEffect(() => { useEffect(() => {
fetchTags(); fetchTags();
}, []); }, []);
@ -390,7 +408,7 @@ const MyDashBoardPage = () => {
<EntityPageInfo <EntityPageInfo
isTagEditable isTagEditable
extraInfo={extraInfo} extraInfo={extraInfo}
followers={followers} followers={followersCount}
followHandler={followDashboard} followHandler={followDashboard}
isFollowing={isFollowing} isFollowing={isFollowing}
tagList={tagList} tagList={tagList}

View File

@ -25,9 +25,11 @@ import {
TableColumn, TableColumn,
TableDetail, TableDetail,
TableJoinsData, TableJoinsData,
User,
} from 'Models'; } from 'Models';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import AppState from '../../AppState';
import { getDatabase } from '../../axiosAPIs/databaseAPI'; import { getDatabase } from '../../axiosAPIs/databaseAPI';
import { postFeed } from '../../axiosAPIs/feedsAPI'; import { postFeed } from '../../axiosAPIs/feedsAPI';
import { getServiceById } from '../../axiosAPIs/serviceAPI'; import { getServiceById } from '../../axiosAPIs/serviceAPI';
@ -53,6 +55,7 @@ import {
} from '../../constants/constants'; } from '../../constants/constants';
import { EntityType } from '../../enums/entity.enum'; import { EntityType } from '../../enums/entity.enum';
import { Table } from '../../generated/entity/data/table'; import { Table } from '../../generated/entity/data/table';
import { useAuth } from '../../hooks/authHooks';
import useToastContext from '../../hooks/useToastContext'; import useToastContext from '../../hooks/useToastContext';
import { import {
addToRecentViewed, addToRecentViewed,
@ -95,10 +98,13 @@ const MyDataDetailsPage = () => {
const USERId = getCurrentUserId(); const USERId = getCurrentUserId();
const { isAuthDisabled } = useAuth();
const [tableId, setTableId] = useState(''); const [tableId, setTableId] = useState('');
const [tier, setTier] = useState<string>(); const [tier, setTier] = useState<string>();
const [name, setName] = useState(''); const [name, setName] = useState('');
const [followers, setFollowers] = useState(0); const [followers, setFollowers] = useState<Array<User>>([]);
const [followersCount, setFollowersCount] = useState(0);
const [isFollowing, setIsFollowing] = useState(false); const [isFollowing, setIsFollowing] = useState(false);
const [slashedTableName, setSlashedTableName] = useState< const [slashedTableName, setSlashedTableName] = useState<
TitleBreadcrumbProps['titleLinks'] TitleBreadcrumbProps['titleLinks']
@ -296,12 +302,12 @@ const MyDataDetailsPage = () => {
const followTable = (): void => { const followTable = (): void => {
if (isFollowing) { if (isFollowing) {
removeFollower(tableId, USERId).then(() => { removeFollower(tableId, USERId).then(() => {
setFollowers((preValu) => preValu - 1); setFollowersCount((preValu) => preValu - 1);
setIsFollowing(false); setIsFollowing(false);
}); });
} else { } else {
addFollower(tableId, USERId).then(() => { addFollower(tableId, USERId).then(() => {
setFollowers((preValu) => preValu + 1); setFollowersCount((preValu) => preValu + 1);
setIsFollowing(true); setIsFollowing(true);
}); });
} }
@ -339,6 +345,12 @@ const MyDataDetailsPage = () => {
return freqJoin; return freqJoin;
}; };
const setFollowersData = (followers: Array<User>) => {
// need to check if already following or not with logedIn user id
setIsFollowing(followers.some(({ id }: { id: string }) => id === USERId));
setFollowersCount(followers?.length);
};
useEffect(() => { useEffect(() => {
getTableDetailsByFQN( getTableDetailsByFQN(
getPartialNameFromFQN(tableFQN, ['service', 'database', 'table'], '.'), getPartialNameFromFQN(tableFQN, ['service', 'database', 'table'], '.'),
@ -364,11 +376,8 @@ const MyDataDetailsPage = () => {
setTableId(id); setTableId(id);
setTier(getTierFromTableTags(tags)); setTier(getTierFromTableTags(tags));
setOwner(getOwnerFromId(owner?.id)); setOwner(getOwnerFromId(owner?.id));
// need to check if already following or not with logedIn user id setFollowers(followers);
setIsFollowing( setFollowersData(followers);
!!followers.filter(({ id }: { id: string }) => id === USERId).length
);
setFollowers(followers?.length);
getDatabase(database.id, 'service').then((resDB: AxiosResponse) => { getDatabase(database.id, 'service').then((resDB: AxiosResponse) => {
getServiceById('databaseServices', resDB.data.service?.id).then( getServiceById('databaseServices', resDB.data.service?.id).then(
(resService: AxiosResponse) => { (resService: AxiosResponse) => {
@ -429,12 +438,18 @@ const MyDataDetailsPage = () => {
}); });
}, [tableFQN]); }, [tableFQN]);
useEffect(() => {
if (isAuthDisabled && AppState.users.length && followers.length) {
setFollowersData(followers);
}
}, [AppState.users, followers]);
return ( return (
<PageContainer> <PageContainer>
<div className="tw-px-4 w-full"> <div className="tw-px-4 w-full">
<EntityPageInfo <EntityPageInfo
extraInfo={extraInfo} extraInfo={extraInfo}
followers={followers} followers={followersCount}
followHandler={followTable} followHandler={followTable}
isFollowing={isFollowing} isFollowing={isFollowing}
tags={tableTags} tags={tableTags}

View File

@ -1,8 +1,9 @@
import { AxiosResponse } from 'axios'; import { AxiosResponse } from 'axios';
import { compare } from 'fast-json-patch'; import { compare } from 'fast-json-patch';
import { ColumnTags, TableDetail, Topic } from 'Models'; import { ColumnTags, TableDetail, Topic, User } from 'Models';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import AppState from '../../AppState';
import { getServiceById } from '../../axiosAPIs/serviceAPI'; import { getServiceById } from '../../axiosAPIs/serviceAPI';
import { import {
addFollower, addFollower,
@ -20,6 +21,7 @@ import ManageTab from '../../components/my-data-details/ManageTab';
import SchemaEditor from '../../components/schema-editor/SchemaEditor'; import SchemaEditor from '../../components/schema-editor/SchemaEditor';
import { getServiceDetailsPath } from '../../constants/constants'; import { getServiceDetailsPath } from '../../constants/constants';
import { EntityType } from '../../enums/entity.enum'; import { EntityType } from '../../enums/entity.enum';
import { useAuth } from '../../hooks/authHooks';
import { import {
addToRecentViewed, addToRecentViewed,
getCurrentUserId, getCurrentUserId,
@ -36,13 +38,17 @@ import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
const MyTopicDetailPage = () => { const MyTopicDetailPage = () => {
const USERId = getCurrentUserId(); const USERId = getCurrentUserId();
const { isAuthDisabled } = useAuth();
const [tagList, setTagList] = useState<Array<string>>([]); const [tagList, setTagList] = useState<Array<string>>([]);
const { topicFQN } = useParams() as Record<string, string>; const { topicFQN } = useParams() as Record<string, string>;
const [topicDetails, setTopicDetails] = useState<Topic>({} as Topic); const [topicDetails, setTopicDetails] = useState<Topic>({} as Topic);
const [topicId, setTopicId] = useState<string>(''); const [topicId, setTopicId] = useState<string>('');
const [isLoading, setLoading] = useState<boolean>(false); const [isLoading, setLoading] = useState<boolean>(false);
const [description, setDescription] = useState<string>(''); const [description, setDescription] = useState<string>('');
const [followers, setFollowers] = useState<number>(0); const [followers, setFollowers] = useState<Array<User>>([]);
const [followersCount, setFollowersCount] = useState<number>(0);
const [isFollowing, setIsFollowing] = useState(false); const [isFollowing, setIsFollowing] = useState(false);
const [owner, setOwner] = useState<TableDetail['owner']>(); const [owner, setOwner] = useState<TableDetail['owner']>();
const [tier, setTier] = useState<string>(); const [tier, setTier] = useState<string>();
@ -108,6 +114,13 @@ const MyTopicDetailPage = () => {
} }
}); });
}; };
const setFollowersData = (followers: Array<User>) => {
// need to check if already following or not with logedIn user id
setIsFollowing(followers.some(({ id }: { id: string }) => id === USERId));
setFollowersCount(followers?.length);
};
const fetchTopicDetail = (topicFQN: string) => { const fetchTopicDetail = (topicFQN: string) => {
setLoading(true); setLoading(true);
getTopicByFqn(topicFQN, ['owner', 'service', 'followers', 'tags']).then( getTopicByFqn(topicFQN, ['owner', 'service', 'followers', 'tags']).then(
@ -133,7 +146,8 @@ const MyTopicDetailPage = () => {
setTopicId(id); setTopicId(id);
setDescription(description ?? ''); setDescription(description ?? '');
setSchemaType(schemaType); setSchemaType(schemaType);
setFollowers(followers?.length); setFollowers(followers);
setFollowersData(followers);
setOwner(getOwnerFromId(owner?.id)); setOwner(getOwnerFromId(owner?.id));
setTier(getTierFromTableTags(tags)); setTier(getTierFromTableTags(tags));
setTags(getTagsWithoutTier(tags)); setTags(getTagsWithoutTier(tags));
@ -143,9 +157,6 @@ const MyTopicDetailPage = () => {
setMaximumMessageSize(maximumMessageSize); setMaximumMessageSize(maximumMessageSize);
setReplicationFactor(replicationFactor); setReplicationFactor(replicationFactor);
setRetentionSize(retentionSize); setRetentionSize(retentionSize);
setIsFollowing(
followers.some(({ id }: { id: string }) => id === USERId)
);
getServiceById('messagingServices', service?.id).then( getServiceById('messagingServices', service?.id).then(
(serviceRes: AxiosResponse) => { (serviceRes: AxiosResponse) => {
setSlashedTopicName([ setSlashedTopicName([
@ -184,12 +195,12 @@ const MyTopicDetailPage = () => {
const followTopic = (): void => { const followTopic = (): void => {
if (isFollowing) { if (isFollowing) {
removeFollower(topicId, USERId).then(() => { removeFollower(topicId, USERId).then(() => {
setFollowers((preValu) => preValu - 1); setFollowersCount((preValu) => preValu - 1);
setIsFollowing(false); setIsFollowing(false);
}); });
} else { } else {
addFollower(topicId, USERId).then(() => { addFollower(topicId, USERId).then(() => {
setFollowers((preValu) => preValu + 1); setFollowersCount((preValu) => preValu + 1);
setIsFollowing(true); setIsFollowing(true);
}); });
} }
@ -313,6 +324,12 @@ const MyTopicDetailPage = () => {
fetchTopicDetail(topicFQN); fetchTopicDetail(topicFQN);
}, [topicFQN]); }, [topicFQN]);
useEffect(() => {
if (isAuthDisabled && AppState.users.length && followers.length) {
setFollowersData(followers);
}
}, [AppState.users, followers]);
useEffect(() => { useEffect(() => {
fetchTags(); fetchTags();
}, []); }, []);
@ -330,7 +347,7 @@ const MyTopicDetailPage = () => {
{ key: 'Tier', value: tier ? tier.split('.')[1] : '' }, { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
...getConfigDetails(), ...getConfigDetails(),
]} ]}
followers={followers} followers={followersCount}
followHandler={followTopic} followHandler={followTopic}
isFollowing={isFollowing} isFollowing={isFollowing}
tagList={tagList} tagList={tagList}