@logora/debate 0.1.0

package/src/components/argument/top_arguments/TopArguments.docs.mdx

@@ -0,0 +1,22 @@
+---
+description: A box component to show top arguments of a debate.
+labels: ['argument']
+---
+
+import { TopArguments } from './TopArguments';
+
+A box component to show top arguments of a debate.
+
+### Component usage
+```js
+    import { TopArguments } from '@logora/debate.argument.top_arguments';
+```
+```js
+<TopArguments 
+    argumentFor={argumentFor}
+    argumentAgainst={argumentAgainst} 
+    argumentCount={[5, 3]}
+    debate={debate}
+    debateUrl={"mydebateUrl"} 
+/>
+```

package/src/components/argument/top_arguments/TopArguments.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import styles from './TopArguments.module.scss';
+import { useConfig } from '@logora/debate/data/config_provider';
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { useTranslatedContent } from '@logora/debate/translation/translated_content';
+import { SummaryContentBox } from '@logora/debate/user_content/summary_content_box';
+import { UserContentSkeleton } from '@logora/debate/skeleton/user_content_skeleton';
+import { Button } from '@logora/debate/action/button';
+import { FormattedMessage } from 'react-intl';
+
+export const TopArguments = ({ argumentFor, argumentAgainst, debateUrl, argumentCount, debate }) =>  {
+    const config = useConfig();
+    const { isMobile } = useResponsive();
+    const positionForName = useTranslatedContent(argumentFor?.position.name, argumentFor?.position.language, "name", argumentFor?.position.translation_entries);
+    const positionAgainstName = useTranslatedContent(argumentAgainst?.position.name, argumentAgainst?.position.language, "name", argumentAgainst?.position.translation_entries);
+
+    const getTopArgument = () => {
+        if(argumentFor && argumentAgainst) {
+            return argumentFor.score > argumentAgainst.score ? argumentFor : argumentAgainst;
+        } else {
+            return argumentFor || argumentAgainst || false;
+        }
+    }
+
+    const topArgument = getTopArgument();
+
+    const displayArgument = (argument, positionIndex, compact) => {
+        return (
+            <>
+                { argument ?
+                    <SummaryContentBox 
+                        author={argument.author}
+                        tag={positionIndex === 0 ? positionForName.translatedContent : positionAgainstName.translatedContent} 
+                        date={new Date(argument.created_at)}
+                        link={debateUrl + "#argument_" + argument.id} 
+                        content={argument.content}
+                        tagClassName={styles[`positionBackground-${positionIndex}`]}
+                        contentCount={argumentCount[positionIndex]} 
+                        headerOneLine={compact}
+                        showFooter={!compact}
+                        language={argument.language}
+                        translationEntries={argument.translation_entries}
+                        lineCount={config?.actions?.argumentLineCount ?? undefined}
+                    />
+                :
+                    <UserContentSkeleton enableAnimation={false} border tag={positionIndex === 0 ? positionForName.translatedContent : positionAgainstName.translatedContent} tagClassName={styles[`positionBackground-${positionIndex}`]}>
+                        <Button to={debateUrl} external data-tid={"action_add_argument"} target={"_top"} rel="nofollow">
+                            <FormattedMessage id="argument.top_arguments.call_to_action" defaultMessage={"Add an argument"} />
+                        </Button>
+                    </UserContentSkeleton>
+                }
+            </>
+        );
+    }
+
+    return (
+        <>
+            { (config.synthesis.newDesign !== false) || (isMobile && config.synthesis.onlyShowTopArgument === true) ? 
+                <div className={styles.topArgumentsUnique} data-testid={"topArgumentsContainerUnique"}>
+                    <div className={styles.topArgument}>
+                        { displayArgument(topArgument, topArgument === argumentAgainst ? 1 : 0, true) }
+                    </div>
+                </div>
+            :
+                <div className={styles.topArguments} data-testid={"topArgumentsContainer"}>
+                    <div className={styles.topArgument}>
+                        { displayArgument(argumentFor, 0, false) }
+                    </div>
+                    <div className={styles.topArgument}>
+                        { displayArgument(argumentAgainst, 1, false) }
+                    </div>
+                </div>
+            }
+        </>
+    )
+};
+
+TopArguments.propTypes = {
+    /** Object representing the argument that supports the first thesis */
+    argumentFor: PropTypes.object,
+    /** Object representing the argument that supports the second thesis */
+    argumentAgainst: PropTypes.object,
+    /** URL of the debate */
+    debateUrl: PropTypes.string.isRequired,
+    /** Array containing the count of arguments for each position in the debate */
+    argumentCount: PropTypes.array.isRequired,
+    /** Object containing information about the debate */
+    debate: PropTypes.object.isRequired
+};

