Skip to content

Commit 76f7715

Browse files
author
Alex Patterson
committed
change all images to next/image
1 parent 83c3528 commit 76f7715

12 files changed

Lines changed: 2221 additions & 728 deletions

File tree

‎frontend/main/.eslintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"extends": [
44
"plugin:@typescript-eslint/recommended",
55
"plugin:react/recommended",
6+
"plugin:@next/next/recommended",
67
"plugin:prettier/recommended"
78
],
89
"plugins": ["@typescript-eslint", "react", "prettier"],

‎frontend/main/package-lock.json‎

Lines changed: 2142 additions & 706 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/main/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"devDependencies": {
6565
"@fullhuman/postcss-purgecss": "^3.1.3",
6666
"@next/bundle-analyzer": "^11.1.2",
67+
"@next/eslint-plugin-next": "^11.1.2",
6768
"@types/cookie": "^0.4.0",
6869
"@types/js-cookie": "^2.2.6",
6970
"@types/node": "^14.14.14",
@@ -79,8 +80,9 @@
7980
"@typescript-eslint/eslint-plugin": "^4.8.2",
8081
"@typescript-eslint/parser": "^4.8.2",
8182
"autoprefixer": "^10.0.2",
82-
"eslint": "^7.14.0",
83+
"eslint": "^7.24.0",
8384
"eslint-config-prettier": "^6.15.0",
85+
"eslint-config-next": "^11.1.2",
8486
"eslint-plugin-prettier": "^3.3.0",
8587
"eslint-plugin-react": "^7.21.5",
8688
"postcss": "^8.2.1",

‎frontend/main/src/components/MembershipCards.tsx‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from 'next/image';
12
import { StripeProduct } from '@/models/stripe.model';
23
import { stripeCheckout } from '@/services/api';
34
import { useUser } from '@/utils/auth/useUser';
@@ -28,6 +29,29 @@ export default function MembershipCards({
2829
}
2930
}
3031

32+
const getProductImage = (product: StripeProduct) => {
33+
if (!product || !product.images) {
34+
return <AJPrimary className="w-full h-full" />;
35+
}
36+
37+
const img = product.images[0];
38+
39+
if (!img) {
40+
return <AJPrimary className="w-full h-full" />;
41+
}
42+
43+
return (
44+
<Image
45+
src={img}
46+
loader={() => img}
47+
layout="fixed"
48+
width="335"
49+
height="270"
50+
alt={`Product Photo for ${product.description}`}
51+
/>
52+
);
53+
};
54+
3155
return (
3256
<>
3357
<div
@@ -81,12 +105,7 @@ export default function MembershipCards({
81105
}
82106
></div> */}
83107
{product.images ? (
84-
<img
85-
src={product.images[0]}
86-
alt={product.name}
87-
width="480"
88-
height="270"
89-
/>
108+
getProductImage(product)
90109
) : (
91110
<AJPrimary className="w-full h-full" />
92111
)}

‎frontend/main/src/components/PostLayout.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import DefaultErrorPage from 'next/error';
22
import { NextRouter } from 'next/router';
33
import Link from 'next/link';
4+
import Image from 'next/image';
45

56
import { useEffect, useState } from 'react';
67
import { Post, PostType, SectionLesson } from '@/models/post.model';
@@ -58,7 +59,7 @@ export default function PostLayout({
5859
}, [user]);
5960

6061
function isActiveLink(course: Post, lesson: SectionLesson) {
61-
if (router.asPath === `/courses/${course.slug}/lessons/${lesson.slug}`)
62+
if (router.asPath === `/course/${course.slug}/lesson/${lesson.slug}`)
6263
return true;
6364
return false;
6465
}
@@ -166,8 +167,12 @@ export default function PostLayout({
166167
>
167168
<section className="flex items-center flex-shrink-0 space-x-4">
168169
{author.photoURL && (
169-
<img
170+
<Image
170171
src={author.photoURL}
172+
loader={() => author.photoURL || ''}
173+
layout="fixed"
174+
height="50"
175+
width="50"
171176
alt="instructor"
172177
className="w-12 border-2 rounded-full border-primary-50 dark:border-primary-50"
173178
/>
@@ -243,17 +248,18 @@ export default function PostLayout({
243248
<Link
244249
href={`/course/${course.slug}/lesson/${lesson.slug}`}
245250
key={lesson.id}
251+
passHref
246252
>
247253
<div
248-
className={`p-2 cursor-pointer
254+
className={`p-2 cursor-pointer hover:bg-primary-200
249255
${
250256
isActiveLink(course, lesson)
251257
? 'bg-primary-200'
252258
: 'bg-transparent'
253259
}
254260
`}
255261
>
256-
<a className="no-underline text-basics-900 hover:text-primary-900 hover:underline">
262+
<a className="no-underline text-basics-900 hover:text-primary-900">
257263
{lesson.title}
258264
</a>
259265
</div>

‎frontend/main/src/components/admin/EditPostCourseSections.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,7 @@ export default function EditPostCourseSections({
293293
>
294294
<Link
295295
href={`/admin/lessons/${lesson.id}`}
296+
passHref
296297
>
297298
<div className="flex flex-col">
298299
<a className="text-2xl underline cursor-pointer">

‎frontend/main/src/components/admin/EditPostSidebar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,6 @@ export default function EditPostSidebar({
212212
Preview
213213
</div>
214214
<div className="p-2 bg-basics-50 dark:bg-basics-800">
215-
<img src="" alt="" className="" />
216215
<button
217216
className="w-full btn-secondary"
218217
onClick={() =>

‎frontend/main/src/components/authors/AuthorCard.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from 'next/image';
12
import { UserInfoExtended } from '@/models/user.model';
23

34
export default function AuthorCard({
@@ -8,14 +9,22 @@ export default function AuthorCard({
89
return (
910
<article className="grid items-start max-w-md grid-cols-1 gap-4 p-4 shadow-lg justify-items-center justify-self-center bg-basics-50 text-basics-900 hover:text-basics-900 hover:shadow-sm">
1011
{author?.displayName && author?.photoURL ? (
11-
<img
12-
className="rounded-full"
12+
<Image
1313
src={author.photoURL}
14+
loader={() => author.photoURL || ''}
15+
layout="fixed"
16+
width="96"
17+
height="96"
1418
alt={author.displayName}
19+
className="w-24 rounded-full"
1520
/>
1621
) : (
17-
<img
22+
<Image
1823
className="w-24 rounded-full"
24+
layout="fixed"
25+
width="96"
26+
height="96"
27+
loader={() => '/static/images/avatar.png'}
1928
src="/static/images/avatar.png"
2029
alt="Avatar Image Placeholder"
2130
/>

‎frontend/main/src/components/settings/UserProfile.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export default function UserProfile(): JSX.Element {
6969
<form className="grid gap-4">
7070
<div className="grid gap-4">
7171
{profile.photoURL ? (
72+
// eslint-disable-next-line @next/next/no-img-element
7273
<img
7374
className="w-24"
7475
src={profile.photoURL}
@@ -79,6 +80,7 @@ export default function UserProfile(): JSX.Element {
7980
}
8081
/>
8182
) : (
83+
// eslint-disable-next-line @next/next/no-img-element
8284
<img
8385
className="w-24"
8486
src="/static/images/avatar.png"

‎frontend/main/src/components/user/AvatarMenu.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Link from 'next/link';
2+
import Image from 'next/image';
23

34
import { useUser } from '@/utils/auth/useUser';
45
import ActiveLink from '@/components/ActiveLink';
@@ -56,20 +57,28 @@ export default function UserSignin({
5657
>
5758
<span className="sr-only">Open user menu</span>
5859
{profile && profile.photoURL ? (
59-
<img
60-
className="w-8 h-8 rounded-full"
60+
<Image
6161
src={profile.photoURL}
62+
loader={() => profile.photoURL || ''}
63+
layout="fixed"
64+
width="40"
65+
height="40"
6266
alt={
6367
profile.displayName
6468
? profile.displayName
6569
: 'A Good Description'
6670
}
71+
className="w-8 h-8 rounded-full"
6772
/>
6873
) : (
69-
<img
70-
className="w-8 h-8 rounded-full"
74+
<Image
7175
src="/static/images/avatar.png"
72-
alt=""
76+
loader={() => '/static/images/avatar.png'}
77+
layout="fixed"
78+
width="40"
79+
height="40"
80+
alt="Avatar for user Profile"
81+
className="w-8 h-8 rounded-full"
7382
/>
7483
)}
7584
</button>

0 commit comments

Comments
 (0)