yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-30 11:56:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: rename useInfiniteScroll to useElementInView and add return type (#11418)

Browse Source
This commit is contained in:
Sachin Chaurasiya 2023-05-05 16:25:49 +05:30 committed by GitHub
parent 1829462bdf
commit e5b5095ad5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
View File

@ -30,7 +30,7 @@ import {
ThreadType,
} from '../../../generated/entity/feed/thread';
import { Paging } from '../../../generated/type/paging';
import { useInfiniteScroll } from '../../../hooks/useInfiniteScroll';
import { useElementInView } from '../../../hooks/useElementInView';
import { getEntityField } from '../../../utils/FeedUtils';
import { showErrorToast } from '../../../utils/ToastUtils';
import ErrorPlaceHolder from '../../common/error-with-placeholder/ErrorPlaceHolder';
@ -67,7 +67,7 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
confirmStateInitialValue
);
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [paging, setPaging] = useState<Paging>({} as Paging);
@ -230,7 +230,7 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
}, [threadLink, threadType, taskStatus]);
useEffect(() => {
fetchMoreThread(isInView as boolean, paging, isThreadLoading);
fetchMoreThread(isInView, paging, isThreadLoading);
}, [paging, isThreadLoading, isInView]);
return (

6
openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
View File

@ -42,7 +42,7 @@ import { Dashboard } from '../../generated/entity/data/dashboard';
import { ThreadType } from '../../generated/entity/feed/thread';
import { Paging } from '../../generated/type/paging';
import { LabelType, State, TagLabel } from '../../generated/type/tagLabel';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import {
getCurrentUserId,
getEntityPlaceHolder,
@ -123,7 +123,7 @@ const DashboardDetails = ({
const [isTagLoading, setIsTagLoading] = useState<boolean>(false);
const [threadLink, setThreadLink] = useState<string>('');
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [threadType, setThreadType] = useState<ThreadType>(
ThreadType.Conversation
);
@ -556,7 +556,7 @@ const DashboardDetails = ({
};
useEffect(() => {
fetchMoreThread(isInView as boolean, paging, isEntityThreadLoading);
fetchMoreThread(isInView, paging, isEntityThreadLoading);
}, [paging, isEntityThreadLoading, isInView]);
const handleFeedFilterChange = useCallback((feedType, threadType) => {

6
openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.component.tsx
View File

@ -29,7 +29,7 @@ import { EntityInfo, EntityType } from 'enums/entity.enum';
import { ServiceCategory } from 'enums/service.enum';
import { OwnerType } from 'enums/user.enum';
import { Paging } from 'generated/type/paging';
import { useInfiniteScroll } from 'hooks/useInfiniteScroll';
import { useElementInView } from 'hooks/useElementInView';
import { toString } from 'lodash';
import { ExtraInfo } from 'Models';
import { DATA_MODELS_DETAILS_TABS } from 'pages/DataModelPage/DataModelsInterface';
@ -76,7 +76,7 @@ const DataModelDetails = ({
}: DataModelDetailsProps) => {
const { t } = useTranslation();
const history = useHistory();
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [isEditDescription, setIsEditDescription] = useState<boolean>(false);
const [threadLink, setThreadLink] = useState<string>('');
@ -212,7 +212,7 @@ const DataModelDetails = ({
};
useEffect(() => {
fetchMoreThread(isInView as boolean, paging, isEntityThreadLoading);
fetchMoreThread(isInView, paging, isEntityThreadLoading);
}, [paging, isEntityThreadLoading, isInView]);
return (

6
openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
View File

@ -52,7 +52,7 @@ import {
import { ThreadType } from '../../generated/entity/feed/thread';
import { Paging } from '../../generated/type/paging';
import { LabelType, State } from '../../generated/type/tagLabel';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import {
getCurrentUserId,
getEntityPlaceHolder,
@ -133,7 +133,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
);
const [queryCount, setQueryCount] = useState(0);
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [tablePermissions, setTablePermissions] = useState<OperationPermission>(
DEFAULT_ENTITY_PERMISSION
@ -624,7 +624,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
}, [usageSummary]);
useEffect(() => {
fetchMoreThread(isInView as boolean, paging, isEntityThreadLoading);
fetchMoreThread(isInView, paging, isEntityThreadLoading);
}, [paging, isEntityThreadLoading, isInView]);
const handleFeedFilterChange = useCallback((feedType, threadType) => {

6
openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
View File

@ -48,7 +48,7 @@ import { ThreadType } from '../../generated/entity/feed/thread';
import { EntityReference } from '../../generated/type/entityReference';
import { Paging } from '../../generated/type/paging';
import { LabelType, State, TagLabel } from '../../generated/type/tagLabel';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import {
getEmptyPlaceholder,
getEntityPlaceHolder,
@ -138,7 +138,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
}
}, [mlModelDetail.id, getEntityPermission, setPipelinePermissions]);
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
useEffect(() => {
if (mlModelDetail.id) {
@ -514,7 +514,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
}, []);
useEffect(() => {
fetchMoreThread(isInView as boolean, paging, isEntityThreadLoading);
fetchMoreThread(isInView, paging, isEntityThreadLoading);
}, [paging, isEntityThreadLoading, isInView]);
useEffect(() => {

6
openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
View File

@ -34,7 +34,7 @@ import { observerOptions } from '../../constants/Mydata.constants';
import { FeedFilter } from '../../enums/mydata.enum';
import { ThreadType } from '../../generated/entity/feed/thread';
import { Paging } from '../../generated/type/paging';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import SVGIcons, { Icons } from '../../utils/SvgUtils';
import ActivityFeedList from '../ActivityFeed/ActivityFeedList/ActivityFeedList';
import ErrorPlaceHolderES from '../common/error-with-placeholder/ErrorPlaceHolderES';
@ -67,7 +67,7 @@ const MyData: React.FC<MyDataProps> = ({
}: MyDataProps): React.ReactElement => {
const { t } = useTranslation();
const isMounted = useRef(false);
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [feedFilter, setFeedFilter] = useState(FeedFilter.OWNER);
const [threadType, setThreadType] = useState<ThreadType>();
const [showWelcomeScreen, setShowWelcomeScreen] = useState(false);
@ -235,7 +235,7 @@ const MyData: React.FC<MyDataProps> = ({
);
useEffect(() => {
fetchMoreFeed(Boolean(isInView), paging);
fetchMoreFeed(isInView, paging);
}, [isInView, paging]);
useEffect(() => {

10
openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
View File

@ -68,7 +68,7 @@ import { Post, Thread, ThreadType } from '../../generated/entity/feed/thread';
import { EntityReference } from '../../generated/type/entityReference';
import { Paging } from '../../generated/type/paging';
import { LabelType, State } from '../../generated/type/tagLabel';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import { EntityFieldThreadCount } from '../../interface/feed.interface';
import {
getCountBadge,
@ -178,7 +178,7 @@ const PipelineDetails = ({
const [threadLink, setThreadLink] = useState<string>('');
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [selectedExecution] = useState<PipelineStatus | undefined>(
pipelineStatus
);
@ -477,11 +477,7 @@ const PipelineDetails = ({
}, [followers]);
useEffect(() => {
fetchMoreThread(
isInView as boolean,
entityThreadPaging,
entityThreadLoading
);
fetchMoreThread(isInView, entityThreadPaging, entityThreadLoading);
}, [entityThreadPaging, entityThreadLoading, isInView]);
const handleFeedFilterChange = useCallback((feedFilter, threadType) => {

6
openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
View File

@ -35,7 +35,7 @@ import { Topic } from '../../generated/entity/data/topic';
import { ThreadType } from '../../generated/entity/feed/thread';
import { Paging } from '../../generated/type/paging';
import { LabelType, State } from '../../generated/type/tagLabel';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import {
getCurrentUserId,
getEntityPlaceHolder,
@ -95,7 +95,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
const { t } = useTranslation();
const [isEdit, setIsEdit] = useState(false);
const [threadLink, setThreadLink] = useState<string>('');
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [threadType, setThreadType] = useState<ThreadType>(
ThreadType.Conversation
);
@ -418,7 +418,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
};
useEffect(() => {
fetchMoreThread(isInView as boolean, paging, isEntityThreadLoading);
fetchMoreThread(isInView, paging, isEntityThreadLoading);
}, [paging, isEntityThreadLoading, isInView]);
const handleFeedFilterChange = useCallback((feedFilter, threadType) => {

6
openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
View File

@ -63,7 +63,7 @@ import { ThreadType } from '../../generated/entity/feed/thread';
import { Role } from '../../generated/entity/teams/role';
import { EntityReference } from '../../generated/entity/teams/user';
import { Paging } from '../../generated/type/paging';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import { getNonDeletedTeams } from '../../utils/CommonUtils';
import {
getImageWithResolutionAndFallback,
@ -118,7 +118,7 @@ const Users = ({
onSwitchChange,
}: Props) => {
const [activeTab, setActiveTab] = useState(getUserCurrentTab(tab));
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [displayName, setDisplayName] = useState(userData.displayName);
const [isDisplayNameEdit, setIsDisplayNameEdit] = useState(false);
const [isDescriptionEdit, setIsDescriptionEdit] = useState(false);
@ -801,7 +801,7 @@ const Users = ({
};
useEffect(() => {
fetchMoreFeed(isInView as boolean, paging, isFeedLoading);
fetchMoreFeed(isInView, paging, isFeedLoading);
}, [isInView, paging, isFeedLoading]);
useEffect(() => {

22
openmetadata-ui/src/main/resources/ui/src/hooks/useElementInView.test.ts Normal file
View File

@ -0,0 +1,22 @@
/*
* Copyright 2023 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { useElementInView } from './useElementInView';
describe('useElementInView', () => {
it('should return an array with a ref object and a boolean', () => {
const { result } = renderHook(() => useElementInView({}));
expect(result.current).toEqual([expect.any(Object), expect.any(Boolean)]);
});
});

6
openmetadata-ui/src/main/resources/ui/src/hooks/useInfiniteScroll.ts → openmetadata-ui/src/main/resources/ui/src/hooks/useElementInView.ts
View File

@ -11,9 +11,11 @@
* limitations under the License.
*/
import { useEffect, useRef, useState } from 'react';
import { RefObject, useEffect, useRef, useState } from 'react';
export const useInfiniteScroll = (options: IntersectionObserverInit) => {
export const useElementInView = (
options: IntersectionObserverInit
): [RefObject<Element>, boolean] => {
const elementRef = useRef<Element>(null);
const [isInView, setIsInView] = useState(false);

6
openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
View File

@ -95,7 +95,7 @@ import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
import { Table } from '../../generated/entity/data/table';
import { Post, Thread } from '../../generated/entity/feed/thread';
import { Paging } from '../../generated/type/paging';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import { EntityFieldThreadCount } from '../../interface/feed.interface';
import { getPartialNameFromTableFQN } from '../../utils/CommonUtils';
import {
@ -161,7 +161,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
const [paging, setPaging] = useState<Paging>({} as Paging);
const [currentTablesPage, setCurrentTablesPage] =
useState<number>(INITIAL_PAGING_VALUE);
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const history = useHistory();
const isMounting = useRef(true);
@ -750,7 +750,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
}, [tab]);
useEffect(() => {
fetchMoreFeed(isInView as boolean, paging, isentityThreadLoading);
fetchMoreFeed(isInView, paging, isentityThreadLoading);
}, [isInView, paging, isentityThreadLoading]);
useEffect(() => {

6
openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
View File

@ -92,7 +92,7 @@ import { Post, Thread } from '../../generated/entity/feed/thread';
import { EntityReference } from '../../generated/entity/teams/user';
import { UsageDetails } from '../../generated/type/entityUsage';
import { Paging } from '../../generated/type/paging';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { useElementInView } from '../../hooks/useElementInView';
import { EntityFieldThreadCount } from '../../interface/feed.interface';
import {
databaseDetailsTabs,
@ -160,7 +160,7 @@ const DatabaseDetails: FunctionComponent = () => {
const [threadLink, setThreadLink] = useState<string>('');
const [paging, setPaging] = useState<Paging>({} as Paging);
const [elementRef, isInView] = useInfiniteScroll(observerOptions);
const [elementRef, isInView] = useElementInView(observerOptions);
const [currentPage, setCurrentPage] = useState(1);
const [isEditable, setIsEditable] = useState<boolean>(false);
const [tagList, setTagList] = useState<Array<TagOption>>([]);
@ -606,7 +606,7 @@ const DatabaseDetails: FunctionComponent = () => {
}, [tab]);
useEffect(() => {
fetchMoreFeed(isInView as boolean, paging, isentityThreadLoading);
fetchMoreFeed(isInView, paging, isentityThreadLoading);
}, [isInView, paging, isentityThreadLoading]);
useEffect(() => {