From 684df96969f881c5367ab9f39d68fb3384d921fa Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 7 Jun 2023 01:56:21 +0530 Subject: [PATCH] chore: replace nextjs Image element (#1227) --- apps/app/.eslintrc.js | 3 + .../scope-and-demand/leaderboard.tsx | 10 +- apps/app/components/core/feeds.tsx | 8 +- .../components/core/image-picker-popover.tsx | 16 +-- .../cycles/active-cycle-details.tsx | 3 +- .../components/cycles/active-cycle-stats.tsx | 9 +- apps/app/components/cycles/sidebar.tsx | 3 +- .../components/cycles/single-cycle-card.tsx | 3 +- .../components/cycles/single-cycle-list.tsx | 2 +- .../integration/github/single-user-select.tsx | 7 +- apps/app/components/issues/activity.tsx | 5 +- .../issues/comment/comment-card.tsx | 5 +- apps/app/components/onboarding/workspace.tsx | 4 +- .../project/create-project-modal.tsx | 11 +- .../project/single-project-card.tsx | 7 +- apps/app/components/search-listbox/index.tsx | 11 +- apps/app/components/ui/avatar.tsx | 6 +- .../components/workspace/sidebar-dropdown.tsx | 23 ++-- .../workspace/single-invitation.tsx | 115 ++++++++---------- .../[workspaceSlug]/me/profile/index.tsx | 11 +- .../projects/[projectId]/settings/control.tsx | 17 +-- .../projects/[projectId]/settings/index.tsx | 7 +- .../projects/[projectId]/settings/members.tsx | 7 +- .../pages/[workspaceSlug]/settings/index.tsx | 8 +- .../[workspaceSlug]/settings/members.tsx | 6 +- 25 files changed, 121 insertions(+), 186 deletions(-) diff --git a/apps/app/.eslintrc.js b/apps/app/.eslintrc.js index c8df60750..38e6a5f4c 100644 --- a/apps/app/.eslintrc.js +++ b/apps/app/.eslintrc.js @@ -1,4 +1,7 @@ module.exports = { root: true, extends: ["custom"], + rules: { + "@next/next/no-img-element": "off", + }, }; diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx index 9e28d0f3e..855f9eff4 100644 --- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx +++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx @@ -1,5 +1,3 @@ -import Image from "next/image"; - type Props = { users: { avatar: string | null; @@ -23,12 +21,10 @@ export const AnalyticsLeaderboard: React.FC = ({ users, title }) => ( >
{user && user.avatar && user.avatar !== "" ? ( -
- + {user.email
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx index bd0e4c6bf..cce482da5 100644 --- a/apps/app/components/core/feeds.tsx +++ b/apps/app/components/core/feeds.tsx @@ -1,5 +1,6 @@ import React from "react"; -import Image from "next/image"; + +import Link from "next/link"; // icons import { @@ -22,7 +23,6 @@ import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper" import { addSpaceIfCamelCase } from "helpers/string.helper"; // types import RemirrorRichTextEditor from "components/rich-text-editor"; -import Link from "next/link"; const activityDetails: { [key: string]: { @@ -206,7 +206,7 @@ export const Feeds: React.FC = ({ activities }) => (
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? ( - {activity.actor_detail.first_name} = ({ activities }) => ( activityDetails[activity.field as keyof typeof activityDetails]?.icon ) : activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? ( - {activity.actor_detail.first_name} = ({ label, value, onChange }) onChange={(e) => setFormData({ ...formData, search: e.target.value })} placeholder="Search for images" /> - setSearchParams(formData.search)} - className="bg-indigo-600" - size="sm" - > + setSearchParams(formData.search)} size="sm"> Search
@@ -123,12 +115,10 @@ export const ImagePickerPopover: React.FC = ({ label, value, onChange }) key={image.id} className="relative col-span-2 aspect-video md:col-span-1" > - {image.alt_description} { setIsOpen(false); onChange(image.urls.regular); diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx index 8dfe36a53..0bb5a6bcb 100644 --- a/apps/app/components/cycles/active-cycle-details.tsx +++ b/apps/app/components/cycles/active-cycle-details.tsx @@ -1,7 +1,6 @@ import React from "react"; import Link from "next/link"; -import Image from "next/image"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; @@ -301,7 +300,7 @@ export const ActiveCycleDetails: React.FC = ({ cycle, isComple
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( - = ({ issues }) => { -
- + = ({
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( - = ({
Creator:
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( - = ({
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( - = ({ collaborator, index, users,
- {`${collaborator.login}
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx index 1ccafae56..3b9ecc853 100644 --- a/apps/app/components/issues/activity.tsx +++ b/apps/app/components/issues/activity.tsx @@ -1,6 +1,7 @@ import React from "react"; + import { useRouter } from "next/router"; -import Image from "next/image"; + import useSWR from "swr"; // icons @@ -346,7 +347,7 @@ export const IssueActivitySection: React.FC = ({ user }) => { ?.icon ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? ( - {activityItem.actor_detail.first_name} = ({ comment, onSubmit, handleCommentD
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? ( - {comment.actor_detail.first_name} ) : (
= ({ setStep, setWorkspace, user }) => {
{invitation.workspace.logo && invitation.workspace.logo !== "" ? ( - = (props) => { leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > -
+
{watch("cover_image") !== null && ( - cover image )} diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx index c2844212d..66ef6aa2a 100644 --- a/apps/app/components/project/single-project-card.tsx +++ b/apps/app/components/project/single-project-card.tsx @@ -2,7 +2,6 @@ import React from "react"; import { useRouter } from "next/router"; import Link from "next/link"; -import Image from "next/image"; import { mutate } from "swr"; @@ -142,15 +141,13 @@ export const SingleProjectCard: React.FC = ({
- {project.name}
{!hasJoined ? ( diff --git a/apps/app/components/search-listbox/index.tsx b/apps/app/components/search-listbox/index.tsx index ef7c33634..cbbc6cf5b 100644 --- a/apps/app/components/search-listbox/index.tsx +++ b/apps/app/components/search-listbox/index.tsx @@ -1,6 +1,5 @@ import React, { useState } from "react"; -import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; @@ -62,12 +61,10 @@ const SearchListbox: React.FC = ({ if (user.member.avatar && user.member.avatar !== "") { return (
- avatar
); @@ -151,7 +148,9 @@ const SearchListbox: React.FC = ({ )) ) : ( -

No {title.toLowerCase()} found

+

+ No {title.toLowerCase()} found +

) ) : (

Loading...

diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx index 7d2d9a575..06534c121 100644 --- a/apps/app/components/ui/avatar.tsx +++ b/apps/app/components/ui/avatar.tsx @@ -44,11 +44,9 @@ export const Avatar: React.FC = ({ width: width, }} > - {user.first_name}
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx index 680b688ed..6e5774434 100644 --- a/apps/app/components/workspace/sidebar-dropdown.tsx +++ b/apps/app/components/workspace/sidebar-dropdown.tsx @@ -1,9 +1,10 @@ import { Fragment } from "react"; -import { Menu, Transition } from "@headlessui/react"; + import { useRouter } from "next/router"; -import Image from "next/image"; import Link from "next/link"; -import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline"; + +// headless ui +import { Menu, Transition } from "@headlessui/react"; // hooks import useUser from "hooks/use-user"; import useTheme from "hooks/use-theme"; @@ -14,7 +15,9 @@ import userService from "services/user.service"; import authenticationService from "services/authentication.service"; // components import { Avatar, Loader } from "components/ui"; -// helper +// icons +import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline"; +// helpers import { truncateText } from "helpers/string.helper"; // types import { IWorkspace } from "types"; @@ -94,12 +97,10 @@ export const WorkspaceSidebarDropdown = () => { >
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( - Workspace Logo ) : ( activeWorkspace?.name?.charAt(0) ?? "..." @@ -155,12 +156,10 @@ export const WorkspaceSidebarDropdown = () => {
{workspace?.logo && workspace.logo !== "" ? ( - Workspace Logo ) : ( workspace?.name?.charAt(0) ?? "..." diff --git a/apps/app/components/workspace/single-invitation.tsx b/apps/app/components/workspace/single-invitation.tsx index 6d89c7675..73f6d4655 100644 --- a/apps/app/components/workspace/single-invitation.tsx +++ b/apps/app/components/workspace/single-invitation.tsx @@ -1,8 +1,5 @@ -// next +// helpers import { getFirstCharacters, truncateText } from "helpers/string.helper"; -import Image from "next/image"; -// react -import { useState } from "react"; // types import { IWorkspaceMemberInvitation } from "types"; @@ -16,65 +13,57 @@ const SingleInvitation: React.FC = ({ invitation, invitationsRespond, handleInvitation, -}) => { - const [isChecked, setIsChecked] = useState(invitationsRespond.includes(invitation.id)); - - return ( - <> -
  • -
  • + -
    • - - ); -}; + )} +     +
    +
    +
    {truncateText(invitation.workspace.name, 30)}
    +

    + Invited by{" "} + {invitation.created_by_detail + ? invitation.created_by_detail.first_name + : invitation.workspace.owner.first_name} +

    +
    +
    + +
    + + +); export default SingleInvitation; diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx index c4ab6918f..8c1f9cd1e 100644 --- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx +++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx @@ -1,7 +1,5 @@ import React, { useEffect, useState } from "react"; -import Image from "next/image"; - // react-hook-form import { Controller, useForm } from "react-hook-form"; // services @@ -168,14 +166,11 @@ const Profile: NextPage = () => {
    ) : (
    - {myProfile.first_name} setIsImageUploadModalOpen(true)} - priority + alt={myProfile.first_name} />
    )} diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx index 5dc398e66..c6e02d726 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from "react"; import { useRouter } from "next/router"; -import Image from "next/image"; import useSWR, { mutate } from "swr"; @@ -138,12 +137,10 @@ const ControlSettings: NextPage = () => {
    {person.member.avatar && person.member.avatar !== "" ? (
    - avatar
    ) : ( @@ -201,12 +198,10 @@ const ControlSettings: NextPage = () => {
    {person.member.avatar && person.member.avatar !== "" ? (
    - avatar
    ) : ( diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx index 14e20811a..92b55cebe 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from "react"; -import Image from "next/image"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; @@ -256,12 +255,10 @@ const GeneralSettings: NextPage = () => { {watch("cover_image") ? (
    - {projectDetails?.name
    {
    {member.avatar && member.avatar !== "" ? ( - {member.first_name} ) : member.first_name !== "" ? ( member.first_name.charAt(0) diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx index 0400ecaee..21865ef02 100644 --- a/apps/app/pages/[workspaceSlug]/settings/index.tsx +++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; -import Image from "next/image"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; @@ -190,13 +189,10 @@ const WorkspaceSettings: NextPage = () => {