Page MenuHomePhabricator
Differential D5370

[lib] moved ModalOverlay component from web to lib
ClosedPublic
Actions

Authored by ginsu on Oct 14 2022, 8:01 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Mar 28, 2:05 PM
Unknown Object (File)
Sat, Mar 15, 8:56 PM
Unknown Object (File)
Sat, Mar 15, 8:56 PM
Unknown Object (File)
Sat, Mar 15, 8:55 PM
Unknown Object (File)
Sat, Mar 15, 8:48 PM
Unknown Object (File)
Fri, Mar 7, 5:41 AM
Unknown Object (File)
Thu, Mar 6, 3:51 PM
Unknown Object (File)
Thu, Mar 6, 5:49 AM
View All Files
Subscribers
• abosh
ashoat
atul
tomek

Details

Reviewers
atul
rohan
• abosh
• przemek
Commits
rCOMMa008b28c7137: [lib] moved ModalOverlay component from web to lib
Summary

moved modal-overlay.react and modal-overlay.css from web to lib.

Depends on D5364
Linear Task: ENG-2038

Test Plan

Please watch the video to see that there are no visual or performance regressions with the migration of ModalOverlay from web to lib

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Oct 14 2022, 8:01 AM
Herald added subscribers: • abosh, atul, tomek, ashoat. · View Herald TranscriptOct 14 2022, 8:01 AM
ginsu edited the test plan for this revision. (Show Details)Oct 14 2022, 8:06 AM
ginsu added reviewers: atul, rohan, • abosh, • przemek.
ginsu attached a referenced file: F199261: Screen Recording 2022-10-14 at 10.58.42 AM.mov. (Show Details)
ginsu edited the summary of this revision. (Show Details)
Harbormaster completed remote builds in B12802: Diff 17578.Oct 14 2022, 8:11 AM
ginsu requested review of this revision.Oct 14 2022, 8:11 AM
ginsu edited the summary of this revision. (Show Details)Oct 14 2022, 8:21 AM
ginsu added a parent revision: D5364: [web] update ModalOverlay component.
ginsu added a child revision: D5372: [lib] moved modal-provider.react from web to lib.Oct 14 2022, 8:32 AM
• przemek accepted this revision.Oct 14 2022, 8:42 AM

Ok

atul accepted this revision.Oct 14 2022, 11:57 AM

Super clean!

This revision is now accepted and ready to land.Oct 14 2022, 11:57 AM
Closed by commit rCOMMa008b28c7137: [lib] moved ModalOverlay component from web to lib (authored by ginsu). · Explain WhyOct 14 2022, 12:24 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMa008b28c7137: [lib] moved ModalOverlay component from web to lib.

Revision Contents
Changeset List

Diff 17590

View Options

lib/components/modal-overlay.css

// @flow // @flow
import t, { type TInterface } from 'tcomb'; import t, { type TInterface } from 'tcomb';
import type { import type {
UserSearchRequest, UserSearchRequest,
UserSearchResult, UserSearchResult,
ExactUserSearchRequest,
ExactUserSearchResult,
} from 'lib/types/search-types.js'; } from 'lib/types/search-types.js';
import { globalAccountUserInfoValidator } from 'lib/types/user-types.js'; import { globalAccountUserInfoValidator } from 'lib/types/user-types.js';
import { tShape } from 'lib/utils/validation-utils.js'; import { tShape } from 'lib/utils/validation-utils.js';
import { searchForUsers } from '../search/users.js'; import { searchForUsers, searchForUser } from '../search/users.js';
import type { Viewer } from '../session/viewer.js'; import type { Viewer } from '../session/viewer.js';
import { validateInput, validateOutput } from '../utils/validation-utils.js'; import { validateInput, validateOutput } from '../utils/validation-utils.js';
const userSearchRequestInputValidator = tShape<UserSearchRequest>({ const userSearchRequestInputValidator = tShape<UserSearchRequest>({
prefix: t.maybe(t.String), prefix: t.maybe(t.String),
}); });
export const userSearchResultValidator: TInterface<UserSearchResult> = export const userSearchResultValidator: TInterface<UserSearchResult> =
Show All 14 Lines): Promise<UserSearchResult> {
const result = { userInfos: searchResults }; const result = { userInfos: searchResults };
return validateOutput( return validateOutput(
viewer.platformDetails, viewer.platformDetails,
userSearchResultValidator, userSearchResultValidator,
result, result,
); );
} }
export { userSearchResponder }; const exactUserSearchRequestInputValidator = tShape<ExactUserSearchRequest>({
username: t.String,
});
const exactUserSearchResultValidator = tShape<ExactUserSearchResult>({
userInfo: t.maybe(globalAccountUserInfoValidator),
});
async function exactUserSearchResponder(
viewer: Viewer,
input: mixed,
): Promise<ExactUserSearchResult> {
const request = await validateInput(
viewer,
exactUserSearchRequestInputValidator,
input,
);
const searchResult = await searchForUser(request.username);
const result = { userInfo: searchResult };
return validateOutput(
viewer.platformDetails,
exactUserSearchResultValidator,
result,
);
}
export { userSearchResponder, exactUserSearchResponder };
View Options

lib/components/modal-overlay.react.js

// @flow // @flow
import t, { type TInterface } from 'tcomb'; import t, { type TInterface } from 'tcomb';
import type { import type {
UserSearchRequest, UserSearchRequest,
UserSearchResult, UserSearchResult,
ExactUserSearchRequest,
ExactUserSearchResult,
} from 'lib/types/search-types.js'; } from 'lib/types/search-types.js';
import { globalAccountUserInfoValidator } from 'lib/types/user-types.js'; import { globalAccountUserInfoValidator } from 'lib/types/user-types.js';
import { tShape } from 'lib/utils/validation-utils.js'; import { tShape } from 'lib/utils/validation-utils.js';
import { searchForUsers } from '../search/users.js'; import { searchForUsers, searchForUser } from '../search/users.js';
import type { Viewer } from '../session/viewer.js'; import type { Viewer } from '../session/viewer.js';
import { validateInput, validateOutput } from '../utils/validation-utils.js'; import { validateInput, validateOutput } from '../utils/validation-utils.js';
const userSearchRequestInputValidator = tShape<UserSearchRequest>({ const userSearchRequestInputValidator = tShape<UserSearchRequest>({
prefix: t.maybe(t.String), prefix: t.maybe(t.String),
}); });
export const userSearchResultValidator: TInterface<UserSearchResult> = export const userSearchResultValidator: TInterface<UserSearchResult> =
Show All 14 Lines): Promise<UserSearchResult> {
const result = { userInfos: searchResults }; const result = { userInfos: searchResults };
return validateOutput( return validateOutput(
viewer.platformDetails, viewer.platformDetails,
userSearchResultValidator, userSearchResultValidator,
result, result,
); );
} }
export { userSearchResponder }; const exactUserSearchRequestInputValidator = tShape<ExactUserSearchRequest>({
username: t.String,
});
const exactUserSearchResultValidator = tShape<ExactUserSearchResult>({
userInfo: t.maybe(globalAccountUserInfoValidator),
});
async function exactUserSearchResponder(
viewer: Viewer,
input: mixed,
): Promise<ExactUserSearchResult> {
const request = await validateInput(
viewer,
exactUserSearchRequestInputValidator,
input,
);
const searchResult = await searchForUser(request.username);
const result = { userInfo: searchResult };
return validateOutput(
viewer.platformDetails,
exactUserSearchResultValidator,
result,
);
}
export { userSearchResponder, exactUserSearchResponder };
View Options

web/modals/modal-overlay.css

// @flow // @flow
import t, { type TInterface } from 'tcomb'; import t, { type TInterface } from 'tcomb';
import type { import type {
UserSearchRequest, UserSearchRequest,
UserSearchResult, UserSearchResult,
ExactUserSearchRequest,
ExactUserSearchResult,
} from 'lib/types/search-types.js'; } from 'lib/types/search-types.js';
import { globalAccountUserInfoValidator } from 'lib/types/user-types.js'; import { globalAccountUserInfoValidator } from 'lib/types/user-types.js';
import { tShape } from 'lib/utils/validation-utils.js'; import { tShape } from 'lib/utils/validation-utils.js';
import { searchForUsers } from '../search/users.js'; import { searchForUsers, searchForUser } from '../search/users.js';
import type { Viewer } from '../session/viewer.js'; import type { Viewer } from '../session/viewer.js';
import { validateInput, validateOutput } from '../utils/validation-utils.js'; import { validateInput, validateOutput } from '../utils/validation-utils.js';
const userSearchRequestInputValidator = tShape<UserSearchRequest>({ const userSearchRequestInputValidator = tShape<UserSearchRequest>({
prefix: t.maybe(t.String), prefix: t.maybe(t.String),
}); });
export const userSearchResultValidator: TInterface<UserSearchResult> = export const userSearchResultValidator: TInterface<UserSearchResult> =
Show All 14 Lines): Promise<UserSearchResult> {
const result = { userInfos: searchResults }; const result = { userInfos: searchResults };
return validateOutput( return validateOutput(
viewer.platformDetails, viewer.platformDetails,
userSearchResultValidator, userSearchResultValidator,
result, result,
); );
} }
export { userSearchResponder }; const exactUserSearchRequestInputValidator = tShape<ExactUserSearchRequest>({
username: t.String,
});
const exactUserSearchResultValidator = tShape<ExactUserSearchResult>({
userInfo: t.maybe(globalAccountUserInfoValidator),
});
async function exactUserSearchResponder(
viewer: Viewer,
input: mixed,
): Promise<ExactUserSearchResult> {
const request = await validateInput(
viewer,
exactUserSearchRequestInputValidator,
input,
);
const searchResult = await searchForUser(request.username);
const result = { userInfo: searchResult };
return validateOutput(
viewer.platformDetails,
exactUserSearchResultValidator,
result,
);
}
export { userSearchResponder, exactUserSearchResponder };
View Options

web/modals/modal-overlay.react.js

// @flow // @flow
import t, { type TInterface } from 'tcomb'; import t, { type TInterface } from 'tcomb';
import type { import type {
UserSearchRequest, UserSearchRequest,
UserSearchResult, UserSearchResult,
ExactUserSearchRequest,
ExactUserSearchResult,
} from 'lib/types/search-types.js'; } from 'lib/types/search-types.js';
import { globalAccountUserInfoValidator } from 'lib/types/user-types.js'; import { globalAccountUserInfoValidator } from 'lib/types/user-types.js';
import { tShape } from 'lib/utils/validation-utils.js'; import { tShape } from 'lib/utils/validation-utils.js';
import { searchForUsers } from '../search/users.js'; import { searchForUsers, searchForUser } from '../search/users.js';
import type { Viewer } from '../session/viewer.js'; import type { Viewer } from '../session/viewer.js';
import { validateInput, validateOutput } from '../utils/validation-utils.js'; import { validateInput, validateOutput } from '../utils/validation-utils.js';
const userSearchRequestInputValidator = tShape<UserSearchRequest>({ const userSearchRequestInputValidator = tShape<UserSearchRequest>({
prefix: t.maybe(t.String), prefix: t.maybe(t.String),
}); });
export const userSearchResultValidator: TInterface<UserSearchResult> = export const userSearchResultValidator: TInterface<UserSearchResult> =
Show All 14 Lines): Promise<UserSearchResult> {
const result = { userInfos: searchResults }; const result = { userInfos: searchResults };
return validateOutput( return validateOutput(
viewer.platformDetails, viewer.platformDetails,
userSearchResultValidator, userSearchResultValidator,
result, result,
); );
} }
export { userSearchResponder }; const exactUserSearchRequestInputValidator = tShape<ExactUserSearchRequest>({
username: t.String,
});
const exactUserSearchResultValidator = tShape<ExactUserSearchResult>({
userInfo: t.maybe(globalAccountUserInfoValidator),
});
async function exactUserSearchResponder(
viewer: Viewer,
input: mixed,
): Promise<ExactUserSearchResult> {
const request = await validateInput(
viewer,
exactUserSearchRequestInputValidator,
input,
);
const searchResult = await searchForUser(request.username);
const result = { userInfo: searchResult };
return validateOutput(
viewer.platformDetails,
exactUserSearchResultValidator,
result,
);
}
export { userSearchResponder, exactUserSearchResponder };
View Options

web/modals/modal.react.js

// @flow // @flow
import t, { type TInterface } from 'tcomb'; import t, { type TInterface } from 'tcomb';
import type { import type {
UserSearchRequest, UserSearchRequest,
UserSearchResult, UserSearchResult,
ExactUserSearchRequest,
ExactUserSearchResult,
} from 'lib/types/search-types.js'; } from 'lib/types/search-types.js';
import { globalAccountUserInfoValidator } from 'lib/types/user-types.js'; import { globalAccountUserInfoValidator } from 'lib/types/user-types.js';
import { tShape } from 'lib/utils/validation-utils.js'; import { tShape } from 'lib/utils/validation-utils.js';
import { searchForUsers } from '../search/users.js'; import { searchForUsers, searchForUser } from '../search/users.js';
import type { Viewer } from '../session/viewer.js'; import type { Viewer } from '../session/viewer.js';
import { validateInput, validateOutput } from '../utils/validation-utils.js'; import { validateInput, validateOutput } from '../utils/validation-utils.js';
const userSearchRequestInputValidator = tShape<UserSearchRequest>({ const userSearchRequestInputValidator = tShape<UserSearchRequest>({
prefix: t.maybe(t.String), prefix: t.maybe(t.String),
}); });
export const userSearchResultValidator: TInterface<UserSearchResult> = export const userSearchResultValidator: TInterface<UserSearchResult> =
Show All 14 Lines): Promise<UserSearchResult> {
const result = { userInfos: searchResults }; const result = { userInfos: searchResults };
return validateOutput( return validateOutput(
viewer.platformDetails, viewer.platformDetails,
userSearchResultValidator, userSearchResultValidator,
result, result,
); );
} }
export { userSearchResponder }; const exactUserSearchRequestInputValidator = tShape<ExactUserSearchRequest>({
username: t.String,
});
const exactUserSearchResultValidator = tShape<ExactUserSearchResult>({
userInfo: t.maybe(globalAccountUserInfoValidator),
});
async function exactUserSearchResponder(
viewer: Viewer,
input: mixed,
): Promise<ExactUserSearchResult> {
const request = await validateInput(
viewer,
exactUserSearchRequestInputValidator,
input,
);
const searchResult = await searchForUser(request.username);
const result = { userInfo: searchResult };
return validateOutput(
viewer.platformDetails,
exactUserSearchResultValidator,
result,
);
}
export { userSearchResponder, exactUserSearchResponder };