package/src/components/argument/top_arguments/TopArguments.module.scss

@@ -0,0 +1,37 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+
+.topArguments {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: spacing.$spacer;
+}
+
+@include display.media-breakpoint-down(xs) {
+    .topArguments {
+        grid-template-columns: repeat(1, 1fr) !important;
+    }
+}
+
+.topArgumentsUnique {
+    @extend .topArguments;
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.topArgument {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 0;
+}
+
+.positionBackground-0 {
+    color: theme.$text-light !important;
+    background-color: theme.$for-primary !important;
+}
+
+.positionBackground-1 {
+    color: theme.$text-light !important;
+    background-color: theme.$against-primary !important;
+}

package/src/components/argument/top_arguments/TopArguments.stories.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { MemoryRouter } from 'react-router-dom';
+import { Location } from '@logora/debate/util/location';
+import { TopArguments } from './TopArguments';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const debateUrl = faker.internet.url();
+
+const routes = {
+    userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+
+const debate = {
+    group_context: {
+        positions: [
+            {
+              updated_at: "2021-04-20T12:19:15.855Z",
+              id: 1,
+              name: "Oui"
+            },
+            {
+              updated_at: "2021-04-20T12:19:15.878Z",
+              id: 2,
+              name: "Non"
+            }
+        ]
+    }
+};
+
+const argumentFor = {
+    id: 414,
+    content: "An argument to support the 'For' position",
+    upvotes: 0,
+    group_id: 417,
+    is_reply: false,
+    created_at: faker.date.recent(),
+    score: 50,
+    author: {
+        image_url: faker.image.avatarGitHub(),
+        full_name: faker.person.fullName(),
+        hash_id: faker.lorem.slug(),
+        slug: faker.lorem.slug(),
+        points: 1320,
+        last_activity: new Date(),
+        description: faker.person.jobTitle()
+    },
+    position: {
+        id: 397,
+        name: "For"
+    }
+};
+
+const argumentAgainst = {
+    id: 414,
+    content: "An argument to support the 'Against' position",
+    upvotes: 0,
+    group_id: 417,
+    is_reply: false,
+    created_at: faker.date.recent(),
+    score: 58,
+    author: {
+        image_url: faker.image.avatarGitHub(),
+        full_name: faker.person.fullName(),
+        hash_id: faker.lorem.slug(),
+        slug: faker.lorem.slug(),
+        points: 5672,
+        last_activity: new Date(),
+        description: faker.person.jobTitle()
+    },
+    position: {
+        id: 397,
+        name: "Against"
+    }
+};
+
+const meta = {
+    title: 'Argument/Top Arguments',
+    component: TopArguments,
+    args: {
+        newDesign: false,
+        showArgumentFor: true,
+        showArgumentAgainst: true,
+        argumentCount: [5, 3],
+        debate,
+        debateUrl
+    },
+    argTypes: {
+        newDesign: {
+            control: 'boolean'
+        },
+        showArgumentFor: {
+            control: 'boolean'
+        },
+        showArgumentAgainst: {
+            control: 'boolean'
+        },
+        argumentCount: {
+            control: 'object'
+        },
+        debate: {
+            control: 'object'
+        },
+        debateUrl: {
+            control: 'text'
+        }
+    },
+    render: ({ newDesign, showArgumentFor, showArgumentAgainst, ...args }) => (
+        <MemoryRouter>
+            <ConfigProvider routes={{ ...routes }} config={{ synthesis: { newDesign } }}>
+                <ResponsiveProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <TopArguments
+                                {...args}
+                                argumentFor={showArgumentFor ? argumentFor : undefined}
+                                argumentAgainst={showArgumentAgainst ? argumentAgainst : undefined}
+                            />
+                        </IntlProvider>
+                    </IconProvider>
+                </ResponsiveProvider>
+            </ConfigProvider>
+        </MemoryRouter>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultTopArguments = (props) => renderStory(props);
+
+export const TopArgumentsWithEmptyArgument = (props) => renderStory({
+    showArgumentFor: false,
+    argumentCount: [0, 3],
+    ...props
+});
+
+export const TopArgumentsNewDesign = (props) => renderStory({
+    newDesign: true,
+    showArgumentFor: false,
+    argumentCount: [0, 3],
+    ...props
+});
+
+export const TopArgumentsNewDesignWithEmptyArgument = (props) => renderStory({
+    newDesign: true,
+    showArgumentFor: false,
+    showArgumentAgainst: false,
+    argumentCount: [0, 0],
+    ...props
+});

package/src/components/argument/top_arguments/TopArguments.test.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DefaultTopArguments } from './TopArguments.stories';
+import { TopArgumentsNewDesign } from './TopArguments.stories';
+import { TopArgumentsNewDesignWithEmptyArgument } from './TopArguments.stories';
+import { TopArgumentsWithEmptyArgument } from './TopArguments.stories';
+
+describe('TopArguments', () => {
+    it ('renders TopArguments component', () => {  
+        const { container } = render(<DefaultTopArguments />);
+        expect(screen.queryByText('Read 5 arguments "For"')).toBeInTheDocument();
+        expect(screen.queryByText('Read 3 arguments "Against"')).toBeInTheDocument();
+    });
+
+    it ('renders correct arguments', () => {  
+        const { container } = render(<DefaultTopArguments />);
+
+        const topArguments = screen.getByTestId('topArgumentsContainer');
+        expect(topArguments.childNodes.length).toBe(2);
+
+        expect(screen.queryByText("An argument to support the 'For' position")).toBeInTheDocument();
+        expect(screen.queryByText("An argument to support the 'Against' position")).toBeInTheDocument();
+    });
+
+    it ('renders the argument with the highest score when new design is true', () => {  
+        const { container } = render(<TopArgumentsNewDesign />);
+
+        const topArgument = container.getElementsByClassName('topArgument');
+        expect(topArgument.length).toBe(1);
+
+        expect(screen.queryByText("An argument to support the 'For' position")).toBeNull();
+        expect(screen.queryByText("An argument to support the 'Against' position")).toBeInTheDocument();
+        expect(screen.queryByText('Read 5 arguments "For"')).toBeNull();
+        expect(screen.queryByText('Read 3 arguments "Against"')).toBeNull();
+    });
+
+    it ('renders the component with empty "For" argument', () => {
+        const { container } = render(<TopArgumentsWithEmptyArgument />);
+
+        const topArgument = container.getElementsByClassName('topArgument');
+        expect(topArgument.length).toBe(2);
+
+        const emptyArgument = container.getElementsByClassName('skeletonContainer');
+        expect(emptyArgument.length).toBe(1);
+
+        expect(screen.queryByText("Add an argument")).toBeInTheDocument();
+        expect(screen.queryByText("An argument to support the 'For' position")).toBeNull();
+        expect(screen.queryByText("An argument to support the 'Against' position")).toBeInTheDocument();
+        expect(screen.queryByText('Read 5 arguments "For"')).toBeNull();
+        expect(screen.queryByText('Read 3 arguments "Against"')).toBeInTheDocument();
+    });
+
+    it ('renders the component with empty argument when new design', () => {
+        const { container } = render(<TopArgumentsNewDesignWithEmptyArgument />);
+
+        const topArgument = container.getElementsByClassName('topArgument');
+        expect(topArgument.length).toBe(1);
+
+        const emptyArgument = container.getElementsByClassName('skeletonContainer');
+        expect(emptyArgument.length).toBe(1);
+
+        expect(screen.queryByText("Add an argument")).toBeInTheDocument();
+        expect(screen.queryByText("An argument to support the 'For' position...")).toBeNull();
+        expect(screen.queryByText("An argument to support the 'Against' position...")).toBeNull();
+        expect(screen.queryByText("Read more")).toBeNull();
+    });
+})

package/src/components/argument/top_arguments/index.js

@@ -0,0 +1 @@
+export { TopArguments } from './TopArguments';

package/src/components/auth/auth_initializer/AuthInitializer.alltest.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { AuthInitializer } from './AuthInitializer';
+
+const config = {
+    shortname: "myapp",
+    auth: {
+        type: "social"
+    }
+};
+
+describe('AuthInitialiser', () => {
+    it('should render', () => {
+        render(
+            <ConfigProvider config={config}>
+                <AuthInitializer authUrl={"https://auth.com/"} authType={config.auth?.type} provider={config.shortname} />
+            </ConfigProvider>
+        );
+    });
+});

package/src/components/auth/auth_initializer/AuthInitializer.docs.mdx

@@ -0,0 +1,34 @@
+---
+description: A component to manage authentication
+labels: ['auth', 'authentication', 'oauth2']
+---
+
+This component is used to manage authentication. It is responsible for initializing authentication, like logging in a user, and also handles logout and token refresh requests.
+It can be used as a standalone to trigger authentication and manage user token.
+
+Three authentication methods are available :
+- social : email, Google and Facebook authentication
+- oauth2_server : authentication with an OAuth2 server using the authorization code flow
+- jwt : authentication using a JWT token
+
+Authentication can be triggered using a Javascript event `logora:authentication:require`.
+
+### Component usage
+
+```js
+import { AuthInitializer } from '@logora/debate.auth.auth_initializer';
+```
+
+```js
+const Component = () => {
+	return (
+        <>
+            <AuthInitializer authUrl={"https://auth.com/"} authType={"social"} provider={"my-app"} assertion={"random-assertion"} />
+        </>
+    )
+}
+```
+
+```js
+window.dispatchEvent(new Event("logora:authentication:require"));
+```

package/src/components/auth/auth_initializer/AuthInitializer.jsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { httpClient } from '@logora/debate/data/axios_client';
+import { authTokenHandler, useAuthActions } from '@logora/debate/auth/use_auth';
+import { useAuthInterceptor } from '@logora/debate/auth/use_auth';
+import { useAuthRequired } from "@logora/debate/hooks/use_auth_required";
+import AuthProviderFactory from '@logora/debate/auth/providers';
+
+export const AuthInitializer = ({ authUrl, authType, provider, assertion }) => {
+    const tokenKey = "logora_user_token";
+    useAuthInterceptor(httpClient, authUrl, tokenKey);
+
+    const { getToken, removeToken } = authTokenHandler(httpClient, authUrl, tokenKey);
+    const { loginUser, logoutUser, fetchUser } = useAuthActions(httpClient, authUrl, tokenKey);
+	const requireAuthentication = useAuthRequired();
+
+    useEffect(() => {
+        checkAuth();
+    }, []);
+
+    useEffect(() => {
+        if(typeof window !== "undefined") {
+            window.addEventListener('logora:authentication:require', requireAuthentication);
+            return () => {
+                window.removeEventListener('logora:authentication:require', requireAuthentication);
+            };
+        }
+    }, []);
+
+    const checkAuth = () => {
+        const authProvider = getAuthProvider();
+        const tokenObject = getToken();
+        if(!!tokenObject) {
+            const currentSessionId = tokenObject.session_id;
+            if(authProvider.isSameUser(currentSessionId)) {
+                fetchUser();
+            } else {
+                removeToken();
+                initAuth(authProvider);
+            }
+        } else {
+            initAuth(authProvider);
+        }
+    }
+
+    const initAuth = (authProvider) => {
+        if(authProvider.shouldInitAuth()) {
+            const authParams = authProvider.getAuthorizationParams();
+            if(authParams) {
+                loginUser(authParams);
+            }
+        } else {
+            logoutUser();
+        }
+    }
+
+    const getAuthProvider = () => {
+        return AuthProviderFactory.create(authType, provider, assertion);
+    }
+
+    return null;
+}

package/src/components/auth/auth_initializer/index.js

@@ -0,0 +1 @@
+export { AuthInitializer } from './AuthInitializer';

package/src/components/auth/auth_modal/AuthModal.alltest.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DefaultAuthModal } from './AuthModal.stories';
+import { AuthModalSSO } from './AuthModal.stories';
+
+describe('AuthModal', () => {
+    it('should render modal with social auth form', () => {
+        render(
+            <DefaultAuthModal />
+        );
+
+        const facebookButton = screen.getByText(/Sign in with Facebook/i);
+        const googleButton = screen.getByText(/Sign in with Google/i);
+        const emailButton = screen.getByText(/Sign in with email/i);
+
+        expect(facebookButton).toBeTruthy();
+        expect(googleButton).toBeTruthy();
+        expect(emailButton).toBeTruthy();
+    });
+
+    it('should render modal with sso form', () => {
+        render(
+            <AuthModalSSO />
+        );
+
+        expect(screen.getByText('Already have an account ?')).toBeTruthy();
+        expect(screen.getByText("Debate now !")).toBeTruthy();
+        expect(screen.getByText("Sign up right now and receive alerts by email.")).toBeTruthy();
+    });
+});

package/src/components/auth/auth_modal/AuthModal.docs.mdx

@@ -0,0 +1,26 @@
+---
+description: An authentication modal to login through OAuth2 or by form.
+labels: ['auth', 'oauth2', 'form', 'sso']
+---
+
+import { AuthModal } from './AuthModal';
+import { MemoryRouter } from "react-router-dom";
+import { IntlProvider } from "react-intl";
+import { ConfigProvider } from '@logora/debate.data.config_provider';
+
+An authentication modal to login through OAuth2 or by form.
+
+### Component usage
+```js
+import AuthModal from '@logora/debate.auth.auth_modal';
+
+<MemoryRouter>
+    <ConfigProvider>
+        <ModalProvider>
+            <IntlProvider locale="en">
+                <AuthModal onHideModal={() => console.log("AuthModal closed !")} />
+            </IntlProvider>
+        </ModalProvider>
+    </ConfigProvider>
+</MemoryRouter>
+```

package/src/components/auth/auth_modal/AuthModal.jsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from "react";
+import { useConfig } from '@logora/debate/data/config_provider';
+import { Modal, useModal } from '@logora/debate/dialog/modal';
+import { useAuth, useAuthActions } from "@logora/debate/auth/use_auth";
+import { httpClient } from '@logora/debate/data/axios_client';
+import AuthProviderFactory from '@logora/debate/auth/providers';
+import { SocialAuthForm } from '@logora/debate/auth/social_auth_form';
+import { SSOForm } from '@logora/debate/auth/sso_form';
+import { Loader } from '@logora/debate/progress/loader';
+import styles from "./AuthModal.module.scss";
+
+export const AuthModal = ({ onHideModal = null }) => {
+	const config = useConfig();
+	const { hideModal } = useModal();
+	const { isLoggedIn, authError } = useAuth();
+	const [initAuth, setInitAuth] = useState(false);
+	const [method, setMethod] = useState(null);
+    const { loginUser } = useAuthActions(httpClient, process.env.API_AUTH_URL, 'logora_user_token');
+
+	useEffect(() => {
+		if (isLoggedIn) { 
+			hideAuthModal(); 
+		}
+	}, [isLoggedIn])
+
+	useEffect(() => {
+		if (method && authError) { 
+			setInitAuth(false); 
+		}
+	}, [method, authError])
+
+	const hideAuthModal = () => {
+		hideModal();
+		if (onHideModal) {
+			onHideModal();
+		}
+	};
+
+	const handleAssertion = (assertion, socialProvider, method) => {
+		setMethod(method);
+		setInitAuth(true);
+		
+		authenticate(assertion, socialProvider);
+	};
+
+	const authenticate = (assertion, socialProvider) => {
+		const authProvider = AuthProviderFactory.create(config.auth?.type, config.shortname, assertion, socialProvider);
+		const authParams = authProvider.getAuthorizationParams();
+		loginUser(authParams);
+	}
+
+	return (
+		<Modal data-vid={"login_modal"}>
+			<div className={styles.loginModalBody}>
+				{initAuth ? (
+						<Loader />
+					) : (
+						<>
+							{config.auth.type === "form" || config.auth.type === "social" ? (
+								<SocialAuthForm
+									onSubmit={handleAssertion}
+									error={authError}
+									lastStep={method}
+									facebookClientId={process.env.FACEBOOK_CLIENT_ID}
+									googleClientId={process.env.GOOGLE_CLIENT_ID}
+									oAuthRedirectUri={process.env.OAUTH_REDIRECT_URI} 
+									logoUrl={config.logo_url}
+									providerName={config.provider?.companyName}
+									forgotPasswordUrl={`https://admin.logora.fr/?application=${config.shortname}#/forgot_password`}
+									termsUrl={config.provider?.cguUrl || "https://www.logora.com/blog-posts/cgu"}
+									privacyUrl={config.provider?.privacyUrl || "https://www.logora.com/blog-posts/privacy-policy"}
+								/>
+							) : (
+								<SSOForm 
+									authType={config.auth.type}
+									error={authError && method === "OAUTH2"}
+									oAuthRedirectUri={process.env.OAUTH_REDIRECT_URI}
+									clientId={config.auth.clientId}
+									scope={config.auth.scope}
+									logoUrl={config.logo_url}
+									loginUrl={config.auth.login_url}
+									signupUrl={config.auth.registration_url || config.auth.login_url}
+									termsUrl={config.provider?.cguUrl || "https://www.logora.com/blog-posts/cgu"}
+									redirectParameter={config.auth.redirectParameter}
+									trackingParameters={config.auth.trackingParameters}
+									providerName={config.provider?.companyName}
+									hideActions={config.auth.hideModalActions}
+									hideLoginButton={config.auth.hideModalLoginButton}
+									showEmailConsent={config.auth.showEmailConsent}
+									showTerms={config.auth.hideCgu !== true}
+									hideBelowButton={config.auth.hideBelowButton}
+								/>
+							)}
+						</>
+					)}
+			</div>
+		</Modal>
+	);
+}

package/src/components/auth/auth_modal/AuthModal.module.scss

@@ -0,0 +1,9 @@
+@use 'styles/spacing' as spacing;
+
+.loginModalBody {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  @include spacing.py(1, xs);
+  @include spacing.px(1, xs);
+}