Commit cd3f4bb8 authored by Élodie Thiéblin's avatar Élodie Thiéblin
Browse files

[BlogPost] Create BlogPost react component

parent f5872adc8ee8
<template>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>
{{blogpost.title}}
</h1>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["context", "blogpost"]
};
</script>
import * as React from "react";
import { BlogPost } from "./blogpostschema";
import { DublinCoreElementComponent } from "../dublincore/DublinCoreImpl";
export const BlogPostComponent: React.FC<{
blogpost: BlogPost;
}> = ({ blogpost }) => {
const container = blogpost.container;
return (
<>
<div>
{"Blog Post of "}
<a href={container.__resource.uri}>{container.title}</a>
</div>
<DublinCoreElementComponent dcelement={blogpost} />
</>
);
};
......@@ -18,6 +18,9 @@
* with CubicWeb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
application,
definition,
......@@ -25,10 +28,7 @@ import {
rdfEntities
} from "@logilab/libview";
import * as $rdf from "rdflib";
import Vue from "vue";
/// <reference path="../common/vue.d.ts" />
import BlogPostImpl from "./BlogPostImpl.vue";
import { loadBlogPost, BlogPost, ONTOLOGY } from "../common/schema";
import { BlogPostComponent } from "./BlogPostView";
/**
* The descriptor for the default blog post view
......@@ -92,38 +92,11 @@ class BlogPostRendering implements implementation.ViewImplementation {
target: application.Resource
): implementation.ViewRendering {
let blogpost = loadBlogPost(renderer, context, target);
let errors: string[] = [];
let previous = Vue.config.errorHandler;
Vue.config.errorHandler = function(err, vm, info) {
errors.push(err.message);
};
let vm = new Vue({
data: {
descriptor: this.descriptor,
blogpost
},
components: { BlogPostImpl },
render: function(createElement) {
return createElement(
"BlogPostImpl",
{
props: {
context: context,
blogpost
}
},
[]
);
}
});
let result = document.createElement("div");
vm.$mount(result);
vm.$forceUpdate();
Vue.config.errorHandler = previous;
if (errors.length > 0) throw errors[0];
ReactDOM.render(<BlogPostComponent blogpost={blogpost} />, result);
return {
dom: vm.$el,
suggestedResources: []
dom: result,
};
}
}
......
......@@ -11,7 +11,7 @@ module.exports = [
conference: "./src/conference/conference.ts",
track: "./src/track/track.ts",
talk: "./src/talk/talk.ts",
blogpost: "./src/blogpost/blogpost.ts",
blogpost: "./src/blogpost/blogpost.tsx",
dcelement: "./src/dublincore/dublincore.tsx"
},
mode: isProd ? "production" : "development",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment