diff --git a/public/locales/en.json b/public/locales/en.json index 439e1ab1fa..ee8d6f96dd 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -189,7 +189,9 @@ "wesiteLink": "Website Link", "logo": "Logo", "social": "Social Media Links", - "url": "Enter url" + "url": "Enter url", + "profileChangedMsg": "Successfully updated the Profile Details.", + "resetData": "Successfully reset the Profile Details." }, "dashboard": { "title": "Dashboard", diff --git a/public/locales/fr.json b/public/locales/fr.json index 10381da841..b24a4c2e47 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -183,7 +183,9 @@ "wesiteLink": "Lien de site Web", "logo": "Logo", "social": "Liens vers les réseaux sociaux", - "url": "Entrer l'URL" + "url": "Entrer l'URL", + "profileChangedMsg": "Les détails du profil ont été mis à jour avec succès.", + "resetData": "Réinitialisez avec succès les détails du profil." }, "dashboard": { "title": "Tableau de bord", diff --git a/public/locales/hi.json b/public/locales/hi.json index 0fe61c066b..024931471e 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -183,7 +183,9 @@ "wesiteLink": "वेबसाइट की लिंक", "logo": "प्रतीक चिन्ह", "social": "सोशल मीडिया लिंक", - "url": "यू आर एल दर्ज करो" + "url": "यू आर एल दर्ज करो", + "profileChangedMsg": "प्रोफ़ाइल विवरण सफलतापूर्वक अपडेट किया गया।", + "resetData": "प्रोफ़ाइल विवरण सफलतापूर्वक रीसेट किया गया।" }, "dashboard": { "title": "डैशबोर्ड", diff --git a/public/locales/sp.json b/public/locales/sp.json index fc88e62f66..2b74255c7f 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -183,7 +183,9 @@ "wesiteLink": "Enlace de página web", "logo": "Logo", "social": "Enlaces de redes sociales", - "url": "Introducir URL" + "url": "Introducir URL", + "profileChangedMsg": "Se actualizaron correctamente los detalles del perfil.", + "resetData": "Restablezca correctamente los detalles del perfil." }, "dashboard": { "title": "Panel de", diff --git a/public/locales/zh.json b/public/locales/zh.json index dda77ea8df..a8c12b9b83 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -233,7 +233,9 @@ "wesiteLink": "网站链接", "logo": "标识", "social": "社交媒体链接", - "url": "输入网址" + "url": "输入网址", + "profileChangedMsg": "已成功更新个人资料详细信息。", + "resetData": "成功重置个人资料详细信息。" }, "dashboard": { "title": "儀表板", diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts index 5a5c74af90..92a32fc89f 100644 --- a/src/GraphQl/Mutations/mutations.ts +++ b/src/GraphQl/Mutations/mutations.ts @@ -580,9 +580,15 @@ export const REGISTER_EVENT = gql` } `; -export const UPLOAD_PRELOGIN_IMAGERY = gql` - mutation uploadPreLoginImagery($data: PreLoginImageryInput!) { - uploadPreLoginImagery(data: $data) +export const UPDATE_COMMUNITY = gql` + mutation updateCommunity($data: UpdateCommunityInput!) { + updateCommunity(data: $data) + } +`; + +export const RESET_COMMUNITY = gql` + mutation resetCommunity { + resetCommunity } `; diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts index bb83002f57..2e833c34ac 100644 --- a/src/GraphQl/Queries/Queries.ts +++ b/src/GraphQl/Queries/Queries.ts @@ -653,6 +653,27 @@ export const USERS_CONNECTION_LIST = gql` } `; +export const GET_COMMUNITY_DATA = gql` + query getCommunityData { + getCommunityData { + _id + websiteLink + name + logoUrl + socialMediaUrls { + facebook + gitHub + instagram + twitter + linkedIn + youTube + reddit + slack + } + } + } +`; + // get the list of Action Item Categories export { ACTION_ITEM_CATEGORY_LIST } from './ActionItemCategoryQueries'; diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx index b8113ff983..854fa5e22a 100644 --- a/src/components/OrgListCard/OrgListCard.tsx +++ b/src/components/OrgListCard/OrgListCard.tsx @@ -98,7 +98,6 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element { fill="var(--bs-white)" width={12} className={styles.flaskIcon} - data-testid="icon" title={t('sampleOrganization')} /> )} diff --git a/src/constants.ts b/src/constants.ts index 3afe129597..bddae030fa 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -6,17 +6,48 @@ import { SlackLogo, TwitterLogo, YoutubeLogo, + RedditLogo, } from 'assets/svgs/social-icons'; export const socialMediaLinks = [ - { href: 'https://www.facebook.com/palisadoesproject', logo: FacebookLogo }, - { href: 'https://twitter.com/palisadoesorg?lang=en', logo: TwitterLogo }, - { href: 'https://www.linkedin.com/company/palisadoes/', logo: LinkedInLogo }, - { href: 'https://github.com/PalisadoesFoundation', logo: GithubLogo }, { + tag: 'facebook', + href: 'https://www.facebook.com/palisadoesproject', + logo: FacebookLogo, + }, + { + tag: 'twitter', + href: 'https://twitter.com/palisadoesorg?lang=en', + logo: TwitterLogo, + }, + { + tag: 'linkedIn', + href: 'https://www.linkedin.com/company/palisadoes/', + logo: LinkedInLogo, + }, + { + tag: 'gitHub', + href: 'https://github.com/PalisadoesFoundation', + logo: GithubLogo, + }, + { + tag: 'youTube', href: 'https://www.youtube.com/@PalisadoesOrganization', logo: YoutubeLogo, }, - { href: 'https://www.palisadoes.org/slack', logo: SlackLogo }, - { href: 'https://www.instagram.com/palisadoes/', logo: InstagramLogo }, + { + tag: 'slack', + href: 'https://www.palisadoes.org/slack', + logo: SlackLogo, + }, + { + tag: 'instagram', + href: 'https://www.instagram.com/palisadoes/', + logo: InstagramLogo, + }, + { + tag: 'reddit', + href: '', + logo: RedditLogo, + }, ]; diff --git a/src/screens/CommunityProfile/CommunityProfile.test.tsx b/src/screens/CommunityProfile/CommunityProfile.test.tsx index 073f1f5059..6f1717bf30 100644 --- a/src/screens/CommunityProfile/CommunityProfile.test.tsx +++ b/src/screens/CommunityProfile/CommunityProfile.test.tsx @@ -2,11 +2,152 @@ import React from 'react'; import { MockedProvider } from '@apollo/react-testing'; import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import 'jest-localstorage-mock'; import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; +import { StaticMockLink } from 'utils/StaticMockLink'; import CommunityProfile from './CommunityProfile'; import i18n from 'utils/i18nForTest'; +import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries'; +import { BrowserRouter } from 'react-router-dom'; +import { toast } from 'react-toastify'; +import { RESET_COMMUNITY, UPDATE_COMMUNITY } from 'GraphQl/Mutations/mutations'; + +const MOCKS1 = [ + { + request: { + query: GET_COMMUNITY_DATA, + }, + result: { + data: { + getCommunityData: null, + }, + }, + }, + { + request: { + query: UPDATE_COMMUNITY, + variables: { + data: { + name: 'Name', + websiteLink: 'https://website.com', + logo: 'data:image/png;base64,bG9nbw==', + socialMediaUrls: { + facebook: 'https://socialurl.com', + instagram: 'https://socialurl.com', + twitter: 'https://socialurl.com', + linkedIn: 'https://socialurl.com', + gitHub: 'https://socialurl.com', + youTube: 'https://socialurl.com', + reddit: 'https://socialurl.com', + slack: 'https://socialurl.com', + }, + }, + }, + }, + result: { + data: { + updateCommunity: true, + }, + }, + }, +]; + +const MOCKS2 = [ + { + request: { + query: GET_COMMUNITY_DATA, + }, + result: { + data: { + getCommunityData: { + _id: null, + name: null, + logoUrl: null, + websiteLink: null, + socialMediaUrls: { + facebook: null, + gitHub: null, + youTube: null, + instagram: null, + linkedIn: null, + reddit: null, + slack: null, + twitter: null, + }, + }, + }, + }, + }, + { + request: { + query: RESET_COMMUNITY, + variables: { + resetPreLoginImageryId: 'communityId', + }, + }, + result: { + data: { + resetCommunity: true, + }, + }, + }, +]; + +const MOCKS3 = [ + { + request: { + query: GET_COMMUNITY_DATA, + }, + result: { + data: { + getCommunityData: { + _id: 'communityId', + name: 'testName', + logoUrl: 'image.png', + websiteLink: 'http://websitelink.com', + socialMediaUrls: { + facebook: 'http://sociallink.com', + gitHub: 'http://sociallink.com', + youTube: 'http://sociallink.com', + instagram: 'http://sociallink.com', + linkedIn: 'http://sociallink.com', + reddit: 'http://sociallink.com', + slack: 'http://sociallink.com', + twitter: 'http://sociallink.com', + }, + }, + }, + }, + }, + { + request: { + query: RESET_COMMUNITY, + variables: { + resetPreLoginImageryId: 'communityId', + }, + }, + result: { + data: { + resetCommunity: true, + }, + }, + }, +]; + +const link1 = new StaticMockLink(MOCKS1, true); +const link2 = new StaticMockLink(MOCKS2, true); +const link3 = new StaticMockLink(MOCKS3, true); + +const profileVariables = { + name: 'Name', + websiteLink: 'https://website.com', + socialUrl: 'https://socialurl.com', + logo: new File(['logo'], 'test.png', { + type: 'image/png', + }), +}; async function wait(ms = 100): Promise { await act(() => { @@ -16,21 +157,33 @@ async function wait(ms = 100): Promise { }); } +jest.mock('react-toastify', () => ({ + toast: { + success: jest.fn(), + warn: jest.fn(), + error: jest.fn(), + }, +})); + describe('Testing Community Profile Screen', () => { beforeEach(() => { jest.clearAllMocks(); }); test('Components should render properly', async () => { + window.location.assign('/communityProfile'); + render( - - - - + + + + + + , ); + await wait(); - expect(screen.getByText(/Community Profile/i)).toBeInTheDocument(); expect(screen.getByPlaceholderText(/Community Name/i)).toBeInTheDocument(); expect(screen.getByPlaceholderText(/Website Link/i)).toBeInTheDocument(); expect(screen.getByTestId(/facebook/i)).toBeInTheDocument(); @@ -41,24 +194,23 @@ describe('Testing Community Profile Screen', () => { expect(screen.getByTestId(/youtube/i)).toBeInTheDocument(); expect(screen.getByTestId(/reddit/i)).toBeInTheDocument(); expect(screen.getByTestId(/slack/i)).toBeInTheDocument(); + expect(screen.getByTestId('resetChangesBtn')).toBeInTheDocument(); + expect(screen.getByTestId('resetChangesBtn')).toBeDisabled(); + expect(screen.getByTestId('saveChangesBtn')).toBeInTheDocument(); + expect(screen.getByTestId('saveChangesBtn')).toBeDisabled(); }); - test('Testing all the input fields', async () => { - const profileVariables = { - name: 'Name', - websiteLink: 'https://website.com', - socialUrl: 'https://socialurl.com', - logo: new File(['logo'], 'test.png', { - type: 'image/png', - }), - }; + test('Testing all the input fields and update community data feature', async () => { + window.location.assign('/communityProfile'); await act(async () => { render( - - - - + + + + + + , ); await wait(); @@ -68,35 +220,115 @@ describe('Testing Community Profile Screen', () => { const logo = screen.getByTestId(/fileInput/i); const facebook = screen.getByTestId(/facebook/i); const instagram = screen.getByTestId(/instagram/i); + const twitter = screen.getByTestId(/twitter/i); const linkedIn = screen.getByTestId(/linkedIn/i); const github = screen.getByTestId(/github/i); const youtube = screen.getByTestId(/youtube/i); const reddit = screen.getByTestId(/reddit/i); const slack = screen.getByTestId(/slack/i); + const saveChangesBtn = screen.getByTestId(/saveChangesBtn/i); + const resetChangeBtn = screen.getByTestId(/resetChangesBtn/i); userEvent.type(communityName, profileVariables.name); userEvent.type(websiteLink, profileVariables.websiteLink); - userEvent.upload(logo, profileVariables.logo); - await wait(); userEvent.type(facebook, profileVariables.socialUrl); userEvent.type(instagram, profileVariables.socialUrl); + userEvent.type(twitter, profileVariables.socialUrl); userEvent.type(linkedIn, profileVariables.socialUrl); userEvent.type(github, profileVariables.socialUrl); userEvent.type(youtube, profileVariables.socialUrl); userEvent.type(reddit, profileVariables.socialUrl); userEvent.type(slack, profileVariables.socialUrl); + userEvent.upload(logo, profileVariables.logo); await wait(); expect(communityName).toHaveValue(profileVariables.name); expect(websiteLink).toHaveValue(profileVariables.websiteLink); - expect(logo).toBeTruthy(); + // expect(logo).toBeTruthy(); expect(facebook).toHaveValue(profileVariables.socialUrl); expect(instagram).toHaveValue(profileVariables.socialUrl); + expect(twitter).toHaveValue(profileVariables.socialUrl); expect(linkedIn).toHaveValue(profileVariables.socialUrl); expect(github).toHaveValue(profileVariables.socialUrl); expect(youtube).toHaveValue(profileVariables.socialUrl); expect(reddit).toHaveValue(profileVariables.socialUrl); expect(slack).toHaveValue(profileVariables.socialUrl); + expect(saveChangesBtn).not.toBeDisabled(); + expect(resetChangeBtn).not.toBeDisabled(); + await wait(); + + userEvent.click(saveChangesBtn); + await wait(); }); }); + + test('If the queried data has some fields null then the input field should be empty', async () => { + render( + + + + + , + ); + await wait(); + + expect(screen.getByPlaceholderText(/Community Name/i)).toHaveValue(''); + expect(screen.getByPlaceholderText(/Website Link/i)).toHaveValue(''); + expect(screen.getByTestId(/facebook/i)).toHaveValue(''); + expect(screen.getByTestId(/instagram/i)).toHaveValue(''); + expect(screen.getByTestId(/twitter/i)).toHaveValue(''); + expect(screen.getByTestId(/linkedIn/i)).toHaveValue(''); + expect(screen.getByTestId(/github/i)).toHaveValue(''); + expect(screen.getByTestId(/youtube/i)).toHaveValue(''); + expect(screen.getByTestId(/reddit/i)).toHaveValue(''); + expect(screen.getByTestId(/slack/i)).toHaveValue(''); + }); + + test('Should clear out all the input field when click on Reset Changes button', async () => { + render( + + + + + , + ); + await wait(); + + const resetChangesBtn = screen.getByTestId('resetChangesBtn'); + userEvent.click(resetChangesBtn); + await wait(); + + expect(screen.getByPlaceholderText(/Community Name/i)).toHaveValue(''); + expect(screen.getByPlaceholderText(/Website Link/i)).toHaveValue(''); + expect(screen.getByTestId(/facebook/i)).toHaveValue(''); + expect(screen.getByTestId(/instagram/i)).toHaveValue(''); + expect(screen.getByTestId(/twitter/i)).toHaveValue(''); + expect(screen.getByTestId(/linkedIn/i)).toHaveValue(''); + expect(screen.getByTestId(/github/i)).toHaveValue(''); + expect(screen.getByTestId(/youtube/i)).toHaveValue(''); + expect(screen.getByTestId(/reddit/i)).toHaveValue(''); + expect(screen.getByTestId(/slack/i)).toHaveValue(''); + expect(toast.success).toHaveBeenCalled(); + }); + + test('Should have empty input fields when queried result is null', async () => { + render( + + + + + , + ); + + expect(screen.getByPlaceholderText(/Community Name/i)).toHaveValue(''); + expect(screen.getByPlaceholderText(/Website Link/i)).toHaveValue(''); + expect(screen.getByTestId(/facebook/i)).toHaveValue(''); + expect(screen.getByTestId(/instagram/i)).toHaveValue(''); + expect(screen.getByTestId(/twitter/i)).toHaveValue(''); + expect(screen.getByTestId(/linkedIn/i)).toHaveValue(''); + expect(screen.getByTestId(/github/i)).toHaveValue(''); + expect(screen.getByTestId(/youtube/i)).toHaveValue(''); + expect(screen.getByTestId(/reddit/i)).toHaveValue(''); + expect(screen.getByTestId(/slack/i)).toHaveValue(''); + }); }); diff --git a/src/screens/CommunityProfile/CommunityProfile.tsx b/src/screens/CommunityProfile/CommunityProfile.tsx index 98c97fd73f..9282f112bc 100644 --- a/src/screens/CommunityProfile/CommunityProfile.tsx +++ b/src/screens/CommunityProfile/CommunityProfile.tsx @@ -1,9 +1,12 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Button, Card, Form } from 'react-bootstrap'; -import { useMutation } from '@apollo/client'; +import { useMutation, useQuery } from '@apollo/client'; +import { toast } from 'react-toastify'; -import { UPLOAD_PRELOGIN_IMAGERY } from 'GraphQl/Mutations/mutations'; +import Loader from 'components/Loader/Loader'; +import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries'; +import { UPDATE_COMMUNITY, RESET_COMMUNITY } from 'GraphQl/Mutations/mutations'; import { FacebookLogo, InstagramLogo, @@ -16,6 +19,7 @@ import { } from 'assets/svgs/social-icons'; import convertToBase64 from 'utils/convertToBase64'; import styles from './CommunityProfile.module.css'; +import { errorHandler } from 'utils/errorHandler'; const CommunityProfile = (): JSX.Element => { const { t } = useTranslation('translation', { @@ -24,21 +28,59 @@ const CommunityProfile = (): JSX.Element => { document.title = t('title'); + type PreLoginImageryDataType = { + _id: string; + name: string | undefined; + websiteLink: string | undefined; + logoUrl: string | undefined; + socialMediaUrls: { + facebook: string | undefined; + instagram: string | undefined; + twitter: string | undefined; + linkedIn: string | undefined; + gitHub: string | undefined; + youTube: string | undefined; + reddit: string | undefined; + slack: string | undefined; + }; + }; + const [profileVariable, setProfileVariable] = React.useState({ name: '', websiteLink: '', - logo: '', - facebookUrl: '', - instagramUrl: '', - twitterUrl: '', - linkedInUrl: '', - githubUrl: '', - youtubeUrl: '', - redditUrl: '', - slackUrl: '', + logoUrl: '', + facebook: '', + instagram: '', + twitter: '', + linkedIn: '', + github: '', + youtube: '', + reddit: '', + slack: '', }); - const [upload] = useMutation(UPLOAD_PRELOGIN_IMAGERY); + const { data, loading } = useQuery(GET_COMMUNITY_DATA); + const [uploadPreLoginImagery] = useMutation(UPDATE_COMMUNITY); + const [resetPreLoginImagery] = useMutation(RESET_COMMUNITY); + + React.useEffect(() => { + const preLoginData: PreLoginImageryDataType | undefined = + data?.getCommunityData; + preLoginData && + setProfileVariable({ + name: preLoginData.name ?? '', + websiteLink: preLoginData.websiteLink ?? '', + logoUrl: preLoginData.logoUrl ?? '', + facebook: preLoginData.socialMediaUrls.facebook ?? '', + instagram: preLoginData.socialMediaUrls.instagram ?? '', + twitter: preLoginData.socialMediaUrls.twitter ?? '', + linkedIn: preLoginData.socialMediaUrls.linkedIn ?? '', + github: preLoginData.socialMediaUrls.gitHub ?? '', + youtube: preLoginData.socialMediaUrls.youTube ?? '', + reddit: preLoginData.socialMediaUrls.reddit ?? '', + slack: preLoginData.socialMediaUrls.slack ?? '', + }); + }, [data]); const handleOnChange = (e: any): void => { setProfileVariable({ @@ -46,28 +88,83 @@ const CommunityProfile = (): JSX.Element => { [e.target.name]: e.target.value, }); }; - const handleOnSubmit = (e: React.FormEvent): void => { + + const handleOnSubmit = async ( + e: React.FormEvent, + ): Promise => { e.preventDefault(); - upload({ - variables: { - data: { - id: '2', - name: profileVariable.name, - websiteLink: profileVariable.websiteLink, - logo: profileVariable.logo, - facebookUrl: profileVariable.facebookUrl, - instagramUrl: profileVariable.instagramUrl, - twitterUrl: profileVariable.twitterUrl, - linkedInUrl: profileVariable.linkedInUrl, - githubUrl: profileVariable.githubUrl, - youtubeUrl: profileVariable.youtubeUrl, - redditUrl: profileVariable.redditUrl, - slackUrl: profileVariable.slackUrl, + try { + await uploadPreLoginImagery({ + variables: { + data: { + name: profileVariable.name, + websiteLink: profileVariable.websiteLink, + logo: profileVariable.logoUrl, + socialMediaUrls: { + facebook: profileVariable.facebook, + instagram: profileVariable.instagram, + twitter: profileVariable.twitter, + linkedIn: profileVariable.linkedIn, + gitHub: profileVariable.github, + youTube: profileVariable.youtube, + reddit: profileVariable.reddit, + slack: profileVariable.slack, + }, + }, }, - }, - }); + }); + toast.success(t('profileChangedMsg')); + } catch (error: any) { + /* istanbul ignore next */ + errorHandler(t, error); + } + }; + + const resetData = async (): Promise => { + const preLoginData: PreLoginImageryDataType | undefined = + data?.getCommunityData; + try { + setProfileVariable({ + name: '', + websiteLink: '', + logoUrl: '', + facebook: '', + instagram: '', + twitter: '', + linkedIn: '', + github: '', + youtube: '', + reddit: '', + slack: '', + }); + + await resetPreLoginImagery({ + variables: { + resetPreLoginImageryId: preLoginData?._id, + }, + }); + toast.success(t(`resetData`)); + } catch (error: any) { + /* istanbul ignore next */ + errorHandler(t, error); + } + }; + + const isDisabled = (): boolean => { + if ( + profileVariable.name == '' && + profileVariable.websiteLink == '' && + profileVariable.logoUrl == '' + ) { + return true; + } else { + return false; + } }; + if (loading) { + ; + } return (
@@ -124,11 +221,12 @@ const CommunityProfile = (): JSX.Element => { ...prevInput, logo: '', })); - const file = e.target.files?.[0]; - const base64file = file ? await convertToBase64(file) : ''; + const target = e.target as HTMLInputElement; + const file = target.files && target.files[0]; + const base64file = file && (await convertToBase64(file)); setProfileVariable({ ...profileVariable, - logo: base64file, + logoUrl: base64file ?? '', }); }} className="mb-3" @@ -143,14 +241,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -158,14 +255,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -173,14 +269,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -188,14 +283,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -203,14 +297,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -218,14 +311,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -233,14 +325,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -248,14 +339,13 @@ const CommunityProfile = (): JSX.Element => {
@@ -264,25 +354,19 @@ const CommunityProfile = (): JSX.Element => { > - + diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css index d5b9b755c7..dba42696d7 100644 --- a/src/screens/LoginPage/LoginPage.module.css +++ b/src/screens/LoginPage/LoginPage.module.css @@ -2,6 +2,10 @@ min-height: 100vh; } +.communityLogo { + object-fit: contain; +} + .row .left_portion { display: flex; justify-content: center; diff --git a/src/screens/LoginPage/LoginPage.test.tsx b/src/screens/LoginPage/LoginPage.test.tsx index c43f75be27..a9c4cd3a7a 100644 --- a/src/screens/LoginPage/LoginPage.test.tsx +++ b/src/screens/LoginPage/LoginPage.test.tsx @@ -13,11 +13,13 @@ import { LOGIN_MUTATION, RECAPTCHA_MUTATION, SIGNUP_MUTATION, + UPDATE_COMMUNITY, } from 'GraphQl/Mutations/mutations'; import { store } from 'state/store'; import i18nForTest from 'utils/i18nForTest'; import { BACKEND_URL } from 'Constant/constant'; import useLocalStorage from 'utils/useLocalstorage'; +import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries'; const MOCKS = [ { @@ -77,9 +79,74 @@ const MOCKS = [ }, }, }, + { + request: { + query: GET_COMMUNITY_DATA, + }, + result: { + data: { + getCommunityData: null, + }, + }, + }, +]; +const MOCKS2 = [ + { + request: { + query: UPDATE_COMMUNITY, + variables: { + data: { + name: 'testName', + logo: 'image.png', + websiteLink: 'http://link.com', + socialMediaUrls: { + facebook: 'http://url.com', + gitHub: 'http://url.com', + youTube: 'http://url.com', + instagram: 'http://url.com', + linkedIn: 'http://url.com', + reddit: 'http://url.com', + slack: 'http://url.com', + twitter: 'http://url.com', + }, + }, + }, + }, + result: { + data: { + updateCommunity: true, + }, + }, + }, + { + request: { + query: GET_COMMUNITY_DATA, + }, + result: { + data: { + getCommunityData: { + _id: '', + websiteLink: 'http://link.com', + name: 'New name1', + logoUrl: 'image.png', + socialMediaUrls: { + facebook: 'http://url.com', + gitHub: 'http://url.com', + youTube: 'http://url.com', + instagram: 'http://url.com', + linkedIn: 'http://url.com', + reddit: 'http://url.com', + slack: 'http://url.com', + twitter: 'http://url.com', + }, + }, + }, + }, + }, ]; const link = new StaticMockLink(MOCKS, true); +const link2 = new StaticMockLink(MOCKS2, true); async function wait(ms = 100): Promise { await act(() => { @@ -215,6 +282,52 @@ describe('Testing Login Page Screen', () => { expect(window.location).toBeAt('/orglist'); }); + test('There should be default values of pre-login data when queried result is null', async () => { + render( + + + + + + + + + , + ); + await wait(); + + expect(screen.getByTestId('PalisadoesLogo')).toBeInTheDocument(); + expect( + screen.getAllByTestId('PalisadoesSocialMedia')[0], + ).toBeInTheDocument(); + + await wait(); + expect(screen.queryByTestId('preLoginLogo')).not.toBeInTheDocument(); + expect(screen.queryAllByTestId('preLoginSocialMedia')[0]).toBeUndefined(); + }); + + test('There should be a different values of pre-login data if the queried result is not null', async () => { + render( + + + + + + + + + , + ); + await wait(); + + expect(screen.getByTestId('preLoginLogo')).toBeInTheDocument(); + expect(screen.getAllByTestId('preLoginSocialMedia')[0]).toBeInTheDocument(); + + await wait(); + expect(screen.queryByTestId('PalisadoesLogo')).not.toBeInTheDocument(); + expect(screen.queryAllByTestId('PalisadoesSocialMedia')[0]).toBeUndefined(); + }); + test('Testing registration functionality', async () => { const formData = { firstName: 'John', diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx index 0f1aa6413d..021c6c995a 100644 --- a/src/screens/LoginPage/LoginPage.tsx +++ b/src/screens/LoginPage/LoginPage.tsx @@ -1,4 +1,4 @@ -import { useMutation } from '@apollo/client'; +import { useQuery, useMutation } from '@apollo/client'; import type { ChangeEvent } from 'react'; import React, { useEffect, useState } from 'react'; import { Form } from 'react-bootstrap'; @@ -21,6 +21,7 @@ import { RECAPTCHA_MUTATION, SIGNUP_MUTATION, } from 'GraphQl/Mutations/mutations'; +import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries'; import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg'; import { ReactComponent as PalisadoesLogo } from 'assets/svgs/palisadoes.svg'; import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown'; @@ -46,6 +47,7 @@ const loginPage = (): JSX.Element => { numericValue: boolean; specialChar: boolean; }; + const [recaptchaToken, setRecaptchaToken] = useState(null); const [showTab, setShowTab] = useState<'LOGIN' | 'REGISTER'>('LOGIN'); const [role, setRole] = useState<'admin' | 'user'>('admin'); @@ -106,11 +108,15 @@ const loginPage = (): JSX.Element => { const toggleConfirmPassword = (): void => setShowConfirmPassword(!showConfirmPassword); + const { data, loading, refetch } = useQuery(GET_COMMUNITY_DATA); + useEffect(() => { + // refetching the data if the pre-login data updates + refetch(); + }, [data]); const [login, { loading: loginLoading }] = useMutation(LOGIN_MUTATION); const [signup, { loading: signinLoading }] = useMutation(SIGNUP_MUTATION); const [recaptcha, { loading: recaptchaLoading }] = useMutation(RECAPTCHA_MUTATION); - useEffect(() => { async function loadResource(): Promise { try { @@ -269,7 +275,7 @@ const loginPage = (): JSX.Element => { } } else { setItem('token', loginData.login.accessToken); - setItem('refreshToken', loginData.login.refreshToken); + setItem('refreshToken', loginData.login.websiteLine.refreshToken); setItem('userId', loginData.login.user._id); setItem('IsLoggedIn', 'TRUE'); setItem('UserType', loginData.login.user.userType); @@ -294,15 +300,42 @@ const loginPage = (): JSX.Element => { } }; - if (componentLoader || loginLoading || signinLoading || recaptchaLoading) { + if ( + componentLoader || + loginLoading || + signinLoading || + recaptchaLoading || + loading + ) { return ; } - - const socialIconsList = socialMediaLinks.map(({ href, logo }, index) => ( - - - - )); + const socialIconsList = socialMediaLinks.map(({ href, logo, tag }, index) => + data?.getCommunityData ? ( + data.getCommunityData?.socialMediaUrls?.[tag] ? ( + + + + ) : ( + <> + ) + ) : ( + + + + ), + ); return ( <> @@ -310,14 +343,33 @@ const loginPage = (): JSX.Element => {
{socialIconsList}