Replaced usages of Responsive with @artsy/fresnel

Responsive has been removed in newest versions of semantic-ui-react

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@artsy/fresnel": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@artsy/fresnel/-/fresnel-1.3.1.tgz",
+      "integrity": "sha512-p3tZxhtUWELqok1VLAYjGlMaBl30K6U+PVYXuV/8xD+Y+wgTxMMIrrKU61zKaRh3Py7xj9if9rpsOESVGJD4Wg=="
+    },
     "@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "src/index.tsx",
   "dependencies": {
+    "@artsy/fresnel": "^1.3.1",
     "array.prototype.flatmap": "^1.2.4",
     "canvas-toBlob": "^1.0.0",
     "d3-array": "^2.12.1",

src/app.tsx

@@ -3,16 +3,18 @@ import * as queryString from 'query-string';
 import * as React from 'react';
 import {analyticsEvent} from './util/analytics';
 import {Chart, ChartComponent, ChartType} from './chart';
+import {DataSourceEnum, SourceSelection} from './datasource/data_source';
 import {Details} from './details';
 import {EmbeddedDataSource, EmbeddedSourceSpec} from './datasource/embedded';
 import {FormattedMessage, WrappedComponentProps} from 'react-intl';
-import {TopolaData} from './util/gedcom_util';
+import {getI18nMessage} from './util/error_i18n';
 import {IndiInfo} from 'topola';
 import {Intro} from './intro';
-import {Loader, Message, Portal, Responsive} from 'semantic-ui-react';
+import {Loader, Message, Portal} from 'semantic-ui-react';
+import {Media} from './util/media';
 import {Redirect, Route, RouteComponentProps, Switch} from 'react-router-dom';
 import {TopBar} from './menu/top_bar';
-import {DataSourceEnum, SourceSelection} from './datasource/data_source';
+import {TopolaData} from './util/gedcom_util';
 import {
   getSelection,
   UploadSourceSpec,
@@ -26,7 +28,6 @@ import {
   WikiTreeDataSource,
   WikiTreeSourceSpec,
 } from './datasource/wikitree';
-import {getI18nMessage} from './util/error_i18n';
 
 /** Shows an error message in the middle of the screen. */
 function ErrorMessage(props: {message?: string}) {
@@ -478,12 +479,12 @@ export class App extends React.Component<
               ref={(ref) => (this.chartRef = ref)}
             />
             {this.state.showSidePanel ? (
-              <Responsive minWidth={768} id="sidePanel">
+              <Media at="large" className="sidePanel">
                 <Details
                   gedcom={this.state.data!.gedcom}
                   indi={this.state.selection!.id}
                 />
-              </Responsive>
+              </Media>
             ) : null}
           </div>
         );

src/chart.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import {select, Selection} from 'd3-selection';
-import {interpolateNumber} from 'd3-interpolate';
 import {injectIntl, WrappedComponentProps} from 'react-intl';
+import {interpolateNumber} from 'd3-interpolate';
 import {max, min} from 'd3-array';
-import {Responsive} from 'semantic-ui-react';
+import {Media} from './util/media';
 import {saveAs} from 'file-saver';
+import {select, Selection} from 'd3-selection';
+import 'd3-transition';
 import {
   D3ZoomEvent,
   zoom,
@@ -12,7 +13,6 @@ import {
   ZoomedElementBaseType,
   zoomTransform,
 } from 'd3-zoom';
-import 'd3-transition';
 import {
   JsonGedcomData,
   ChartHandle,
@@ -309,7 +309,7 @@ export class ChartComponent extends React.PureComponent<
   render() {
     return (
       <div id="svgContainer">
-        <Responsive minWidth={768} className="zoom">
+        <Media at="large" className="zoom">
           <button className="zoom-in" onClick={() => this.zoom(ZOOM_FACTOR)}>
             +
           </button>
@@ -319,7 +319,7 @@ export class ChartComponent extends React.PureComponent<
           >
             −
           </button>
-        </Responsive>
+        </Media>
         <svg id="chartSvg">
           <g id="chart" />
         </svg>

src/index.css

@@ -23,7 +23,7 @@ body, html {
   overflow: auto;
 }
 
-#sidePanel {
+.sidePanel {
   flex: 0 0 320px;
   overflow: auto;
   border-left: solid #ccc 1px;
@@ -68,7 +68,7 @@ div.ui.card.intro {
   -webkit-filter: blur(8px) opacity(30%);
 }
 
-.zoom {
+div.zoom {
   box-shadow: 0 1px 5px rgba(0,0,0,0.65);
   border-radius: 4px;
   position: fixed;
@@ -137,3 +137,7 @@ div.ui.card.intro {
   height: 24px;
   margin-right: 5px
 }
+
+.ui.top.attached.menu {
+  margin-top: 0px;
+}

src/index.tsx

@@ -9,6 +9,7 @@ import {App} from './app';
 import {detect} from 'detect-browser';
 import {HashRouter as Router, Route} from 'react-router-dom';
 import {IntlProvider} from 'react-intl';
+import {MediaContextProvider, mediaStyles} from './util/media';
 import './index.css';
 import 'semantic-ui-css/semantic.min.css';
 import 'canvas-toBlob';
@@ -35,9 +36,12 @@ if (browser && browser.name === 'ie') {
 } else {
   ReactDOM.render(
     <IntlProvider locale={language} messages={messages[language]}>
-      <Router>
-        <Route component={App} />
-      </Router>
+      <MediaContextProvider>
+        <style>{mediaStyles}</style>
+        <Router>
+          <Route component={App} />
+        </Router>
+      </MediaContextProvider>
     </IntlProvider>,
     document.querySelector('#root'),
   );

src/intro.tsx

@@ -1,9 +1,10 @@
 import * as queryString from 'query-string';
 import * as React from 'react';
 import logo from './topola.jpg';
-import {Card, Grid, Image, Responsive} from 'semantic-ui-react';
+import {Card, Grid, Image} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
+import {Media} from './util/media';
 
 /** Link that loads a GEDCOM file from URL. */
 function GedcomLink(props: {url: string; text: string}) {
@@ -112,24 +113,24 @@ export function Intro() {
     <div id="content">
       <div className="backgroundImage" />
       <Card className="intro">
-        <Responsive as={Card.Content} minWidth={768}>
+        <Card.Content as={Media} at="large">
           <Card.Header>
             <FormattedMessage
               id="intro.title"
               defaultMessage="Topola Genealogy Viewer"
             />
           </Card.Header>
-        </Responsive>
+        </Card.Content>
         <Card.Content>
-          <Responsive as={Grid} minWidth={768}>
+          <Grid as={Media} at="large">
             <Grid.Row>
               <Grid.Column width={5}>
                 <Image src={logo} alt="Topola logo" />
               </Grid.Column>
               <Grid.Column width={11}>{contents}</Grid.Column>
             </Grid.Row>
-          </Responsive>
-          <Responsive maxWidth={767}>
+          </Grid>
+          <Media at="small">
             <Image
               src={logo}
               alt="Topola logo"
@@ -138,7 +139,7 @@ export function Intro() {
               className="blockImage"
             />
             {contents}
-          </Responsive>
+          </Media>
         </Card.Content>
       </Card>
     </div>

src/menu/top_bar.tsx

@@ -1,15 +1,16 @@
 import * as queryString from 'query-string';
 import * as React from 'react';
+import {Dropdown, Icon, Menu} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {IndiInfo, JsonGedcomData} from 'topola';
 import {Link} from 'react-router-dom';
+import {Media} from '../util/media';
 import {MenuType} from './menu_item';
 import {RouteComponentProps} from 'react-router-dom';
+import {SearchBar} from './search';
 import {UploadMenu} from './upload_menu';
 import {UrlMenu} from './url_menu';
 import {WikiTreeLoginMenu, WikiTreeMenu} from './wikitree_menu';
-import {Icon, Menu, Dropdown, Responsive} from 'semantic-ui-react';
-import {SearchBar} from './search';
 
 enum ScreenSize {
   LARGE,
@@ -344,26 +345,26 @@ export class TopBar extends React.Component<RouteComponentProps & Props> {
   render() {
     return (
       <>
-        <Responsive
-          as={Menu}
+        <Menu
+          as={Media}
+          at="large"
           attached="top"
           inverted
           color="blue"
           size="large"
-          minWidth={768}
         >
           {this.desktopMenus()}
-        </Responsive>
-        <Responsive
-          as={Menu}
+        </Menu>
+        <Menu
+          as={Media}
+          at="small"
           attached="top"
           inverted
           color="blue"
           size="large"
-          maxWidth={767}
         >
           {this.mobileMenus()}
-        </Responsive>
+        </Menu>
       </>
     );
   }

src/util/media.ts

@@ -0,0 +1,11 @@
+import {createMedia} from '@artsy/fresnel';
+
+/** Defines the breakpoints at which to show different UI variants. */
+const AppMedia = createMedia({
+  breakpoints: {
+    small: 320,
+    large: 768,
+  },
+});
+export const mediaStyles = AppMedia.createMediaStyle();
+export const {Media, MediaContextProvider} = AppMedia;