ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactoring] Right Column: Tiny renamings

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-02-08 22:29:35 +01:00
parent 9bdaa5fdbc
commit 6edb4c3fab
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/right/Profile.tsx
View File

@ -263,7 +263,7 @@ const Profile: FC<OwnProps & StateProps> = ({
} else if (!viewportIds) { } else if (!viewportIds) {
renderingDelay = SLIDE_TRANSITION_DURATION; renderingDelay = SLIDE_TRANSITION_DURATION;
} }
const canRenderContents = useAsyncRendering([chatId, resultType], renderingDelay); const canRenderContent = useAsyncRendering([chatId, resultType], renderingDelay);
function getMemberContextAction(memberId: string) { function getMemberContextAction(memberId: string) {
return memberId === currentUserId || !canDeleteMembers ? undefined : [{ return memberId === currentUserId || !canDeleteMembers ? undefined : [{
@ -275,9 +275,9 @@ const Profile: FC<OwnProps & StateProps> = ({
}]; }];
} }
function renderSharedMedia() { function renderContent() {
if (!viewportIds || !canRenderContents || !chatMessages) { if (!viewportIds || !canRenderContent || !chatMessages) {
const noSpinner = isFirstTab && !canRenderContents; const noSpinner = isFirstTab && !canRenderContent;
return ( return (
<div className="content empty-list"> <div className="content empty-list">
@ -422,10 +422,10 @@ const Profile: FC<OwnProps & StateProps> = ({
ref={containerRef} ref={containerRef}
className="Profile custom-scroll" className="Profile custom-scroll"
itemSelector={buildInfiniteScrollItemSelector(resultType)} itemSelector={buildInfiniteScrollItemSelector(resultType)}
items={canRenderContents ? viewportIds : undefined} items={canRenderContent ? viewportIds : undefined}
cacheBuster={cacheBuster} cacheBuster={cacheBuster}
sensitiveArea={PROFILE_SENSITIVE_AREA} sensitiveArea={PROFILE_SENSITIVE_AREA}
preloadBackwards={canRenderContents ? (resultType === 'members' ? MEMBERS_SLICE : SHARED_MEDIA_SLICE) : 0} preloadBackwards={canRenderContent ? (resultType === 'members' ? MEMBERS_SLICE : SHARED_MEDIA_SLICE) : 0}
// To prevent scroll jumps caused by reordering member list // To prevent scroll jumps caused by reordering member list
noScrollRestoreOnTop noScrollRestoreOnTop
noFastList noFastList
@ -447,7 +447,7 @@ const Profile: FC<OwnProps & StateProps> = ({
onStart={applyTransitionFix} onStart={applyTransitionFix}
onStop={handleTransitionStop} onStop={handleTransitionStop}
> >
{renderSharedMedia} {renderContent}
</Transition> </Transition>
<TabList big activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} /> <TabList big activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} />
</div> </div>

12
src/components/right/RightColumn.tsx
View File

@ -16,8 +16,8 @@ import {
} from '../../modules/selectors'; } from '../../modules/selectors';
import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps'; import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps';
import useWindowSize from '../../hooks/useWindowSize'; import useWindowSize from '../../hooks/useWindowSize';
import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
import useHistoryBack from '../../hooks/useHistoryBack'; import useHistoryBack from '../../hooks/useHistoryBack';
import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
import RightHeader from './RightHeader'; import RightHeader from './RightHeader';
import Profile from './Profile'; import Profile from './Profile';
@ -41,7 +41,7 @@ type StateProps = {
nextManagementScreen?: ManagementScreens; nextManagementScreen?: ManagementScreens;
}; };
const COLUMN_CLOSE_DELAY_MS = 300; const CLOSE_ANIMATION_DURATION = 300;
const MAIN_SCREENS_COUNT = Object.keys(RightColumnContent).length / 2; const MAIN_SCREENS_COUNT = Object.keys(RightColumnContent).length / 2;
const MANAGEMENT_SCREENS_COUNT = Object.keys(ManagementScreens).length / 2; const MANAGEMENT_SCREENS_COUNT = Object.keys(ManagementScreens).length / 2;
@ -194,7 +194,7 @@ const RightColumn: FC<StateProps> = ({
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setShouldSkipTransition(!isOpen); setShouldSkipTransition(!isOpen);
}, COLUMN_CLOSE_DELAY_MS); }, CLOSE_ANIMATION_DURATION);
}, [isOpen]); }, [isOpen]);
useEffect(() => { useEffect(() => {
@ -239,9 +239,10 @@ const RightColumn: FC<StateProps> = ({
case RightColumnContent.AddingMembers: case RightColumnContent.AddingMembers:
return ( return (
<AddChatMembers <AddChatMembers
key={chatId!}
chatId={chatId!} chatId={chatId!}
onNextStep={handleAppendingChatMembers}
isActive={isOpen && isActive} isActive={isOpen && isActive}
onNextStep={handleAppendingChatMembers}
onClose={close} onClose={close}
/> />
); );
@ -261,13 +262,14 @@ const RightColumn: FC<StateProps> = ({
case RightColumnContent.Management: case RightColumnContent.Management:
return ( return (
<Management <Management
key={chatId!}
chatId={chatId!} chatId={chatId!}
currentScreen={managementScreen} currentScreen={managementScreen}
isPromotedByCurrentUser={isPromotedByCurrentUser} isPromotedByCurrentUser={isPromotedByCurrentUser}
selectedChatMemberId={selectedChatMemberId} selectedChatMemberId={selectedChatMemberId}
isActive={isOpen && isActive}
onScreenSelect={setManagementScreen} onScreenSelect={setManagementScreen}
onChatMemberSelect={handleSelectChatMember} onChatMemberSelect={handleSelectChatMember}
isActive={isOpen && isActive}
onClose={close} onClose={close}
/> />
); );