Update next and next dependencies (#46)

* Remove Next-Sass(Next added native support in 9.2) * Update Next and Node-sass. * Add config for typescript-plugin-css-modules * Rewrite SCSS to SCSS Modules. * Update TSC * Some missing Styles * Prettier 2 * Upgrade * Update other deps and fix rest of global css * Fix tsc * Add size-limit check * Update * Update node * Make sure modals show Co-authored-by: Michal Miszczyszyn <michal@mmiszy.pl>

Author: Survikrowa

.env

@@ -1,4 +1,5 @@
 API_URL="http://api.devfaq.localhost:3002"
+API_URL="https://staging-api.devfaq.pl"
 GA_TRACKING_ID=""
 ABSOLUTE_URL="http://app.devfaq.localhost:3000"
 SENTRY_DSN=

.github/workflows/bundleanalyze.yml

@@ -61,6 +61,10 @@ jobs:
 
  - name: Run build
  if: steps.cache-to-skip.outputs.cache-hit != 'true'
- env:
- BUNDLE_ANALYZER_TOKEN: ${{ secrets.BUNDLE_ANALYZER_TOKEN }}
- run: ANALYZE=true npm run build
+ run: npm run build
+
+ - name: Sizelimit
+ uses: andresz1/size-limit-action@v1.3.1
+ with:
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ skip_step: build

.github/workflows/test-PR.yml

@@ -24,7 +24,7 @@ app
  const port = process.env.PORT || '3000';
  server.listen(port, () => console.log(`Server listening at localhost:${port}`));
  })
