Feat/users page

.yarnrc.yml

@@ -1,4 +1,10 @@
 packageExtensions:
+  '@emotion/utils@*':
+    dependencies:
+      '@emotion/sheet': '*'
+  '@atls-ui-parts/layout@*':
+    dependencies:
+      '@emotion/react': '*'
   '@graphql-codegen/plugin-helpers@*':
     dependencies:
       '@graphql-tools/apollo-engine-loader': '8.0.1'

app/api/github-auth-cookie/package.json

@@ -8,6 +8,6 @@
   },
   "main": "src/index.ts",
   "dependencies": {
-    "@globals/data": "workspace:*"
+    "@globals/github-hooks": "workspace:*"
   }
 }

app/api/github-auth-cookie/src/github-auth-cookie-handle.api.ts

@@ -3,7 +3,7 @@ import { cookies }             from 'next/headers'
 // @ts-ignore:next-line
 import { redirect }            from 'next/navigation'
 
-import { getGithubAuthToken }  from '@globals/data'
+import { getGithubAuthToken }  from '@globals/github-hooks'
 
 import { COOKIE_EXPIRES_WEEK } from './github-auth-cookie-handle.constants.js'
 import { RU_MESSAGES }         from './github-auth-cookie-handle.messages.js'

app/entrypoints/renderer/locales/ru.json

@@ -9,9 +9,9 @@
   "add-member-to-organization-modal_input.placeholder": "Team member",
   "organization-card_member.one": "member",
   "organization-card_member.many": "members",
-  "confirm-deleting-organization.warning": "Вы уверены, что хотите исключить пользователя из данной организации?",
-  "confirm-deleting-organization.yes": "Да",
-  "confirm-deleting-organization.no": "Нет",
+  "remove-organization-request.text": "Вы уверены, что хотите исключить пользователя из данной организации?",
+  "yes": "Да",
+  "no": "Нет",
   "logo-title": "Team management system",
   "notifications-modal.title": "Уведомления",
   "notifications-modal.mark-all-read": "Отметить все, как прочитанное",

app/entrypoints/renderer/next.config.js

