New: Movie Certifications

frontend/src/Settings/Metadata/MetadataSettings.js

@@ -1,21 +1,68 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import MetadatasConnector from './Metadata/MetadatasConnector';
+import MetadataOptionsConnector from './Options/MetadataOptionsConnector';
 
-function MetadataSettings() {
-  return (
-    <PageContent title="Metadata Settings">
-      <SettingsToolbarConnector
-        showSave={false}
-      />
+class MetadataSettings extends Component {
 
-      <PageContentBodyConnector>
-        <MetadatasConnector />
-      </PageContentBodyConnector>
-    </PageContent>
-  );
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._saveCallback = null;
+
+    this.state = {
+      isSaving: false,
+      hasPendingChanges: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onChildMounted = (saveCallback) => {
+    this._saveCallback = saveCallback;
+  }
+
+  onChildStateChange = (payload) => {
+    this.setState(payload);
+  }
+
+  onSavePress = () => {
+    if (this._saveCallback) {
+      this._saveCallback();
+    }
+  }
+
+  render() {
+    const {
+      isSaving,
+      hasPendingChanges
+    } = this.state;
+
+    return (
+      <PageContent title="Metadata Settings">
+        <SettingsToolbarConnector
+          isSaving={isSaving}
+          hasPendingChanges={hasPendingChanges}
+          onSavePress={this.onSavePress}
+        />
+
+        <PageContentBodyConnector>
+          <MetadataOptionsConnector
+            onChildMounted={this.onChildMounted}
+            onChildStateChange={this.onChildStateChange}
+          />
+
+          <MetadatasConnector />
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
 }
 
 export default MetadataSettings;