@sanity/dashboard - npm Package Compare versions

Comparing version 0.140.10 to 0.140.12

lib/components/DashboardLayout.js

@@ -8,14 +8,6 @@ "use strict";
 
-var _get2 = _interopRequireDefault(require("lodash/get"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _widget = _interopRequireDefault(require("all:part:@sanity/dashboard/widget?"));
-
-var _config = _interopRequireDefault(require("part:@sanity/dashboard/config?"));
-
-var _DashboardGrid = _interopRequireDefault(require("./DashboardGrid"));
-
-var _WidgetWrapper = _interopRequireDefault(require("./WidgetWrapper"));
-
 var _DashboardLayout = _interopRequireDefault(require("./DashboardLayout.css"));
@@ -25,41 +17,16 @@
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function DashboardLayout(props) {
-  if (!_config.default) {
-    return null;
-  }
-
-  var widgetConfigs = (0, _get2.default)(_config.default, 'widgets', []);
-  return _react.default.createElement(_DashboardGrid.default, null, widgetConfigs.map((widgetConfig, index) => {
-    var name = widgetConfig.name;
-
-    var widgetDefinition = _widget.default.find(wid => wid.name === name);
-
-    var key = `${name}_${index}`;
-
-    if (widgetDefinition) {
-      var widgetOptions = _objectSpread({}, widgetDefinition.options || {}, widgetConfig.options || {});
-
-      var widgetLayout = _objectSpread({}, widgetDefinition.layout || {}, widgetConfig.layout || {});
-
-      var Widget = widgetDefinition.component;
-      return _react.default.createElement(_WidgetWrapper.default, _extends({
-        key: key
-      }, widgetLayout), _react.default.createElement(Widget, widgetOptions));
-    }
-
-    return _react.default.createElement(_WidgetWrapper.default, {
-      key: key
-    }, _react.default.createElement("div", {
-      className: _DashboardLayout.default.missingWidget
-    }, _react.default.createElement("h4", null, `Could not find the Dashboard Widget named "${name}" `), _react.default.createElement("p", null, "Make sure your ", _react.default.createElement("code", null, "sanity.json"), " file mentions such a widget and that it's an implementaion of ", _react.default.createElement("code", null, "part:@sanity/dashboard/widget"))));
-  }));
+  return _react.default.createElement("div", {
+    className: _DashboardLayout.default.root
+  }, props.children);
 }
 
+DashboardLayout.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  children: _propTypes.default.any
+};
+DashboardLayout.defaultProps = {
+  children: 'Dummy'
+};
 var _default = DashboardLayout;
 exports.default = _default;

lib/components/story.js

@@ -5,4 +5,8 @@ "use strict";
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _widgetStyles = _interopRequireDefault(require("part:@sanity/dashboard/widget-styles"));
+
 var _storybook = require("part:@sanity/storybook");
@@ -14,5 +18,5 @@
 
-var _WidgetWrapper = _interopRequireDefault(require("./WidgetWrapper"));
+var _DashboardLayout = _interopRequireDefault(require("./DashboardLayout"));
 
-var _DashboardGrid = _interopRequireDefault(require("./DashboardGrid"));
+var _WidgetGroup = _interopRequireDefault(require("./WidgetGroup.css"));
 
@@ -33,2 +37,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     _defineProperty(this, "state", {
+      height: 'auto',
       width: 'auto'
@@ -51,4 +56,17 @@ });
   render() {
-    return _react.default.createElement(_WidgetWrapper.default, this.state, _react.default.createElement("h1", null, this.props.title), _react.default.createElement("p", null, para), _react.default.createElement("div", {
+    return _react.default.createElement("div", {
+      "data-width": this.state.width || 'auto',
+      "data-height": this.state.height || 'auto'
+    }, _react.default.createElement("div", {
+      className: _widgetStyles.default.container
+    }, _react.default.createElement("div", {
+      className: _widgetStyles.default.header
+    }, _react.default.createElement("h2", {
+      className: _widgetStyles.default.title
+    }, this.props.title)), _react.default.createElement("div", {
       style: {
+        padding: '0 1rem 1rem'
+      }
+    }, _react.default.createElement("p", null, para), _react.default.createElement("div", {
+      style: {
         dispay: 'flex'
@@ -64,3 +82,3 @@ }
       onChange: this.handleHeightChange
-    }, _react.default.createElement("option", null, "auto"), _react.default.createElement("option", null, "small"), _react.default.createElement("option", null, "medium"), _react.default.createElement("option", null, "large"), _react.default.createElement("option", null, "full"))));
+    }, _react.default.createElement("option", null, "auto"), _react.default.createElement("option", null, "small"), _react.default.createElement("option", null, "medium"), _react.default.createElement("option", null, "large"), _react.default.createElement("option", null, "full"))))));
   }
