Merge pull request #53 from xi-effect/staging

Staging
xi-effect · Apr 27, 2024 · 06060dc · 06060dc
2 parents 63e22df + 3e08b2d
commit 06060dc
Show file tree

Hide file tree

Showing 22 changed files with 516 additions and 276 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,24 +1,10 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
+    root: true,
+    // This tells ESLint to load the config from the package `eslint-config-custom`
+    extends: ['custom'],
+    settings: {
+        next: {
+            rootDir: ['apps/*/'],
+        },
     },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended"
-    ],
-    "overrides": [
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint"
-    ],
-    "rules": {
-    }
-}
+};
diff --git a/.github/workflows/common-prepare.yml b/.github/workflows/common-prepare.yml
@@ -27,4 +27,4 @@ jobs:
   lint:
     needs: analyze_files
     if: needs.analyze_files.outputs.lintable_files == 'true'
-    uses: xi-effect/xieffect-actions/.github/workflows/front-lint-and-format.yml@main
+    uses: xi-effect/xi.actions/.github/workflows/front-lint-and-format.yml@main
diff --git a/apps/xi.front/app/invite/[iid]/page.tsx b/apps/xi.front/app/invite/[iid]/page.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { RefObject, useRef, ReactNode } from 'react';
+import { redirect } from 'next/navigation';
+
+import { useMainSt } from 'pkg.stores';
+
+import { Logo } from 'pkg.logo';
+import { Badge } from '@xipkg/badge';
+import { Button } from '@xipkg/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@xipkg/avatar';
+import Load from 'app/load';
+
+type AvatarPreviewProps = {
+  date: RefObject<'' | Date>;
+  communityId: number | null;
+};
+
+type UserRoleProps = {
+  name: string;
+  roleColor: string;
+  roleType: string;
+};
+
+type AuthProviderProps = {
+  iid: string;
+  children: ReactNode;
+};
+
+// Отправляем запрос, получаем следующие данные:
+const isInviteValid = true; // если false, отображаем страницу ошибки
+const errorMessage = 'Приглашение не действительно';
+const errorDescription = 'Срок действия этого приглашения истёк.';
+const communityName = 'Иванова А. Г.';
+const communityRoles = [
+  { name: 'Cтудент', roleColor: 'bg-brand-80', roleType: 'circle' },
+  { name: 'B1.2', roleColor: 'bg-gray-80', roleType: 'diamond' },
+];
+const commId = 4;
+
+const UserRole = ({ name, roleColor, roleType }: UserRoleProps) => (
+  <li>
+    <Badge className="text-xs bg-gray-5" size="s">
+      <span className={`mr-2 ${checkRole(roleType)} ${roleColor}`} />
+      {name.slice(0, 1).toUpperCase() + name.slice(1)}{' '}
+    </Badge>
+  </li>
+);
+function checkRole(role) {
+  return role === 'circle' ? 'rounded-full size-3' : 'rotate-45 size-2.5';
+}
+
+const AvatarPreview = ({ date, communityId }: AvatarPreviewProps) => (
+  <Avatar size="xxl" className="absolute -top-16">
+    <AvatarImage
+      // временная заглушка для изображения, вместо директории users будет community
+      src={`https://auth.xieffect.ru/api/users/${communityId}/avatar.webp?=${date.current instanceof Date ? date.current.getTime() : ''}`}
+      imageProps={{
+        src: `https://auth.xieffect.ru/api/users/${communityId}/avatar.webp?=${date.current instanceof Date ? date.current.getTime() : ''}`,
+        alt: 'community avatar',
+      }}
+      alt="community avatar"
+    />
+    <AvatarFallback size="xxl" />
+  </Avatar>
+);
+
+const AuthProvider = ({ iid, children }: AuthProviderProps) => {
+  const isLogin = useMainSt((state) => state.isLogin);
+
+  if (isLogin === null) return <Load />;
+  if (!isLogin) redirect(`/signin?iid=${iid}`);
+
+  return children;
+};
+
+export default function InvitePage({ params }: { params: { iid: string } }) {
+  const date = useRef(new Date());
+
+  const onSubmit = () => {
+    redirect('/community/1/home');
+  };
+
+  return (
+    <AuthProvider iid={params.iid}>
+      {isInviteValid ? (
+        <div className="flex flex-col w-full h-full items-center pt-[100px] max-[420px]:px-4">
+          <Logo height={16} width={136} logoVariant="navigation" logoSize="default" />
+          <div className="flex-grow flex flex-col justify-center w-full items-center">
+            <div className="border-[1px] rounded-2xl relative pt-20 p-8 max-[420px]:w-full w-[420px] flex flex-col items-center">
+              <AvatarPreview date={date} communityId={commId} />
+              <p className="text-base text-gray-80">Вы были приглашены в</p>
+              <p className="text-2xl text-gray-100 mt-2">{communityName}</p>
+              <ul className="flex gap-2 mt-4">
+                {communityRoles.map((role) => (
+                  <UserRole
+                    key={role.name}
+                    name={role.name}
+                    roleColor={role.roleColor}
+                    roleType={role.roleType}
+                  />
+                ))}
+              </ul>
+              <Button className="ml-0 mt-8 w-full text-xl" onClick={onSubmit}>
+                Принять приглашение
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col w-full h-full items-center justify-center">
+          <p className="text-2xl text-gray-100 font-semibold max-w-80 text-center">
+            {errorMessage}
+          </p>
+          <p className="text-base text-gray-80 mt-4">{errorDescription}</p>
+        </div>
+      )}
+    </AuthProvider>
+  );
+}
diff --git a/apps/xi.front/package.json b/apps/xi.front/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "3.3.4",
     "@xipkg/avatar": "1.0.0",