- .catch(err => {
+ .catch((err) => {
  console.error(err);
  process.exit(1);
  });

app.js

@@ -5,14 +5,15 @@ import { connect } from 'react-redux';
 import { RouteDetails } from '../../utils/types';
 import Link, { LinkProps } from 'next/link';
 import { hrefQueryToAsPath } from '../../utils/redirect';
+import invariant from 'invariant';
 
 interface ActiveLinkOwnProps {
- activeClassName?: string;
+ activeClassName: string;
  exact?: boolean;
  disabledWhenActive?: boolean;
  onClick?: React.MouseEventHandler<any>;
  children: React.ReactElement<any>;
- query?: Record<string, string[] | string>;
+ query?: Record<string, string[] | string | undefined>;
 }
 
 type ActiveLinkComponentProps = Omit<LinkProps, 'as'> & ActiveLinkOwnProps;
@@ -38,7 +39,7 @@ class ActiveLinkComponent extends React.Component<
  render() {
  const {
  isMatch,
- activeClassName = 'active',
+ activeClassName,
  disabledWhenActive,
  query,
  as,
@@ -52,6 +53,8 @@ class ActiveLinkComponent extends React.Component<
  prefetch,
  } = this.props;
 
+ invariant(activeClassName != null, 'activeClassName is required!');
+
  const child = React.Children.only(children);
  const newChild = this.conditionallyAddClassToChild(isMatch, activeClassName, child);
 

components/activeLink/ActiveLink.tsx

@@ -6,6 +6,10 @@ import { connect } from 'react-redux';
 import { TechnologyKey } from '../../constants/technology-icon-items';
 import { Question } from '../../redux/reducers/questions';
 import { CommonModalProps } from '../modals/baseModal/BaseModal';
+import questionListStyles from '../questions/questionsList/questionsList.module.scss';
+import noQuestionsStyles from '../questions/selectedQuestions/noQuestionsSelectedInfo.module.scss';
+import spinnerStyles from '../../components/layout/appSpinner.module.scss';
+import classNames from 'classnames';
 
 type AdminQuestionsProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;
 type AdminQuestionsState = {
@@ -48,15 +52,15 @@ class AdminQuestions extends React.Component<AdminQuestionsProps, AdminQuestions
  return;
  }
 
- const question = this.props.questions.data.data.find(q => q.id === questionId);
+ const question = this.props.questions.data.data.find((q) => q.id === questionId);
  if (!question) {
  return;
  }
 
  this.props.uiOpenEditQuestionModal(question, this.onEditFinished);
  };
 
- onEditFinished: CommonModalProps['onClose'] = e => {
+ onEditFinished: CommonModalProps['onClose'] = (e) => {
  if (e.reason && e.reason === 'submit') {
  this.refetchQuestions();
  }
@@ -67,15 +71,15 @@ class AdminQuestions extends React.Component<AdminQuestionsProps, AdminQuestions
  return null;
  }
  return (
- <div className="app-questions--list" style={{ flex: 1 }}>
- <div className="selected-questions--empty container">
+ <div className={questionListStyles.appQuestionsList} style={{ flex: 1 }}>
+ <div className={classNames(noQuestionsStyles, 'container')}>
  <p>Nie zadnych pytań do zaakceptowania!</p>
  </div>
  </div>
  );
  };
 
- updateStatus: React.ChangeEventHandler<HTMLSelectElement> = e => {
+ updateStatus: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
  this.setState({ status: e.currentTarget.value as 'pending' | 'accepted' });
  };
 
@@ -94,7 +98,7 @@ class AdminQuestions extends React.Component<AdminQuestionsProps, AdminQuestions
  <option value="accepted">accepted</option>
  </select>
  </label>
- {this.props.questions.isLoading && <div className="spinner" />}
+ {this.props.questions.isLoading && <div className={spinnerStyles.spinner} />}
  {this.maybeRenderEmptyMessage()}
  <QuestionsList
  selectable={false}
@@ -123,7 +127,4 @@ const mapDispatchToProps = {
  uiOpenEditQuestionModal: ActionCreators.uiOpenEditQuestionModal,
 };
 
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(AdminQuestions);
+export default connect(mapStateToProps, mapDispatchToProps)(AdminQuestions);

components/adminQuestions/AdminQuestions.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Transition } from 'react-transition-group';
-import { EndHandler, EnterHandler, ExitHandler } from 'react-transition-group/Transition';
 
 export class AnimateHeight extends React.PureComponent<{
  in?: boolean;
@@ -15,78 +14,61 @@ export class AnimateHeight extends React.PureComponent<{
  return `${this.props.exitTime}ms`;
  }
 
- onExit: ExitHandler = el => {
- // console.log('onExit');
- // @ts-ignore
- el.style.willChange = 'height, opacity';
- el.style.height = el.scrollHeight + 'px';
- el.style.opacity = '1';
- this.reflow(el);
- };
-
- onExiting: ExitHandler = el => {
- // console.log('onExiting');
- el.style.height = '0';
- el.style.opacity = '0';
- el.style.minHeight = '0';
- el.style.transition = `height ${this.exitDuration}, opacity ${this.exitDuration}`;
- };
-
- onExited: ExitHandler = el => {
- // console.log('onExited');
- el.style.height = '';
- el.style.opacity = '';
- el.style.transition = '';
- el.style.minHeight = '';
- };
-
- onEnter: EnterHandler = el => {
- // console.log('onEnter');
- // @ts-ignore
- el.style.willChange = 'height, opacity';
- el.style.height = '0';
- el.style.opacity = '0';
- el.style.minHeight = '0';
- this.reflow(el);
- };
-
- onEntering: EnterHandler = el => {
- // console.log('onEntering');
- el.style.height = el.scrollHeight + 'px';
- el.style.opacity = '1';
- el.style.transition = `height ${this.enterDuration}, opacity ${this.enterDuration}`;
- };
-
- onEntered: EnterHandler = el => {
- // console.log('onEntered');
- el.style.height = '';
- el.style.opacity = '';
- el.style.transition = '';
- el.style.minHeight = '';
- };
-
- addEndListener: EndHandler = (el, done) => {
- // console.log('addEndListener');
- el.addEventListener('transitionend', done, { once: true, passive: true });
- };
-
  render() {
  const { in: isIn, enterTime, exitTime } = this.props;
 
- // @ts-ignore
  const isBrowser = !process || !!process.browser;
 
  return (
  <Transition
  in={isIn}
  timeout={{ enter: enterTime, exit: exitTime }}
- onExit={this.onExit}
- onExiting={this.onExiting}
- onExited={this.onExited}
- onEnter={this.onEnter}
- onEntering={this.onEntering}
- onEntered={this.onEntered}
- addEndListener={this.addEndListener}
+ onExit={(el) => {
+ // console.log('onExit');
+ el.style.willChange = 'height, opacity';
+ el.style.height = el.scrollHeight + 'px';
+ el.style.opacity = '1';
+ this.reflow(el);
+ }}
+ onExiting={(el) => {
+ // console.log('onExiting');
+ el.style.height = '0';
+ el.style.opacity = '0';
+ el.style.minHeight = '0';
+ el.style.transition = `height ${this.exitDuration}, opacity ${this.exitDuration}`;
+ }}
+ onExited={(el) => {
+ // console.log('onExited');
+ el.style.height = '';
+ el.style.opacity = '';
+ el.style.transition = '';
+ el.style.minHeight = '';
+ }}
+ onEnter={(el, isAppearing) => {
+ // console.log('onEnter');
+ // @ts-ignore
+ el.style.willChange = 'height, opacity';
+ el.style.height = '0';
+ el.style.opacity = '0';
+ el.style.minHeight = '0';
+ this.reflow(el);
+ }}
+ onEntering={(el, isAppearing) => {
+ // console.log('onEntering');
+ el.style.height = el.scrollHeight + 'px';
+ el.style.opacity = '1';
+ el.style.transition = `height ${this.enterDuration}, opacity ${this.enterDuration}`;
+ }}
+ onEntered={(el, isAppearing) => {
+ // console.log('onEntered');
+ el.style.height = '';
+ el.style.opacity = '';
+ el.style.transition = '';
+ el.style.minHeight = '';
+ }}
+ addEndListener={(el, done) => {
+ el.addEventListener('transitionend', done, { once: true, passive: true });
+ }}
  unmountOnExit={isBrowser}
  >
  {() => this.props.children}

components/animateProperty/AnimateProperty.tsx

@@ -1,11 +1,11 @@
-import './appLogo.scss';
+import styles from './appLogo.module.scss';
 
 const AppLogo = ({ fill = '#ffffff' }) => {
  return (
- <span className="app-logo">
- <span className="scaling-svg-container" style={{ height: '100%' }}>
+ <span className={styles.appLogo}>
+ <span className={styles.scalingSvgContainer} style={{ height: '100%' }}>
  <svg
- className="scaling-svg"
+ className={styles.scalingSvg}
  width="472px"
  height="104px"
  xmlns="http://www.w3.org/2000/svg"