@@ -70,8 +88,14 @@
 
+_defineProperty(StoryWidget, "propTypes", {
+  title: _propTypes.default.string.isRequired
+});
+
 (0, _storybook.storiesOf)('Dashboard').addDecorator(_knobs.withKnobs).add('Grid', () => {
   var widgets = (0, _range2.default)((0, _knobs.number)('widgets', 7));
-  return _react.default.createElement(_DashboardGrid.default, null, widgets.map(widget => _react.default.createElement(StoryWidget, {
+  return _react.default.createElement(_DashboardLayout.default, null, _react.default.createElement("div", {
+    className: _WidgetGroup.default.root
+  }, widgets.map(widget => _react.default.createElement(StoryWidget, {
     key: widget,
-    title: widget + 1
-  })));
+    title: `Widget ${widget + 1}`
+  }))));
 });

lib/DashboardTool.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _DashboardLayout = _interopRequireDefault(require("./components/DashboardLayout"));
+var _Dashboard = _interopRequireDefault(require("./containers/Dashboard"));
 
@@ -32,4 +32,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   icon: Icon,
-  component: _DashboardLayout.default
+  component: _Dashboard.default
 };
 exports.default = _default;

lib/widgets/projectInfo/ProjectInfo.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _widgetContainer = _interopRequireDefault(require("part:@sanity/dashboard/widget-container"));
+
 var _ProjectInfo = _interopRequireDefault(require("./ProjectInfo.css"));
