Skip to content

Commit a01b558

Browse files
alexjballalexjball
committed
Upgrade to next 11
1 parent 0851ee8 commit a01b558

File tree

10 files changed

+804
-2323
lines changed

10 files changed

+804
-2323
lines changed

‎components/Image.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import NextImage, { ImageProps, ImageLoaderProps } from "next/image"
2+
3+
const customLoader = ({ src }: ImageLoaderProps) => {
4+
return src
5+
}
6+
7+
/**
8+
* https://github.com/vercel/next.js/discussions/19065
9+
*/
10+
export default function Image(props: ImageProps) {
11+
return <NextImage {...props} loader={customLoader} unoptimized={true} />
12+
}

‎components/Map/Map.jsx

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import "./L.Control.Sidebar";
1212
import "leaflet.markercluster/dist/leaflet.markercluster";
1313
import "leaflet.markercluster/dist/MarkerCluster.css";
1414
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
15+
import Image from '../Image'
1516

1617
// This is awful, I'm aware. I really don't know
1718
// how to do this better, I had enough trouble getting
@@ -76,8 +77,6 @@ class Map extends Component {
7677
return acc;
7778
}, {});
7879

79-
console.log(repDataByURL);
80-
8180
const repProperties = (feature) => {
8281
const data = repDataByURL[feature.properties.url] || {};
8382
return { ...feature.properties, ...data };
@@ -86,43 +85,43 @@ class Map extends Component {
8685
/* Templates for map elements */
8786
const districtLegend = () => /* html */ `
8887
<strong>Grade of support for bill</strong>
89-
<div class="legend__item legend__item--grade-1">
88+
<div className="legend__item legend__item--grade-1">
9089
Committed to vote
9190
</div>
92-
<div class="legend__item legend__item--grade-2">
91+
<div className="legend__item legend__item--grade-2">
9392
Substantial past advocacy
9493
</div>
95-
<div class="legend__item legend__item--grade-3">
94+
<div className="legend__item legend__item--grade-3">
9695
Some past advocacy
9796
</div>
98-
<div class="legend__item legend__item--grade-4">
97+
<div className="legend__item legend__item--grade-4">
9998
No support
10099
</div>
101100
102101
<strong>Icons</strong>
103102
<div>
104-
<img src="${schlGra}" alt="test" style="width:20px;height:20px">
103+
<Image src="${schlGra}" alt="test" style="width:20px;height:20px"/>
105104
Schools
106105
</div>
107106
<div>
108-
<img src="${nprfGra}" alt="test" style="width:20px;height:20px">
107+
<Image src="${nprfGra}" alt="test" style="width:20px;height:20px"/>
109108
Non-profit
110109
</div>
111110
<div>
112-
<img src="${bldgGra}" alt="test" style="width:20px;height:20px">
111+
<Image src="${bldgGra}" alt="test" style="width:20px;height:20px"/>
113112
For profit
114113
</div>
115-
<img src="${eofcGra}" alt="test" style="width:20px;height:20px">
114+
<Image src="${eofcGra}" alt="test" style="width:20px;height:20px"/>
116115
Public Official
117116
<div>
118117
</div>
119-
<div class="legend__item legend__item--in-fave">
118+
<div className="legend__item legend__item--in-fave">
120119
Endorses
121120
</div>
122-
<div class="legend__item legend__item--mixed">
121+
<div className="legend__item legend__item--mixed">
123122
Mixed
124123
</div>
125-
<div class="legend__item legend__item--against">
124+
<div className="legend__item legend__item--against">
126125
Opposes
127126
</div>
128127
@@ -278,7 +277,7 @@ class Map extends Component {
278277
// class for third party icons
279278
var thirdPartyIcon = L.Icon.extend({
280279
options: {
281-
shadowUrl: shad,
280+
shadowUrl: shad.src,
282281
iconSize: [28, 28],
283282
shadowSize: [28, 28],
284283
iconAnchor: [16, 30],
@@ -288,18 +287,18 @@ class Map extends Component {
288287
});
289288

290289
// make a variable for each of the icon flavors
291-
var markerSchlBlu = new thirdPartyIcon({ iconUrl: schlBlu });
292-
var markerSchlYel = new thirdPartyIcon({ iconUrl: schlYel });
293-
var markerSchlRed = new thirdPartyIcon({ iconUrl: schlRed });
294-
var markerBldgBlu = new thirdPartyIcon({ iconUrl: bldgBlu });
295-
var markerBldgYel = new thirdPartyIcon({ iconUrl: bldgYel });
296-
var markerBldgRed = new thirdPartyIcon({ iconUrl: bldgRed });
297-
var markerNprfBlu = new thirdPartyIcon({ iconUrl: nprfBlu });
298-
var markerNprfYel = new thirdPartyIcon({ iconUrl: nprfYel });
299-
var markerNprfRed = new thirdPartyIcon({ iconUrl: nprfRed });
300-
var markerEofcBlu = new thirdPartyIcon({ iconUrl: eofcBlu });
301-
var markerEofcYel = new thirdPartyIcon({ iconUrl: eofcYel });
302-
var markerEofcRed = new thirdPartyIcon({ iconUrl: eofcRed });
290+
var markerSchlBlu = new thirdPartyIcon({ iconUrl: schlBlu.src });
291+
var markerSchlYel = new thirdPartyIcon({ iconUrl: schlYel.src });
292+
var markerSchlRed = new thirdPartyIcon({ iconUrl: schlRed.src });
293+
var markerBldgBlu = new thirdPartyIcon({ iconUrl: bldgBlu.src });
294+
var markerBldgYel = new thirdPartyIcon({ iconUrl: bldgYel.src });
295+
var markerBldgRed = new thirdPartyIcon({ iconUrl: bldgRed.src });
296+
var markerNprfBlu = new thirdPartyIcon({ iconUrl: nprfBlu.src });
297+
var markerNprfYel = new thirdPartyIcon({ iconUrl: nprfYel.src });
298+
var markerNprfRed = new thirdPartyIcon({ iconUrl: nprfRed.src });
299+
var markerEofcBlu = new thirdPartyIcon({ iconUrl: eofcBlu.src });
300+
var markerEofcYel = new thirdPartyIcon({ iconUrl: eofcYel.src });
301+
var markerEofcRed = new thirdPartyIcon({ iconUrl: eofcRed.src });
303302

304303
// put these into a constant to namespace and give them rise on hover
305304
const thirdPartyPoints = (feature, latlng) => {

‎components/NewLayoutPriorityPage/NewLayoutPriorityPage.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import nprfBlu from "../../public/nprf-64-blu.png";
1010
import nprfYel from "../../public/nprf-64-yel.png";
1111
import nprfRed from "../../public/nprf-64-red.png";
1212
import eofcGra from "../../public/eofc-64-gra.png";
13+
import Image from '../Image'
1314

1415
const currentLegislativeSession = "192";
15-
const ICON_DEFAULT_STYLE = { width: "30px", height: "30px" };
1616

1717
const MapWithNoSSR = dynamic(() => import("../Map/Map.jsx"), {
1818
ssr: false,
@@ -64,45 +64,45 @@ class NewPriorityLayout extends Component {
6464
{/* <div class="legend__item legend__item--grade-1">
6565
Committed to vote
6666
</div> */}
67-
<div class="legend__item legend__item--grade-2">
67+
<div className="legend__item legend__item--grade-2">
6868
Substantial past advocacy
6969
</div>
70-
<div class="legend__item legend__item--grade-3">
70+
<div className="legend__item legend__item--grade-3">
7171
Some past advocacy
7272
</div>
73-
<div class="legend__item legend__item--grade-4">No support</div>
73+
<div className="legend__item legend__item--grade-4">No support</div>
7474
</div>
7575
</div>
7676
<div className={styles.iconContainer}>
7777
<div className={styles.iconsLegend}>
7878
<div className={styles.iconAndTitle}>
79-
<img src={schlGra} alt="test" style={ICON_DEFAULT_STYLE} />
79+
<Image src={schlGra} alt="test" width={30} height={30} />
8080
<span>Schools</span>
8181
</div>
8282
<div className={styles.iconAndTitle}>
83-
<img src={nprfGra} alt="test" style={ICON_DEFAULT_STYLE} />
83+
<Image src={nprfGra} alt="test" width={30} height={30} />
8484
<span>Non-profit</span>
8585
</div>
8686
<div className={styles.iconAndTitle}>
87-
<img src={bldgGra} alt="test" style={ICON_DEFAULT_STYLE} />
87+
<Image src={bldgGra} alt="test" width={30} height={30} />
8888
<span>For profit</span>
8989
</div>
9090
<div className={styles.iconAndTitle}>
91-
<img src={eofcGra} alt="test" style={ICON_DEFAULT_STYLE} />
91+
<Image src={eofcGra} alt="test" width={30} height={30} />
9292
<span>Public Official</span>
9393
</div>
9494
</div>
9595
<div className={styles.iconColorLegend}>
9696
<div className={styles.iconAndTitle}>
97-
<img src={nprfBlu} alt="test" style={ICON_DEFAULT_STYLE} />
97+
<Image src={nprfBlu} alt="test" width={30} height={30} />
9898
<span>Endorses</span>
9999
</div>
100100
<div className={styles.iconAndTitle}>
101-
<img src={nprfYel} alt="test" style={ICON_DEFAULT_STYLE} />
101+
<Image src={nprfYel} alt="test" width={30} height={30} />
102102
<span>Mixed</span>
103103
</div>
104104
<div className={styles.iconAndTitle}>
105-
<img src={nprfRed} alt="test" style={ICON_DEFAULT_STYLE} />
105+
<Image src={nprfRed} alt="test" width={30} height={30} />
106106
<span>Opposes</span>
107107
</div>
108108
</div>
@@ -113,7 +113,7 @@ class NewPriorityLayout extends Component {
113113
The legislative information we aggregated and display on the map
114114
does not - and cannot - fully reflect the views and actions of
115115
state legislators. For more, read our{" "}
116-
<a class="link" href="/disclaimer">
116+
<a href="/disclaimer">
117117
full disclaimer
118118
</a>
119119
.
@@ -136,8 +136,8 @@ class NewPriorityLayout extends Component {
136136
<div className={styles.sidebarSection}>
137137
<b>Currently introduced bills</b>
138138
<ul>
139-
{this.state.currentBills.map((bill) => (
140-
<li>
139+
{this.state.currentBills.map((bill, i) => (
140+
<li key={i}>
141141
<a
142142
className={styles.link}
143143
href={"https://malegislature.gov/Bills/" + bill}

‎components/NewLayoutPriorityPage/NewLayoutPriorityPage.module.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,8 @@
132132

133133
border-bottom: 5px solid black;
134134
}
135+
136+
.icon {
137+
width: 30px;
138+
height: 30px;
139+
}

‎components/Twitter/Twitter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ function Twitter() {
55
return (
66
<div className={styles.sidebar}>
77
<div className={styles.twitter}>
8-
<a className="twitter-timeline" href="https://twitter.com/GGovernanceProj?ref_src=twsrc%5Etfw">Tweets by GGovernanceProj</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
8+
<a className="twitter-timeline" href="https://twitter.com/GGovernanceProj?ref_src=twsrc%5Etfw">Tweets by GGovernanceProj</a> <script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>
99
</div>
1010
</div>
1111
)

‎next-env.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />
3+
/// <reference types="next/image-types/global" />
4+
5+
// NOTE: This file should not be edited
6+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎next.config.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1-
const withImages = require("next-images");
1+
/**
2+
* @type {import('next').NextConfig}
3+
*/
4+
const config = {
5+
images: {
6+
loader: "custom"
7+
}
8+
}
29

3-
module.exports = withImages();
10+
module.exports = config

‎package.json

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,20 @@
77
"@testing-library/jest-dom": "^5.11.4",
88
"@testing-library/react": "^11.1.0",
99
"@testing-library/user-event": "^12.1.10",
10-
"bootstrap": "^4.5.3",
10+
"bootstrap": "5.1.3",
1111
"leaflet": "^1.7.1",
1212
"leaflet-defaulticon-compatibility": "^0.1.1",
1313
"leaflet-geosearch": "^3.2.1",
1414
"leaflet-providers": "^1.11.0",
1515
"leaflet-search": "2.9.8",
1616
"leaflet.markercluster": "^1.4.1",
1717
"linkifyjs": "^3.0.0-beta.3",
18-
"next": "10.0.4",
19-
"next-images": "^1.7.0",
18+
"next": "11",
2019
"next-on-netlify": "^2.9.0",
2120
"papaparse": "^5.3.0",
22-
"react": "^17.0.1",
23-
"react-bootstrap": "^1.4.0",
24-
"react-dom": "^17.0.1",
21+
"react": "^17.0.2",
22+
"react-bootstrap": "^2.1.1",
23+
"react-dom": "^17.0.2",
2524
"react-leaflet-geojson-patterns": "^1.1.0",
2625
"sidebar-v2": "^0.4.0",
2726
"typescript": "^4.1.3",

‎pages/about.js

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import democracyReform from "../public/democracyReform.png"
66
import privacyDemocracy from "../public/privacyDemocracy.png"
77
import racialJustice from "../public/racialJustice.png"
88
import faithDemocracy from "../public/faithDemocracy.png"
9+
import Image from '../components/Image'
910

1011
function About() {
1112
return (
@@ -34,22 +35,22 @@ function About() {
3435
After studying our political institutions in the fall and winter, the
3536
GGP students identified three state legislative priorities to improve
3637
the quality of democracy in Massachusetts:
37-
<a class="link" href="/same-day-registration">
38+
<a href="/same-day-registration">
3839
{" "}
3940
same day registration;
4041
</a>
41-
<a class="link" href="/absentee-voting">
42+
<a href="/absentee-voting">
4243
{" "}
4344
no-excuse absentee voting;{" "}
4445
</a>
4546
and{" "}
46-
<a class="link" href="/campaign-finance">
47+
<a href="/campaign-finance">
4748
{" "}
4849
publicly financed campaigns
4950
</a>
5051
. While there are many other legislative improvements to make to our
5152
democracy, which we identify{" "}
52-
<a class="link" href="/other-legislative-endorsements">
53+
<a href="/other-legislative-endorsements">
5354
here
5455
</a>
5556
, these three priorities reflect the impactful, pragmatic, and common
@@ -64,25 +65,25 @@ function About() {
6465
<div className={style.firstPosterCol}>
6566
<div className={style.posterImgLink} id="rightPoster">
6667
<a href="https://www.youtube.com/watch?v=XBFWFC2vtiY&t=770s" target="_blank" rel="noreferrer">
67-
<img src={faithDemocracy} className={style.posterImages} alt="" />
68+
<Image src={faithDemocracy} className={style.posterImages} alt="" />
6869
</a>
6970
</div>
7071
<div className={style.posterImgLink} id="leftPoster">
7172
<a href="https://www.youtube.com/watch?v=XF2IGKopwdk" target="_blank" rel="noreferrer">
72-
<img src={democracyReform} className={style.posterImages} alt="" />
73+
<Image src={democracyReform} className={style.posterImages} alt="" />
7374
</a>
7475
</div>
7576
</div>
7677

7778
<div className={style.secondPosterCol}>
7879
<div className={style.posterImgLink} id="middlePoster1">
7980
<a href="https://www.youtube.com/watch?v=utCYTU3miOg&t=3s" target="_blank" rel="noreferrer">
80-
<img src={racialJustice} className={style.posterImages} alt="" />
81+
<Image src={racialJustice} className={style.posterImages} alt="" />
8182
</a>
8283
</div>
8384
<div className={style.posterImgLink} id="middlePoster2">
8485
<a href="https://www.youtube.com/watch?v=DLjdC8BFlvY&t=34s" target="_blank" rel="noreferrer">
85-
<img src={privacyDemocracy} className={style.posterImages} alt="" />
86+
<Image src={privacyDemocracy} className={style.posterImages} alt="" />
8687
</a>
8788
</div>
8889
</div>
@@ -103,25 +104,25 @@ function About() {
103104
<div className={style.firstPosterCol}>
104105
<div className={style.posterImgLink} id="rightPoster">
105106
<a href="https://bccte.zoom.us/webinar/register/WN_e-d5HI5zQXusUC6WOsAT2w" target="_blank" rel="noreferrer">
106-
<img src={faithDemocracy} className={style.posterImages} alt="" />
107+
<Image src={faithDemocracy} className={style.posterImages} alt="" />
107108
</a>
108109
</div>
109110
<div className={style.posterImgLink} id="leftPoster">
110111
<a href="https://www.youtube.com/watch?v=XF2IGKopwdk" target="_blank" rel="noreferrer">
111-
<img src={democracyReform} className={style.posterImages} alt="" />
112+
<Image src={democracyReform} className={style.posterImages} alt="" />
112113
</a>
113114
</div>
114115
</div>
115116
116117
<div className={style.secondPosterCol}>
117118
<div className={style.posterImgLink} id="middlePoster1">
118119
<a href="https://www.youtube.com/watch?v=utCYTU3miOg&t=3s" target="_blank" rel="noreferrer">
119-
<img src={racialJustice} className={style.posterImages} alt="" />
120+
<Image src={racialJustice} className={style.posterImages} alt="" />
120121
</a>
121122
</div>
122123
<div className={style.posterImgLink} id="middlePoster2">
123124
<a href="https://www.youtube.com/watch?v=DLjdC8BFlvY&t=34s" target="_blank" rel="noreferrer">
124-
<img src={privacyDemocracy} className={style.posterImages} alt="" />
125+
<Image src={privacyDemocracy} className={style.posterImages} alt="" />
125126
</a>
126127
</div>
127128
</div>

0 commit comments

Comments
 (0)