@@ -24,15 +24,24 @@ export default {
   compiler: {
     styledComponents: true,
   },
-  webpack: (webpackConfig, { webpack }) => {
+  webpack: (webpackConfig, { webpack, isServer }) => {
+    // в названии пакета есть ".js", поэтому меняю регекс
     webpackConfig.plugins.push(
-      new webpack.NormalModuleReplacementPlugin(new RegExp(/\.js$/), function (
+      new webpack.NormalModuleReplacementPlugin(new RegExp(/^(\.{1,2}\/)+\S*\.js$/), function (
         /** @type {{ request: string }} */
         resource
       ) {
         resource.request = resource.request.replace('.js', '')
       })
     )
+
+    // discord.js not resolve zLib-sync without it
+    // https://github.com/discordjs/discord.js/issues/9592
+    webpackConfig.module.rules.push({
+      test: /\.node$/,
+      loader: 'node-loader',
+    })
+
     return webpackConfig
   },
   output: 'standalone',

app/entrypoints/renderer/package.json

@@ -19,18 +19,19 @@
     "@app/index-page": "workspace:*",
     "@app/loading": "workspace:*",
     "@app/logout-api": "workspace:*",
+    "@app/members-page": "workspace:*",
     "@app/organizations-page": "workspace:*",
     "@app/registration-page": "workspace:*",
     "@app/root-layout": "workspace:*",
     "@app/send-invite-mail-api": "workspace:*",
-    "@app/users-page": "workspace:*",
     "@emotion/react": "11.11.4",
     "@stores/toast-notification": "workspace:*",
     "@types/node": "20.12.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@ui/theme": "workspace:*",
-    "next": "14.1.0",
+    "next": "14.2.5",
+    "node-loader": "2.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "typescript": "5.2.2"

app/entrypoints/renderer/src/.env

@@ -1,11 +1,14 @@
 NEXT_PUBLIC_GH_CLIENT_ID="Ov23li9kGqtVre5AFIeA"
 NEXT_PUBLIC_GH_CLIENT_SECRET="234d7e0689b3f86506133b082896aa95c6fdf341"
 NEXT_PUBLIC_TOKEN_COOKIE_NAME='token'
-NEXT_PUBLIC_INVITE_GITHUB_ORG_NAME='effectivnayarabota1-test-organization'
+NEXT_PUBLIC_GITHUB_ORG_NAME='ssagg-test'
 NEXT_PUBLIC_INVITE_FIGMA_URL='http://localhost:3000/figma'
 NEXT_PUBLIC_INVITE_DISCORD_URL='http://localhost:3000/discord'
 NEXT_PUBLIC_INVITE_TELEGRAM='http://localhost:3000/telegram'
 SMTP_AUTH_HOST='smtp.ethereal.email'
 SMTP_AUTH_PORT=587
 SMTP_AUTH_USER='gonzalo20@ethereal.email'
 SMTP_AUTH_PASS='d4P4DrQy9QtWuvCe8F'
+NEXT_PUBLIC_DISCORD_API_TOKEN="MTI2NzQ5OTAyODg0NTgyNjEzMA.GcZinV.ZJfw4zfY9jTbjFNNMaYdcOxjfKLGuS2ZvmRMeI"
+NEXT_PUBLIC_DISCORD_GUILD_ID="1267841184915521570"
+WS_NO_BUFFER_UTIL=true

app/entrypoints/renderer/src/app/(dashboard)/members/page.ts

@@ -0,0 +1 @@
+export { default } from '@app/members-page'

app/entrypoints/renderer/src/middleware.ts

@@ -13,5 +13,5 @@ export const middleware = (request: NextRequest) => {
 }
 
 export const config = {
-  matcher: ['/organizations', '/users'],
+  matcher: ['/organizations', '/members'],
 }

app/fragments/app-add-member-to-organization-modal/src/add-member-to-organization-modal.component.tsx

@@ -1,5 +1,5 @@
 import type { OrganizationTeamType }         from '@globals/data'
-import type { OrganizationMemberType }       from '@globals/data'
+import type { OrganizationMemberDataType }   from '@globals/data'
 
 import { useTheme }                          from '@emotion/react'
 
@@ -36,7 +36,7 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
   const theme = useTheme() as ThemeType
 
   const [inviteButtonState, setInviteButtonState] = useState<InviteButtonStateType>('disabled')
-  const [selectedUsers, setSelectedUsers] = useState<Array<OrganizationMemberType>>([])
+  const [selectedUsers, setSelectedUsers] = useState<Array<OrganizationMemberDataType>>([])
   const [selectedTeams, setSelectedTeams] = useState<Array<OrganizationTeamType>>([])
   const [teamsData, setTeamsData] = useState<Array<OrganizationTeamType>>([])
 

app/fragments/app-add-member-to-organization-modal/src/github-users-search/github-users-search.interface.ts

@@ -2,5 +2,5 @@ import { Dispatch }       from 'react'
 import { SetStateAction } from 'react'
 
 export type GithubUserSearchType = {
-  setSelectedUsersParentHook: Dispatch<SetStateAction<never[]>>
+  setSelectedUsersParentHook: Dispatch<SetStateAction<any>>
 }

app/fragments/app-add-member-to-organization-modal/src/github-users-search/hooks/get-searched-users.hook.ts

@@ -1,16 +1,12 @@
-import { SEARCH_USER }          from '@globals/data'
-import { SearchUserQuery }      from '@globals/data'
-import { octokitGraphqlClient } from '@globals/data'
-import { getTokenCookie }       from '@globals/helpers'
+import { SEARCH_USER }               from '@globals/data'
+import { SearchUserQuery }           from '@globals/data'
+import { requestOctokitGraphqlData } from '@globals/data'
 
-import { SEARCH_USERS_LIMIT }   from '../github-users-search.constants.js'
+import { SEARCH_USERS_LIMIT }        from '../github-users-search.constants.js'
 
 export const getSearchedUsers = async ({ searchQuery, toast }) => {
-  const token = getTokenCookie(document)
-  const client = octokitGraphqlClient(token)
-
   try {
-    const response = (await client(SEARCH_USER, {
+    const response = (await requestOctokitGraphqlData(document, SEARCH_USER, {
       searchLimit: SEARCH_USERS_LIMIT,
       searchQuery,
     })) as SearchUserQuery

app/fragments/app-add-member-to-organization-modal/src/hooks/get-organization-teams.hook.ts

@@ -1,8 +1,6 @@
 import { GET_ORGANIZATION_TEAMS }    from '@globals/data'
-import { GetOrganizationTeamsQuery } from '@globals/data'
 import { OrganizationTeamType }      from '@globals/data'
-import { octokitGraphqlClient }      from '@globals/data'
-import { getTokenCookie }            from '@globals/helpers'
+import { requestOctokitGraphqlData } from '@globals/data'
 
 import { ORGANIZATION_TEAMS_LIMIT }  from '../add-member-to-organization-modal.constants.js'
 import { GetOrganizationTeamsType }  from './get-organization-teams.interface.js'
@@ -13,13 +11,10 @@ export const getOrganizatoinTeamsHook: GetOrganizationTeamsType = async ({
   toast,
 }) => {
   try {
-    const token = getTokenCookie(document)
-    const client = octokitGraphqlClient(token)
-
-    const response = (await client(GET_ORGANIZATION_TEAMS, {
+    const response = await requestOctokitGraphqlData(document, GET_ORGANIZATION_TEAMS, {
       organizationId,
       organizationTeamsLimit: ORGANIZATION_TEAMS_LIMIT,
-    })) as GetOrganizationTeamsQuery
+    })
 
     if (response && response.node && 'teams' in response.node) {
       const {
@@ -28,7 +23,7 @@ export const getOrganizatoinTeamsHook: GetOrganizationTeamsType = async ({
         },
       } = response
 
-      setTeamsData(teamsData as OrganizationTeamType)
+      setTeamsData(teamsData as Array<OrganizationTeamType>)
     }
   } catch (e: any) {
     // eslint-disable-next-line no-console

app/fragments/app-add-member-to-organization-modal/src/hooks/get-organization-teams.interface.ts

@@ -7,6 +7,6 @@ export type GetOrganizationTeamsType = ({
   toast,
 }: {
   organizationId: string
-  setTeamsData: (teamsData: OrganizationTeamType) => void
+  setTeamsData: (teamsData: Array<OrganizationTeamType>) => void
   toast: ToastType
 }) => void

app/fragments/app-add-member-to-organization-modal/src/hooks/invite-button-click.hook.ts

@@ -1,8 +1,7 @@
-import type { InviteButtonClickType }      from './invite-button-click.interface.js'
+import type { InviteButtonClickType }         from './invite-button-click.interface.js'
 
-import { inviteMemberToOrganizationQuery } from '@globals/data'
-import { createOctokitRestClient }         from '@globals/data'
-import { getTokenCookie }                  from '@globals/helpers'
+import { inviteMemberToOrganizationGetQuery } from '@globals/data'
+import { requestOctokitRestData }             from '@globals/data'
 
 export const inviteButtonClickHook: InviteButtonClickType = async ({
   organizationLogin,
@@ -11,20 +10,17 @@ export const inviteButtonClickHook: InviteButtonClickType = async ({
   selectedUsers,
   setInviteButtonState,
 }) => {
-  const token = getTokenCookie(document)
-
   try {
-    const restClient = createOctokitRestClient(token)
     for await (const selectedUser of selectedUsers) {
-      const { githubUserId } = selectedUser
+      const { id: githubUserId } = selectedUser
 
-      const query = inviteMemberToOrganizationQuery({
+      const query = inviteMemberToOrganizationGetQuery({
         organizationLogin,
         githubUserId,
         teamIds: selectedTeams,
-      }) as [any]
+      })
 
-      await restClient(...query)
+      await requestOctokitRestData(document, query)
     }
 
     setInviteButtonState('successed')

app/fragments/app-add-member-to-organization-modal/src/hooks/invite-button-click.interface.ts

@@ -1,6 +1,5 @@
-import type { OrganizationTeamType }   from '@globals/data'
-import type { OrganizationMemberType } from '@globals/data'
-import type { ToastType }              from '@stores/toast-notification'
+import type { OrganizationMemberDataType } from '@globals/data'
+import type { ToastType }                  from '@stores/toast-notification'
 
 export type InviteButtonClickType = ({
   organizationLogin,
@@ -10,8 +9,8 @@ export type InviteButtonClickType = ({
   setInviteButtonState,
 }: {
   organizationLogin: string
-  selectedTeams: Array<OrganizationTeamType>
+  selectedTeams: string
   toast: ToastType
-  selectedUsers: Array<OrganizationMemberType>
+  selectedUsers: Array<OrganizationMemberDataType>
   setInviteButtonState: (state: string) => void
 }) => void

app/fragments/app-base-layout/src/base-layout.client.tsx

@@ -32,6 +32,7 @@ export const BaseLayoutClient: FC<PropsWithChildren<BaseLayoutProps>> = ({
           maxWidth={theme.spaces.extraSuperLarge}
           margin={theme.spaces.horizontalAutoMargin}
           gap={theme.spaces.large}
+          padding={theme.spaces.t0h24b128}
           justifyContent='flex-start'
           alignItems='flex-start'
         >