@@ -156,2 +158,7 @@
     return _react.default.createElement("div", {
+      className: _ProjectInfo.default.parentWrapper
+    }, this.props.__experimental_before && this.props.__experimental_before.map((widgetConfig, idx) => _react.default.createElement(_widgetContainer.default, {
+      key: String(idx),
+      config: widgetConfig
+    })), _react.default.createElement("div", {
       className: _ProjectInfo.default.container
@@ -171,9 +178,12 @@ }, _react.default.createElement("header", {
         key: item.title
-      }, _react.default.createElement("tr", null, _react.default.createElement("th", {
-        colSpan: "2",
-        className: _ProjectInfo.default.sectionHeader
+      }, _react.default.createElement("tr", {
+        className: _ProjectInfo.default.sectionHeaderRow
+      }, _react.default.createElement("th", {
+        colSpan: "2"
       }, item.title)), item.rows.map(row => {
         return _react.default.createElement("tr", {
           key: row.title
-        }, _react.default.createElement("th", null, row.title), (0, _isPlainObject2.default)(row.value) && _react.default.createElement("td", {
+        }, _react.default.createElement("th", {
+          className: _ProjectInfo.default.rowTitle
+        }, row.title), (0, _isPlainObject2.default)(row.value) && _react.default.createElement("td", {
           className: _ProjectInfo.default.apiError
@@ -185,3 +195,3 @@ }, row.value.error), !(0, _isPlainObject2.default)(row.value) && _react.default.createElement("td", null, isUrl(row.value) ? _react.default.createElement("a", {
     })), _react.default.createElement("div", {
-      className: _ProjectInfo.default.buttonContainer
+      className: _ProjectInfo.default.footer
     }, _react.default.createElement(_anchor.default, {
@@ -192,3 +202,3 @@ href: getManageUrl(),
       kind: "simple"
-    }, "Manage project")));
+    }, "Manage project"))));
   }
@@ -199,2 +209,4 @@
 _defineProperty(ProjectInfo, "propTypes", {
+  // eslint-disable-next-line camelcase
+  __experimental_before: _propTypes.default.array,
   data: _propTypes.default.array
@@ -204,2 +216,4 @@ });
 _defineProperty(ProjectInfo, "defaultProps", {
+  // eslint-disable-next-line camelcase
+  __experimental_before: [],
   data: []
@@ -206,0 +220,0 @@ });

lib/widgets/projectUsers/ProjectUsers.js

@@ -130,3 +130,3 @@ "use strict";
     })), _react.default.createElement("div", {
-      className: _ProjectUsers.default.buttonContainer
+      className: _ProjectUsers.default.footer
     }, _react.default.createElement(_anchor.default, {
@@ -133,0 +133,0 @@ disabled: isLoading,

lib/widgets/sanityTutorials/dataAdapter.js

@@ -8,4 +8,6 @@ "use strict";
 
-var _client = _interopRequireDefault(require("@sanity/client"));
+var _client = _interopRequireDefault(require("part:@sanity/base/client"));
 
+var _client2 = _interopRequireDefault(require("@sanity/client"));
+
 var _imageUrl = _interopRequireDefault(require("@sanity/image-url"));
@@ -15,4 +17,3 @@
 
-// We're connecting to
-var client = (0, _client.default)({
+var configuredClient = (0, _client2.default)({
   projectId: '3do82whm',
@@ -22,23 +23,9 @@ dataset: 'production',
 });
-var query = `
-  *[_id == 'dashboardFeed-v1'] {
-    items[]-> {
-      _id,
-      title,
-      poster,
-      youtubeURL,
-      "presenter": authors[0]-> {name, mugshot, bio},
-      guideOrTutorial-> {
-        title,
-        slug,
-        "presenter": authors[0]-> {name, mugshot, bio},
-        _createdAt
-      }
-    }
-  }[0]
-`;
 var _default = {
-  getFeed: () => client.observable.fetch(query),
-  urlBuilder: (0, _imageUrl.default)(client)
+  getFeed: () => _client.default.request({
+    uri: '/addons/dashboard',
+    withCredentials: false
+  }),
+  urlBuilder: (0, _imageUrl.default)(configuredClient)
 };
 exports.default = _default;

lib/widgets/sanityTutorials/SanityTutorials.js

@@ -28,3 +28,3 @@ "use strict";
 function createUrl(slug) {
-  return `https://www.sanity.io/guide/${slug.current}`;
+  return `https://www.sanity.io/docs/guides/${slug.current}`;
 }
@@ -42,4 +42,3 @@
   componentDidMount() {
-    this.unsubscribe();
-    this.subscription = getFeed().subscribe(response => {
+    getFeed().then(response => {
       this.setState({
@@ -51,15 +50,7 @@ feedItems: response.items
 
-  componentWillUnmount() {
-    this.unsubscribe();
-  }
-
-  unsubscribe() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-  }
-
   render() {
     var feedItems = this.state.feedItems;
-    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("header", {
+    return _react.default.createElement("div", {
+      className: _SanityTutorials.default.root
+    }, _react.default.createElement("header", {
       className: _SanityTutorials.default.header
@@ -66,0 +57,0 @@ }, _react.default.createElement("h1", {

package.json

 {
   "name": "@sanity/dashboard",
-  "version": "0.140.10",
+  "version": "0.140.12",
   "description": "Tool for rendering dashboard widgets",
@@ -27,3 +27,3 @@ "main": "src/DashboardTool.js",
   "devDependencies": {
-    "@sanity/base": "0.140.8",
+    "@sanity/base": "0.140.12",
     "@sanity/check": "0.140.3",
@@ -50,3 +50,3 @@ "history": "^4.6.3",
   "homepage": "https://www.sanity.io/",
-  "gitHead": "171529d7d20b312b159862fe65eea26aef8e56b1"
+  "gitHead": "749e9886735303e3c04a481f2a3a800e4e9bf8c5"
 }

sanity.json

@@ -49,4 +49,12 @@ {
       "path": "widget.css"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget-container",
+      "description": "A container component that resolves and renders widget components"
+    },
+    {
+      "implements": "part:@sanity/dashboard/widget-container",
+      "path": "containers/WidgetContainer"
     }
   ]
 }

src/components/DashboardLayout.js

@@ -1,53 +0,19 @@
-/* eslint-disable class-methods-use-this, no-console */
+import PropTypes from 'prop-types'
 import React from 'react'
-import {get} from 'lodash'
-import widgetDefinitions from 'all:part:@sanity/dashboard/widget?'
-import dashboardConfig from 'part:@sanity/dashboard/config?'
-import DashboardGrid from './DashboardGrid'
-import WidgetWrapper from './WidgetWrapper'
+
 import styles from './DashboardLayout.css'
 
 function DashboardLayout(props) {
-  if (!dashboardConfig) {
-    return null
-  }
+  return <div className={styles.root}>{props.children}</div>
+}
 
-  const widgetConfigs = get(dashboardConfig, 'widgets', [])
-  return (
-    <DashboardGrid>
-      {widgetConfigs.map((widgetConfig, index) => {
-        const {name} = widgetConfig
-        const widgetDefinition = widgetDefinitions.find(wid => wid.name === name)
-        const key = `${name}_${index}`
+DashboardLayout.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  children: PropTypes.any
+}
 
-        if (widgetDefinition) {
-          const widgetOptions = {
-            ...(widgetDefinition.options || {}),
-            ...(widgetConfig.options || {})
-          }
-          const widgetLayout = {...(widgetDefinition.layout || {}), ...(widgetConfig.layout || {})}
-          const Widget = widgetDefinition.component
-          return (
-            <WidgetWrapper key={key} {...widgetLayout}>
-              <Widget {...widgetOptions} />
-            </WidgetWrapper>
-          )
-        }
-
-        return (
-          <WidgetWrapper key={key}>
-            <div className={styles.missingWidget}>
-              <h4>{`Could not find the Dashboard Widget named "${name}" `}</h4>
-              <p>
-                Make sure your <code>sanity.json</code> file mentions such a widget and that it's an
-                implementaion of <code>part:@sanity/dashboard/widget</code>
-              </p>
-            </div>
-          </WidgetWrapper>
-        )
-      })}
-    </DashboardGrid>
-  )
+DashboardLayout.defaultProps = {
+  children: 'Dummy'
 }
 
 export default DashboardLayout

src/components/story.js

@@ -1,3 +0,4 @@
-/* eslint-disable react/no-multi-comp */
+import PropTypes from 'prop-types'
 import React from 'react'
+import widgetStyles from 'part:@sanity/dashboard/widget-styles'
 import {storiesOf} from 'part:@sanity/storybook'
@@ -7,4 +8,4 @@ import {withKnobs, number} from 'part:@sanity/storybook/addons/knobs'
 import Chance from 'chance'
-import WidgetWrapper from './WidgetWrapper'
-import DashboardGrid from './DashboardGrid'
+import DashboardLayout from './DashboardLayout'
+import widgetGroupStyles from './WidgetGroup.css'
 
@@ -15,3 +16,8 @@ const chance = new Chance()
 class StoryWidget extends React.Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired
+  }
+
   state = {
+    height: 'auto',
     width: 'auto'
@@ -30,27 +36,32 @@ }
     return (
-      <WidgetWrapper {...this.state}>
-        <h1>{this.props.title}</h1>
-        <p>{para}</p>
-        <div style={{dispay: 'flex'}}>
-          <label>Width</label>
-          <select onChange={this.handleWidthChange}>
-            <option>auto</option>
-            <option>small</option>
-            <option>medium</option>
-            <option>large</option>
-            <option>full</option>
-          </select>
+      <div data-width={this.state.width || 'auto'} data-height={this.state.height || 'auto'}>
+        <div className={widgetStyles.container}>
+          <div className={widgetStyles.header}>
+            <h2 className={widgetStyles.title}>{this.props.title}</h2>
+          </div>
+          <div style={{padding: '0 1rem 1rem'}}>
+            <p>{para}</p>
+            <div style={{dispay: 'flex'}}>
+              <label>Width</label>
+              <select onChange={this.handleWidthChange}>
+                <option>auto</option>
+                <option>small</option>
+                <option>medium</option>
+                <option>large</option>
+                <option>full</option>
+              </select>
+            </div>
+            <div style={{dispay: 'flex'}}>
+              <label>Height</label>
+              <select onChange={this.handleHeightChange}>
+                <option>auto</option>
+                <option>small</option>
+                <option>medium</option>
+                <option>large</option>
+                <option>full</option>
+              </select>
+            </div>
+          </div>
         </div>
-
-        <div style={{dispay: 'flex'}}>
-          <label>Height</label>
-          <select onChange={this.handleHeightChange}>
-            <option>auto</option>
-            <option>small</option>
-            <option>medium</option>
-            <option>large</option>
-            <option>full</option>
-          </select>
-        </div>
-      </WidgetWrapper>
+      </div>
     )
@@ -65,8 +76,10 @@ }
     return (
-      <DashboardGrid>
-        {widgets.map(widget => (
-          <StoryWidget key={widget} title={widget + 1} />
-        ))}
-      </DashboardGrid>
+      <DashboardLayout>
+        <div className={widgetGroupStyles.root}>
+          {widgets.map(widget => (
+            <StoryWidget key={widget} title={`Widget ${widget + 1}`} />
+          ))}
+        </div>
+      </DashboardLayout>
     )
   })

src/DashboardTool.js

 import React from 'react'
-import DashboardLayout from './components/DashboardLayout'
+import Dashboard from './containers/Dashboard'
 
@@ -19,3 +19,3 @@ const Icon = () => (
   icon: Icon,
-  component: DashboardLayout
+  component: Dashboard
 }

src/widgets/projectInfo/ProjectInfo.js

@@ -7,2 +7,3 @@ /* eslint-disable react/forbid-prop-types, no-console */
 import AnchorButton from 'part:@sanity/components/buttons/anchor'
+import WidgetContainer from 'part:@sanity/dashboard/widget-container'
 import styles from './ProjectInfo.css'
@@ -30,5 +31,9 @@
   static propTypes = {
+    // eslint-disable-next-line camelcase
+    __experimental_before: PropTypes.array,
     data: PropTypes.array
   }
   static defaultProps = {
+    // eslint-disable-next-line camelcase
+    __experimental_before: [],
     data: []
@@ -134,42 +139,48 @@ }
     return (
-      <div className={styles.container}>
-        <header className={styles.header}>
-          <h2 className={styles.title}>Project info</h2>
-        </header>
-        <table className={styles.table}>
-          {this.assembleTableRows().map(item => {
-            if (!item || !item.rows) {
-              return null
-            }
+      <div className={styles.parentWrapper}>
+        {this.props.__experimental_before &&
+          this.props.__experimental_before.map((widgetConfig, idx) => (
+            <WidgetContainer key={String(idx)} config={widgetConfig} />
+          ))}
+        <div className={styles.container}>
+          <header className={styles.header}>
+            <h2 className={styles.title}>Project info</h2>
+          </header>
 
-            return (
-              <tbody key={item.title}>
-                <tr>
-                  <th colSpan="2" className={styles.sectionHeader}>
-                    {item.title}
-                  </th>
-                </tr>
-                {item.rows.map(row => {
-                  return (
-                    <tr key={row.title}>
-                      <th>{row.title}</th>
-                      {isPlainObject(row.value) && (
-                        <td className={styles.apiError}>{row.value.error}</td>
-                      )}
-                      {!isPlainObject(row.value) && (
-                        <td>
-                          {isUrl(row.value) ? <a href={row.value}>{row.value}</a> : row.value}
-                        </td>
-                      )}
-                    </tr>
-                  )
-                })}
-              </tbody>
-            )
-          })}
-        </table>
-        <div className={styles.buttonContainer}>
-          <AnchorButton href={getManageUrl()} bleed color="primary" kind="simple">
-            Manage project
-          </AnchorButton>
+          <table className={styles.table}>
+            {this.assembleTableRows().map(item => {
+              if (!item || !item.rows) {
+                return null
+              }
+
+              return (
+                <tbody key={item.title}>
+                  <tr className={styles.sectionHeaderRow}>
+                    <th colSpan="2">{item.title}</th>
+                  </tr>
+                  {item.rows.map(row => {
+                    return (
+                      <tr key={row.title}>
+                        <th className={styles.rowTitle}>{row.title}</th>
+                        {isPlainObject(row.value) && (
+                          <td className={styles.apiError}>{row.value.error}</td>
+                        )}
+                        {!isPlainObject(row.value) && (
+                          <td>
+                            {isUrl(row.value) ? <a href={row.value}>{row.value}</a> : row.value}
+                          </td>
+                        )}
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              )
+            })}
+          </table>
+
+          <div className={styles.footer}>
+            <AnchorButton href={getManageUrl()} bleed color="primary" kind="simple">
+              Manage project
+            </AnchorButton>
+          </div>
         </div>
@@ -176,0 +187,0 @@ </div>

src/widgets/projectUsers/ProjectUsers.js

@@ -110,3 +110,3 @@ import React from 'react'
 
-        <div className={styles.buttonContainer}>
+        <div className={styles.footer}>
           <AnchorButton
@@ -113,0 +113,0 @@ disabled={isLoading}

src/widgets/sanityTutorials/dataAdapter.js

@@ -0,6 +1,6 @@
+import client from 'part:@sanity/base/client'
 import sanityClient from '@sanity/client'
 import imageUrlBuilder from '@sanity/image-url'
 
-// We're connecting to
-const client = sanityClient({
+const configuredClient = sanityClient({
   projectId: '3do82whm',
@@ -11,23 +11,5 @@ dataset: 'production',
 
-const query = `
-  *[_id == 'dashboardFeed-v1'] {
-    items[]-> {
-      _id,
-      title,
-      poster,
-      youtubeURL,
-      "presenter": authors[0]-> {name, mugshot, bio},
-      guideOrTutorial-> {
-        title,
-        slug,
-        "presenter": authors[0]-> {name, mugshot, bio},
-        _createdAt
-      }
-    }
-  }[0]
-`
-
 export default {
-  getFeed: () => client.observable.fetch(query),
-  urlBuilder: imageUrlBuilder(client)
+  getFeed: () => client.request({uri: '/addons/dashboard', withCredentials: false}),
+  urlBuilder: imageUrlBuilder(configuredClient)
 }

src/widgets/sanityTutorials/SanityTutorials.js

@@ -11,3 +11,3 @@ import React from 'react'
 function createUrl(slug) {
-  return `https://www.sanity.io/guide/${slug.current}`
+  return `https://www.sanity.io/docs/guides/${slug.current}`
 }
@@ -21,4 +21,3 @@
   componentDidMount() {
-    this.unsubscribe()
-    this.subscription = getFeed().subscribe(response => {
+    getFeed().then(response => {
       this.setState({
@@ -30,16 +29,6 @@ feedItems: response.items
 
-  componentWillUnmount() {
-    this.unsubscribe()
-  }
-
-  unsubscribe() {
-    if (this.subscription) {
-      this.subscription.unsubscribe()
-    }
-  }
-
   render() {
     const {feedItems} = this.state
     return (
-      <>
+      <div className={styles.root}>
         <header className={styles.header}>
@@ -71,3 +60,3 @@ <h1 className={styles.title}>Guides & tutorials</h1>
         </ul>
-      </>
+      </div>
     )
@@ -74,0 +63,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72445

increased by7.53%

Number of package files

53

increased by8.16%

Lines of code

2066

increased by8.79%

No dependency changes