Skip to content

Commit acb2a19

Browse files
tom-schoenertom-schoener
authored
[misc] react 18 (#10)
* update react to version 1.18 * dep updates * react query beta 15 * patch -> minor
1 parent ec2c117 commit acb2a19

13 files changed

+6435
-7314
lines changed

‎Dockerfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ RUN make go-build-for-docker
99
#########
1010

1111
# React Frontend
12-
FROM node:16-alpine AS react-builder
12+
FROM node:17-alpine AS react-builder
1313

1414
WORKDIR /app
1515
ENV PATH /app/node_modules/.bin:$PATH

‎api/pkg/group-challenge/db/postgresql.go

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ func Connect(dbConfig config.DBConfig) (con *pg.DB) {
2727

2828
// check connection
2929
if err := con.Ping(ctx); err != nil {
30-
panic("cannot connect to postgres")
30+
log.Panicln("cannot connect to postgres {}", err)
3131
}
3232

3333
var version string

‎frontend/package-lock.json

+6,359-7,262
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+26-25
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
{
22
"name": "group-challenge",
33
"version": "0.1.0",
4+
"engines": {
5+
"node": "^17"
6+
},
47
"private": true,
58
"dependencies": {
6-
"react": "^17.0.2",
7-
"react-datepicker": "4.5.0",
8-
"react-dom": "^17.0.2",
9-
"react-hook-form": "7.22.1",
10-
"react-icons": "^4.3.1",
11-
"react-input-emoji": "^4.0.9",
12-
"react-query": "^3.34.3",
13-
"react-router": "^6.1.1",
14-
"react-router-dom": "^6.1.1",
15-
"react-toastify": "^8.1.0",
16-
"react-use": "^17.3.1",
17-
"reconnecting-websocket": "^4.4.0",
18-
"use-local-storage-state": "^13.0.0",
19-
"web-vitals": "2.1.2"
9+
"react": "18.1.0",
10+
"react-date-picker": "8.4.0",
11+
"react-dom": "18.1.0",
12+
"react-hook-form": "7.30.0",
13+
"react-icons": "4.3.1",
14+
"react-input-emoji": "4.1.0",
15+
"react-query": "4.0.0-beta.15",
16+
"react-router": "6.3.0",
17+
"react-router-dom": "6.3.0",
18+
"react-toastify": "8.2.0",
19+
"reconnecting-websocket": "4.4.0",
20+
"use-local-storage-state": "17.0.1",
21+
"web-vitals": "2.1.4"
2022
},
2123
"scripts": {
2224
"start": "react-scripts start",
@@ -42,16 +44,15 @@
4244
]
4345
},
4446
"devDependencies": {
45-
"@types/node": "^16.11.13",
46-
"@types/react": "^17.0.37",
47-
"@types/react-datepicker": "^4.3.2",
48-
"@types/react-dom": "^17.0.11",
49-
"@types/react-router": "^5.1.17",
50-
"@types/react-router-dom": "^5.3.2",
51-
"autoprefixer": "^10.4.0",
52-
"postcss": "^8.4.5",
53-
"react-scripts": "5.0.0",
54-
"tailwindcss": "^3.0.5",
55-
"typescript": "^4.5.4"
47+
"@types/node": "17.0.24",
48+
"@types/react": "18.0.8",
49+
"@types/react-dom": "18.0.1",
50+
"@types/react-router": "5.1.18",
51+
"@types/react-router-dom": "5.3.3",
52+
"autoprefixer": "10.4.5",
53+
"postcss": "8.4.12",
54+
"react-scripts": "5.0.1",
55+
"tailwindcss": "3.0.24",
56+
"typescript": "4.6.3"
5657
}
5758
}

‎frontend/src/index.css

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@tailwind utilities;
44

55
@import 'react-toastify/dist/ReactToastify.css';
6-
@import 'react-datepicker/dist/react-datepicker.css';
76

87
/*
98
* Global styles for thrid party libraries

‎frontend/src/index.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React from "react";
2-
import ReactDOM from "react-dom";
3-
import "./index.css";
4-
import App from "./App";
1+
import React from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import './index.css';
4+
import App from './App';
55

6-
ReactDOM.render(
6+
const container = document.getElementById('root');
7+
const root = createRoot(container!);
8+
root.render(
79
<React.StrictMode>
810
<App />
9-
</React.StrictMode>,
10-
document.getElementById("root")
11+
</React.StrictMode>
1112
);

‎frontend/src/party/PartyForm.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ReactDatePicker from 'react-datepicker';
1+
import ReactDatePicker from 'react-date-picker';
22
import { Controller, useForm } from 'react-hook-form';
33
import { PartyResponse } from '../api/api-models';
44

@@ -73,8 +73,8 @@ function PartyForm({ onSubmit, submitBtnText = 'Save', initialData = {} }: Party
7373
control={control}
7474
render={({ field }) => (
7575
<ReactDatePicker
76+
value={new Date(field.value)}
7677
className="shadow border rounded w-full py-2 px-3 text-grey-darker"
77-
selected={new Date(field.value)}
7878
onChange={field.onChange}
7979
/>
8080
)}
@@ -90,7 +90,7 @@ function PartyForm({ onSubmit, submitBtnText = 'Save', initialData = {} }: Party
9090
render={({ field }) => (
9191
<ReactDatePicker
9292
className="shadow border rounded w-full py-2 px-3 text-grey-darker"
93-
selected={new Date(field.value)}
93+
value={new Date(field.value)}
9494
onChange={field.onChange}
9595
/>
9696
)}

‎frontend/src/party/submissions/PartySubmissions.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FaTrash } from 'react-icons/fa';
22
import { useMutation } from 'react-query';
33
import { toast } from 'react-toastify';
4-
import { deleteSubmission, getThumbnailUrl, useParty, usePartyStatus, useUser } from '../../api/api';
4+
import { deleteSubmission, getImageUrl, getThumbnailUrl, useParty, usePartyStatus, useUser } from '../../api/api';
55
import { isPartyLive, PartySubmissionResponse } from '../../api/api-models';
66
import { useSession } from '../../user/session';
77

@@ -34,7 +34,14 @@ function PartySubmission({ partyId, partySubmission }: { partyId: string; partyS
3434
return (
3535
<div className="p-4">
3636
<div className="bg-gray-100 w-96 rounded-lg">
37-
<img className="rounded w-full" src={getThumbnailUrl(partySubmission.imageId)} alt={partySubmission.name} />
37+
<a
38+
href={getImageUrl(partySubmission.imageId)}
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
title="open image in new tab"
42+
>
43+
<img className="rounded w-full" src={getThumbnailUrl(partySubmission.imageId)} alt={partySubmission.name} />
44+
</a>
3845
<div className="p-6">
3946
<span className="flex space-x-4">
4047
<span className="font-bold mb-4">{partySubmission.name || '-'}</span>

‎frontend/src/party/view/ReactionBubbles.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { FunctionComponent, useState } from 'react';
2-
import { useInterval } from 'react-use';
1+
import { FunctionComponent, useEffect, useState } from 'react';
32
import { useReactions } from '../../api/api';
43

54
interface TimedReaction {
@@ -27,10 +26,14 @@ const ReactionBubbles: FunctionComponent<{ partyId: string }> = ({ partyId }) =>
2726
);
2827
});
2928

30-
useInterval(() => {
31-
const now = Date.now();
32-
setReactions(reactions.filter((reaction) => reaction.dieDate > now));
33-
}, 500);
29+
useEffect(() => {
30+
const intervalId = setInterval(() => {
31+
const now = Date.now();
32+
setReactions(reactions.filter((reaction) => reaction.dieDate > now));
33+
}, 500);
34+
35+
return () => clearInterval(intervalId);
36+
}, [reactions]);
3437

3538
return (
3639
<div className="space-y-2 flex flex-col">

‎frontend/src/party/view/ViewParty.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,8 @@ function ViewParty() {
170170
};
171171

172172
if (party.isError || partyStatus.isError) return <span>error</span>;
173-
if (party.isLoading || party.isIdle) return <span>Loading</span>;
174-
if (partyStatus.isLoading || partyStatus.isIdle) return <span>Loading party status</span>;
173+
if (party.isLoading) return <span>Loading</span>;
174+
if (partyStatus.isLoading) return <span>Loading party status</span>;
175175

176176
const isHost = session!.userId === partyUserId;
177177
const showControlButtons =

‎frontend/src/user/appState.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { createLocalStorageStateHook } from 'use-local-storage-state';
1+
import useLocalStorageState from 'use-local-storage-state';
22

33
export interface AppState {
44
reactionPickerOpen: boolean;
55
}
66

7-
export const useAppState = createLocalStorageStateHook<AppState>('appState', { reactionPickerOpen: true });
7+
export const useAppState = () =>
8+
useLocalStorageState<AppState>('appState', {
9+
ssr: false,
10+
defaultValue: {
11+
reactionPickerOpen: true,
12+
},
13+
});

‎frontend/src/user/session.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { UserSession } from '../api/api-models';
2-
import { createLocalStorageStateHook } from 'use-local-storage-state';
2+
import useLocalStorageState from 'use-local-storage-state';
33

4-
export const useSession = createLocalStorageStateHook<UserSession>('session');
4+
export const useSession = () => useLocalStorageState<UserSession>('session');

‎frontend/src/version.ts

+7
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ interface Change {
99
}
1010

1111
export const CHANGES: Change[] = [
12+
{
13+
name: '0.7.0',
14+
changes: [
15+
{ description: 'Dependency updates', type: 'note' },
16+
{ description: 'Access higher resolution image of own submission via link', type: 'feature' },
17+
],
18+
},
1219
{
1320
name: '0.6.1',
1421
changes: [{ description: 'Cleanup navigation', type: 'note' }],

0 commit comments

Comments
 (0)