+    "@xipkg/badge": "^0.1.0",
     "@xipkg/button": "1.1.3",
     "@xipkg/fileuploader": "1.2.0",
     "@xipkg/form": "2.0.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/pkg.form.signin/Signin.tsx b/packages/pkg.form.signin/Signin.tsx
@@ -14,7 +14,7 @@ import {
   FormMessage,
   useForm,
 } from '@xipkg/form';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Link } from '@xipkg/link';
 import { Eyeoff, Eyeon } from '@xipkg/icons';
 import { Logo } from 'pkg.logo';
@@ -43,8 +43,21 @@ const FormSchema = z.object({
     }),
 });
 
+const InvitationMessage = ({ communityName }: { communityName: string }) => {
+  return (
+    <div className="bg-bkgd-main rounded-lg p-4">
+      <p className="text-brand-100 text-sm">
+        Вы были приглашены в сообщество {communityName}. Для того, чтобы продолжить, авторизуйтесь
+        или зарегистрируйтесь.
+      </p>
+    </div>
+  );
+};
+
 export const SignIn = ({ onSignIn }: SignInT) => {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const communityName = searchParams.get('community');
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
@@ -84,6 +97,7 @@ export const SignIn = ({ onSignIn }: SignInT) => {
           <Logo height={22} width={180} logoVariant="navigation" logoSize="default" />
         </div>
         <h1 className="self-center text-2xl font-semibold">Вход в аккаунт</h1>
+        {communityName && <InvitationMessage communityName={communityName} />}
         <FormField
           control={control}
           name="email"

diff --git a/packages/pkg.module.add-community/AddCommunityModal.tsx b/packages/pkg.module.add-community/AddCommunityModal.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { Button } from '@xipkg/button';
 import { Close } from '@xipkg/icons';
 import * as M from '@xipkg/modal';

diff --git a/packages/pkg.module.videoconference/components/CarouselLayout.tsx b/packages/pkg.module.videoconference/components/CarouselLayout.tsx
@@ -14,11 +14,7 @@ export function CarouselLayout({ tracks, orientation, ...props }: CarouselLayout
   const asideEl = React.useRef<HTMLDivElement>(null);
   const [prevTiles, setPrevTiles] = React.useState(0);
   const { width, height } = useSize(asideEl);
-  const carouselOrientation = orientation
-    ? orientation
-    : height >= width
-      ? 'vertical'
-      : 'horizontal';
+  const carouselOrientation = orientation || (height >= width ? 'vertical' : 'horizontal');
 
   const tileSpan =
     carouselOrientation === 'vertical'

diff --git a/packages/pkg.module.videoconference/components/ParticipantTile.tsx b/packages/pkg.module.videoconference/components/ParticipantTile.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import '@livekit/components-styles';
 import React from 'react';
 import { Track } from 'livekit-client';
@@ -25,16 +26,18 @@ import {
   useParticipantTile,
 } from '@livekit/components-react';
 
-function TrackRefContextIfNeeded(
-  props: React.PropsWithChildren<{
-    trackRef?: TrackReferenceOrPlaceholder;
-  }>,
-) {
+function TrackRefContextIfNeeded({
+  trackRef,
+  children,
+}: {
+  trackRef?: TrackReferenceOrPlaceholder;
+  children?: React.ReactNode;
+}) {
   const hasContext = !!useMaybeTrackRefContext();
-  return props.trackRef && !hasContext ? (
-    <TrackRefContext.Provider value={props.trackRef}>{props.children}</TrackRefContext.Provider>
+  return trackRef && !hasContext ? (
+    <TrackRefContext.Provider value={trackRef}>{children}</TrackRefContext.Provider>
   ) : (
-    <>{props.children}</>
+    <>{children}</>
   );
 }
 
@@ -52,13 +55,11 @@ export function ParticipantTile({
   const maybeTrackRef = useMaybeTrackRefContext();
   const p = useEnsureParticipant(participant);
   const isSpeaking = useIsSpeaking(participant);
-  const trackReference: TrackReferenceOrPlaceholder = React.useMemo(() => {
-    return {
+  const trackReference: TrackReferenceOrPlaceholder = React.useMemo(() => ({
       participant: trackRef?.participant ?? maybeTrackRef?.participant ?? p,
       source: trackRef?.source ?? maybeTrackRef?.source ?? source,
       publication: trackRef?.publication ?? maybeTrackRef?.publication ?? publication,
-    };
-  }, [maybeTrackRef, p, publication, source, trackRef]);
+    }), [maybeTrackRef, p, publication, source, trackRef]);
 
   const { elementProps } = useParticipantTile<HTMLDivElement>({
     participant: trackReference.participant,
@@ -99,11 +100,11 @@ export function ParticipantTile({
                 (trackReference.publication?.kind === 'video' ||
                   trackReference.source === Track.Source.Camera ||
                   trackReference.source === Track.Source.ScreenShare) ? (
-                  <VideoTrack
-                    trackRef={trackReference}
-                    onSubscriptionStatusChanged={handleSubscribe}
-                    manageSubscription={autoManageSubscription}
-                  />
+                    <VideoTrack
+                      trackRef={trackReference}
+                      onSubscriptionStatusChanged={handleSubscribe}
+                      manageSubscription={autoManageSubscription}
+                    />
                 ) : (
                   isTrackReference(trackReference) && (
                     <AudioTrack
@@ -123,9 +124,9 @@ export function ParticipantTile({
                         {isEncrypted && <LockLockedIcon style={{ background: 'transperent' }} />}
                         <TrackMutedIndicator
                           source={Track.Source.Microphone}
-                          show={'muted'}
+                          show="muted"
                           style={{ marginRight: '0.25rem', background: 'transperent' }}
-                        ></TrackMutedIndicator>
+                        />
                         <ParticipantName />
                       </div>
                     ) : (

diff --git a/packages/pkg.module.videoconference/components/PreJoin.tsx b/packages/pkg.module.videoconference/components/PreJoin.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+/* eslint-disable no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import React, { useEffect } from 'react';

diff --git a/packages/pkg.module.videoconference/components/PreJoinSection.tsx b/packages/pkg.module.videoconference/components/PreJoinSection.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
 import { Button } from '@xipkg/button';
 import React from 'react';
 import { useMediaDeviceSelect } from '@livekit/components-react';

diff --git a/packages/pkg.module.videoconference/components/UpBar.tsx b/packages/pkg.module.videoconference/components/UpBar.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+
 'use client';
 
 import React from 'react';

diff --git a/packages/pkg.module.videoconference/components/VideoTrack.tsx b/packages/pkg.module.videoconference/components/VideoTrack.tsx
@@ -3,8 +3,6 @@ import type { TrackReferenceOrPlaceholder, WidgetState } from '@livekit/componen
 import '@livekit/components-styles';
 import { isEqualTrackRef, isTrackReference, isWeb, log } from '@livekit/components-core';
 import { RoomEvent, Track } from 'livekit-client';
-import { ParticipantTile } from './ParticipantTile';
-import { FocusLayout } from './FocusLayout';
 import {
   CarouselLayout,
   ConnectionStateToast,
@@ -17,6 +15,8 @@ import {
   usePinnedTracks,
   useTracks,
 } from '@livekit/components-react';
+import { ParticipantTile } from './ParticipantTile';
+import { FocusLayout } from './FocusLayout';
 
 export function VideoConference({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars