[terms] rewrote 'terms view' with react (#4589)

frontend/config/webpack.config.dev.js

@@ -59,6 +59,11 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/tc-accept.js",
     ],
+    TCView: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/tc-view.js",
+    ],
     userNotifications: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),

frontend/config/webpack.config.prod.js

@@ -60,6 +60,7 @@ module.exports = {
   entry: {
     markdownEditor: [require.resolve('./polyfills'), paths.appIndexJs],
     TCAccept: [require.resolve('./polyfills'), paths.appSrc + "/tc-accept.js"],
+    TCView: [require.resolve('./polyfills'), paths.appSrc + "/tc-view.js"],
     userNotifications: [require.resolve('./polyfills'), paths.appSrc + "/user-notifications.js"],
     wiki: [require.resolve('./polyfills'), paths.appSrc + "/wiki.js"],
     fileHistory: [require.resolve('./polyfills'), paths.appSrc + "/file-history.js"],

frontend/src/tc-view.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Logo from './components/logo';
+import Account from './components/common/account';
+import TermsPreviewWidget from './components/terms-preview-widget';
+
+import './css/tc-accept.css';
+
+const { 
+  termsName,
+  termsText
+} = window.tc;
+
+class TCView extends React.Component {
+
+  render() {
+    return (
+      <div className="h-100 d-flex flex-column">
+        <div className="top-header d-flex justify-content-between">
+          <Logo />
+          <Account />
+        </div>
+        <div className="o-auto">
+          <div className="py-4 px-4 my-6 mx-auto content">
+            <h2 dangerouslySetInnerHTML={{__html: termsName}}></h2>
+            <div className="article">
+              <TermsPreviewWidget content={termsText} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <TCView />,
+  document.getElementById('wrapper')
+);

seahub/templates/termsandconditions/tc_view_terms.html

@@ -1,8 +0,0 @@
-{% extends 'base_wide_page.html' %}
-
-{% block wide_page_content %}
-    <h1>{{ terms.name|safe }}</h1>
-    <div id="tc-content" class="article">
-        {{ terms.text|safe }}
-    </div>
-{% endblock %}

seahub/templates/termsandconditions/tc_view_terms_react.html

@@ -0,0 +1,17 @@
+{% extends "base_for_react.html" %}
+{% load seahub_tags i18n %}
+{% load render_bundle from webpack_loader %}
+
+{% block extra_style %}
+{% render_bundle 'TCAccept' 'css' %}
+{% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+  window.tc = {
+    termsName: "{{ terms.name|escapejs }}",
+    termsText: "{{ terms.text|escapejs }}"
+  };
+</script>
+{% render_bundle 'TCView' 'js' %}
+{% endblock %}

thirdpart/termsandconditions/views.py

@@ -34,7 +34,8 @@ class TermsView(DetailView):
 
     url: /terms/view
     """
-    template_name = "termsandconditions/tc_view_terms.html"
+    #template_name = "termsandconditions/tc_view_terms.html"
+    template_name = "termsandconditions/tc_view_terms_react.html"
     context_object_name = 'terms'
 
     def get_object(self, queryset=None):