chore: upgrade react and next to latest versions (WIP)

This commit is contained in:
Christian Landgren 2023-03-27 10:25:28 +02:00
parent 7e6222ef68
commit 364d02a7ad
19 changed files with 1550 additions and 1525 deletions

42
LICENSE
View File

@ -2,9 +2,9 @@
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
@ -63,14 +63,14 @@
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
@ -86,7 +86,7 @@
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
@ -127,7 +127,7 @@
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
@ -135,12 +135,12 @@
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
@ -150,7 +150,7 @@
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
@ -162,7 +162,7 @@
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
@ -173,9 +173,9 @@
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
@ -186,16 +186,16 @@
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2021 Not free beer AB
Copyright 2023 Not free beer AB
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

View File

@ -19,33 +19,34 @@ The respective README files there contain more detailed descriptions.
## Contents
* [Architecture](#architecture)
* [Apps](#apps)
* [skolplattformen](#skolplattformen)
* [website](#website)
* [Libs](#embedded-api)
* [api](#api)
* [api-skolplattformen](#api-skolplattformen)
* [api-hjarntorget](#api-hjarntorget)
* [api-vklass](#api-vklass)
* [curriculum](#curriculum)
* [hooks](#hooks)
* [Getting started with development](#getting-started-with-development)
* [iOS](#ios)
* [Android](#android)
* [Website](#website)
* [Tests](#tests)
* [Contributions](#contributions)
* [Money](#money)
* [Disclaimer](#disclaimer)
* [Contributors](#contributors)
* [License](#license)
- [Architecture](#architecture)
- [Apps](#apps)
- [skolplattformen](#skolplattformen)
- [website](#website)
- [Libs](#embedded-api)
- [api](#api)
- [api-skolplattformen](#api-skolplattformen)
- [api-hjarntorget](#api-hjarntorget)
- [api-vklass](#api-vklass)
- [curriculum](#curriculum)
- [hooks](#hooks)
- [Getting started with development](#getting-started-with-development)
- [iOS](#ios)
- [Android](#android)
- [Website](#website)
- [Tests](#tests)
- [Contributions](#contributions)
- [Money](#money)
- [Disclaimer](#disclaimer)
- [Contributors](#contributors)
- [License](#license)
## Architecture
The project consists of several apps and libraries inside [a NX](https://nx.dev/) monorepo.
### Apps
/apps/ contains the application projects. This is the main entry point for a runnable application.
#### skolplattformen
@ -63,6 +64,7 @@ For more information, check out the [source code](apps/skolplattformen-app).
The code for the website at https://skolplattformen.org/. It's built using Next.js.
For more information, check out the [source code](apps/website).
### Libs
/libs/ contains the library projects. There are many different kinds of libraries, and each library defines its own external API so that boundaries between libraries remain clear.
@ -102,11 +104,13 @@ Check out the documentation [here](libs/hooks).
To clone and build the project, you first need to install [git](https://git-scm.com/), [node](https://nodejs.org/en/) and [yarn](https://classic.yarnpkg.com/lang/en/docs/install/).
Clone the repo with
```bash
$ git clone https://github.com/kolplattformen/skolplattformen.git
```
Install dependencies
```bash
cd skolplattformen && yarn
```
@ -115,11 +119,12 @@ cd skolplattformen && yarn
If you wanna run the iOS app, you need to setup a couple of things first, we have a guide that will assist you in getting started with the iOS app. A Mac is required to build projects with native code for iOS so we do not have support for Linux / Windows.
* [Mac OS](/docs/ios_mac.md)
- [Mac OS](/docs/ios_mac.md)
If you already setup everything, you just need to run the following command in the project root:
Start the iOS app
```
yarn run ios
```
@ -128,9 +133,9 @@ yarn run ios
If you wanna run the Android app, you need to setup a couple of things first, we have created three different guides depending on your operating system.
* [Mac OS](/docs/android_mac.md)
* [Windows](/docs/android_windows.md)
* [Linux](/docs/android_linux.md)
- [Mac OS](/docs/android_mac.md)
- [Windows](/docs/android_windows.md)
- [Linux](/docs/android_linux.md)
If you already setup everything, you just need to run the following command in the project root:
@ -145,11 +150,13 @@ Documentation coming soon.
### Tests
Run all tests
```
yarn run test
```
Run a specific test
```
yarn run test:api-skolplattformen
```
@ -194,7 +201,7 @@ If you're offended by this initiative, rest assured there is no reason to be —
## License
Öppna skolplattformen is copyright 20202021 Not Free Beer AB.
Öppna skolplattformen is copyright 20202023 Not Free Beer AB.
Licensed under the [Apache License, Version 2.0](LICENSE) (the "License"); you may use Öppna skolplattformen in compliance with the License. A copy of the License is included with this repository.

View File

@ -1,3 +0,0 @@
{
"presets": ["next/babel"]
}

Binary file not shown.

Binary file not shown.

View File

@ -24,37 +24,37 @@ const Banner = () => {
<div className="pl-0 md:pl-4 xl:pl-0">
<div className="hidden select-none lg:block">
<div>
<img
<Image
src={shape1}
alt=""
className="absolute left-64 top-8 motion-safe:animate-pulse"
/>
<img
<Image
src={shape2}
alt=""
className="absolute left-9 top-20 motion-safe:animate-pulse"
/>
<img
<Image
src={shape3}
alt=""
className="absolute left-48 top-18 motion-safe:animate-pulse"
/>
<img
<Image
src={shape4}
alt=""
className="absolute top-20 right-20 motion-safe:animate-bounce-slow"
/>
<img
<Image
src={shape5}
alt=""
className="absolute top-1/2 left-1/2 motion-safe:animate-pulse"
/>
<img
<Image
src={shape6}
alt=""
className="absolute left-96 top-32 motion-safe:animate-bounce-slow"
/>
<img
<Image
src={shape7}
alt=""
className="absolute bottom-48 right-8 motion-safe:animate-bounce-slow"
@ -77,7 +77,7 @@ const Banner = () => {
href="https://apps.apple.com/se/app/%C3%B6ppna-skolplattformen-app/id1543853468"
target="_blank"
>
<img
<Image
alt="Ladda ner i App Store"
src={appstore}
className="w-auto h-12"
@ -88,10 +88,10 @@ const Banner = () => {
href="https://play.google.com/store/apps/details?id=org.skolplattformen.app"
target="_blank"
>
<img
<Image
alt="Ladda ner i Google Play Store"
src={playstore}
className="h-12"
className="w-auto h-12"
/>
</Link.External>
</p>

View File

@ -2,7 +2,9 @@ import classNames from 'classnames'
import Link from 'next/link'
import { AnchorHTMLAttributes, DetailedHTMLProps } from 'react'
type ButtonLinkProps = DetailedHTMLProps<
type ButtonLinkProps = {
children: string
} & DetailedHTMLProps<
AnchorHTMLAttributes<HTMLAnchorElement>,
HTMLAnchorElement
>
@ -34,13 +36,13 @@ const ButtonLink: React.FC<ButtonLinkProps> = ({
}
return (
<Link href={href} passHref>
<Link href={href} passHref legacyBehavior>
{inner}
</Link>
)
}
export const ButtonLinkPatreon: React.FC = ({ children }) => {
export const ButtonLinkPatreon: React.FC<ButtonLinkProps> = ({ children }) => {
return (
<ButtonLink
href="https://www.patreon.com/oppnaskolplattformen"

View File

@ -76,7 +76,7 @@ const Footer = () => {
</div>
<div className="py-8 text-center text-gray-500">
<p>© copyright 2021 by Not free beer AB</p>
<p>© Copyright 2023 by Not Free Beer AB</p>
</div>
</footer>
)

View File

@ -4,6 +4,7 @@ import React from 'react'
import NavLinks from './NavLinks'
import classnames from 'classnames'
import Icon from './Icon'
import Image from 'next/image'
type UseMobileCallback = (ev: MediaQueryListEvent) => any
@ -47,13 +48,11 @@ const HeaderHome = () => {
>
<div className="flex items-center justify-between max-w-6xl px-5 py-4 mx-auto md:px-2">
<Link href="/">
<a>
<img
<Image
className="h-12 md:h-24"
src={headerLogo}
alt="Skolplattformen"
/>
</a>
</Link>
<nav className="hidden md:block">
<NavLinks />

View File

@ -7,10 +7,7 @@ interface LayoutProps {
pageTitle: string
}
const Layout: React.FC<LayoutProps> = ({
children,
pageTitle,
}) => {
const Layout: React.FC<LayoutProps> = ({ children, pageTitle }) => {
return (
<div>
<Head>
@ -27,11 +24,6 @@ const Layout: React.FC<LayoutProps> = ({
<meta property="og:image" content={logo} />
<title>{pageTitle}</title>
<link rel="shortcut icon" type="image/png" href={favImg} />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}

View File

@ -5,13 +5,14 @@ interface LinkInternalProps {
href: string
}
const Internal: React.FC<LinkInternalProps> = ({
href,
children,
}) => {
const Internal: React.FC<LinkInternalProps> = ({ href, children }) => {
return (
<Link href={href}>
<a className="text-indigo-800 dark:text-indigo-400">{children}</a>
<Link
legacyBehavior
href={href}
className="text-indigo-800 dark:text-indigo-400"
>
{children}
</Link>
)
}
@ -20,6 +21,7 @@ interface LinkExternalProps {
className?: string
href: string
target?: string
children?: React.ReactNode | React.ReactNode[]
}
const External: React.FC<LinkExternalProps> = ({

View File

@ -41,8 +41,8 @@ const NavLinks = ({ onClick }: NavLinksProps) => {
{children}
</ScrollLink>
) : (
<NavLink href={href}>
<a onClick={() => onClick?.()}>{children}</a>
<NavLink href={href} onClick={() => onClick?.()}>
{children}
</NavLink>
)

View File

@ -4,6 +4,7 @@ interface SectionProps {
bg?: string
id?: string
padding?: string
children?: React.ReactNode | React.ReactNode[]
}
const Section: React.FC<SectionProps> = ({

View File

@ -1,5 +1,4 @@
import ButtonLink from './ButtonLink'
import Timeline from './Timeline'
const TimelineLatest = () => {
return (

View File

@ -1,17 +1,5 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
declare module '*.png' {
const value: any
export = value
}
declare module '*.jpg' {
const value: any
export = value
}
declare module '*.svg' {
const value: any
export = value
}
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

View File

@ -1,8 +1,5 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const withImages = require('next-images')
module.exports = {
...withImages(),
async redirects() {
return [
{

View File

@ -6,15 +6,15 @@
"dependencies": {
"@types/classnames": "^2.2.11",
"classnames": "^2.3.1",
"eslint-config-next": "^13.2.4",
"google-spreadsheet": "^3.1.15",
"next": "^10.1.3",
"next-images": "^1.4.0",
"react": "^17.0.2",
"next": "^13.2.4",
"react": "^18.2.0",
"react-countup": "^4.3.3",
"react-dom": "^17.0.2",
"react-dom": "^18.2.0",
"react-id-swiper": "^4.0.0",
"react-intl": "^5.15.8",
"react-scroll": "^1.8.2",
"react-intl": "^6.3.2",
"react-scroll": "^1.8.9",
"react-visibility-sensor": "^5.1.1",
"sharp": "^0.28.1",
"swiper": "6.1.1"
@ -37,7 +37,7 @@
"@types/google-spreadsheet": "^3.1.5",
"@types/gtag.js": "^0.0.4",
"@types/jest": "^26.0.22",
"@types/react": "^17.0.3",
"@types/react": "^18.0.29",
"@types/react-scroll": "^1.8.2",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",

View File

@ -10,6 +10,13 @@ import { IntlProvider } from 'react-intl'
import { pageview } from '../components/gtag'
import messages, { Languages } from '../content/locale/'
import { AppProps } from 'next/app'
import { Poppins } from 'next/font/google'
const poppins = Poppins({
weight: '400',
style: 'normal',
subsets: ['latin'],
})
export default function App({ Component, pageProps }: AppProps) {
const router = useRouter()
@ -33,6 +40,11 @@ export default function App({ Component, pageProps }: AppProps) {
defaultLocale={defaultLocale}
messages={currentMessages}
>
<style jsx global>{`
html {
font-family: ${poppins.style.fontFamily};
}
`}</style>
<Layout pageTitle="Skolplattformen">
<Header />
<Component {...pageProps} />

File diff suppressed because it is too large Load Diff