sermons: use Sermon Manager for sermons data, integrate to WPGraphQL

paulolieuthier · Sep 8, 2021 · 892d5a2 · 892d5a2
1 parent 800560f
commit 892d5a2
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 27 deletions.
diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
@@ -10,9 +10,9 @@ if ! test -f wp-config.php; then
     wp config create --dbname=${WORDPRESS_DB_NAME} --dbhost=${WORDPRESS_DB_HOST} --dbuser=${WORDPRESS_DB_USER} --dbpass=${WORDPRESS_DB_PASSWORD}
     wp core install --url="${WORDPRESS_URL}" --title="Igreja Presbiteriana de Casa Caiada" --admin_user=admin --admin_password=admin --admin_email=email@email.com --skip-email
     wp option update blogdescription "Igreja Presbiteriana do Brasil"
+
+    wp plugin install --activate wp-graphql sermon-manager-for-wordpress
+    wp theme activate ipcasacaiada
 fi
 
-wp plugin uninstall akismet hello
-wp plugin install --activate wp-graphql
-wp theme activate ipcasacaiada
 exec php -S 0.0.0.0:8000 -d display_erros=1 -d upload_max_filesize=10M -d post_max_size=10M
diff --git a/theme/functions.php b/theme/functions.php
@@ -117,15 +117,68 @@
 });
 
 #
-# Include generated script, style and custom javascript data in theme
+# Include generated script and style in theme markup
 #
 
 add_action('wp_enqueue_scripts', function() {
     # insert css and javascript
     wp_enqueue_style('theme-css', get_template_directory_uri() . '/dist/index.css');
     wp_enqueue_script('theme-js', get_template_directory_uri() . '/dist/index.js', array(), null, true);
-    # insert javascript variable with theme directory uri
-    wp_localize_script('theme-js', 'wpParams', array('templateDir' => get_template_directory_uri()));
+});
+
+#
+# Add support for Sermon Manager's custom post type and taxonomies in WPGraphQL
+#
+
+add_filter('register_post_type_args', function($args, $post_type) {
+    if ($post_type === 'wpfc_sermon') {
+        $args['show_in_graphql'] = true;
+        $args['graphql_single_name'] = 'sermon';
+        $args['graphql_plural_name'] = 'sermons';
+    }
+
+    return $args;
+}, 10, 2);
+
+add_filter('register_taxonomy_args', function($args, $taxonomy) {
+    if ($taxonomy === 'wpfc_preacher') {
+        $args['show_in_graphql'] = true;
+        $args['graphql_single_name'] = 'preacher';
+        $args['graphql_plural_name'] = 'preachers';
+
+    } else if ($taxonomy === 'wpfc_sermon_series') {
+        $args['show_in_graphql'] = true;
+        $args['graphql_single_name'] = 'sermonSerie';
+        $args['graphql_plural_name'] = 'sermonSeries';
+
+    } else if ($taxonomy === 'wpfc_sermon_topics') {
+        $args['show_in_graphql'] = true;
+        $args['graphql_single_name'] = 'sermonTopic';
+        $args['graphql_plural_name'] = 'sermonTopics';
+
+    } else if ($taxonomy === 'wpfc_service_type') {
+        $args['show_in_graphql'] = true;
+        $args['graphql_single_name'] = 'serviceType';
+        $args['graphql_plural_name'] = 'serviceTypes';
+
+    } else if ($taxonomy === 'wpfc_bible_book') {
+        $args['show_in_graphql'] = true;
+        $args['graphql_single_name'] = 'bibleBook';
+        $args['graphql_plural_name'] = 'bibleBooks';
+    }
+
+    return $args;
+}, 10, 2);
+
+# manually include sermon series' image field
+add_action('graphql_register_types', function() {
+    register_graphql_field('SermonSerie', 'image', [
+        'type' => 'String',
+        'description' => 'Sermon series image',
+        'resolve' => function($source, $args, $context, $info) {
+            return get_sermon_series_image_url($source->term_id, 'large');
+        }
+    ]);
 });
 
 ?>
diff --git a/theme/src/components/Home.vue b/theme/src/components/Home.vue
@@ -62,14 +62,14 @@
 
     <Section id="sermon-series" class="spacing alternate" flow="column" title="Séries de Sermões">
         <div id="cards">
-            <a v-for="sermon in sermons" id="card" href="#">
-                <div class="image-wrapper">
-                    <img :src="asset(sermon.image)" />
-                </div>
-                <template v-if="sermon.title">
-                    <span>{{ sermon.title }}</span>
-                </template>
-            </a>
+            <template v-for="series in sermons">
+                <a id="card" :href="`/sermon-series/${series.slug}`">
+                    <div class="image-wrapper">
+                        <img :src="series.image" />
+                    </div>
+                    <span>{{ series.name }}</span>
+                </a>
+            </template>
         </div>
         <Button class="see-more">Ver Todos</Button>
     </Section>
@@ -218,12 +218,22 @@ export default {
                     socialFacebook,
                     socialSpotify,
                 }
+                sermons: sermonSeries {
+                    nodes {
+                        name
+                        slug
+                        count
+                        image
+                    }
+                }
+
             }`,
             manual: true,
             result: function({ data, loading }) {
                 if (!loading) {
                     this.site = data.site
                     this.theme = data.theme
+                    this.sermons = data.sermons.nodes
                 }
             },
         }
@@ -233,16 +243,7 @@ export default {
             // default initialization of root queried data is necessary
             site: {},
             theme: {},
-            sermons: [
-                { title: 'Atos', image: 'sermons/series-1.jpg' },
-                { title: '1 Coríntios', image: 'sermons/series-2.jpg' },
-                { title: '2 Coríntios', image: 'sermons/series-3.jpg' },
-                { title: 'Eclesiastes', image: 'sermons/series-4.jpg' },
-                { title: 'Apocalipse', image: 'sermons/series-5.jpg' },
-                { title: 'Sermão Profético', image: 'sermons/series-6.jpg' },
-                { title: 'Romanos', image: 'sermons/series-7.jpg' },
-                { title: 'Salmos', image: 'sermons/series-8.jpg' },
-            ]
+            sermons: {},
         }
     },
     computed: {

diff --git a/theme/src/index.js b/theme/src/index.js
@@ -4,8 +4,6 @@ import { createApolloProvider } from '@vue/apollo-option'
 import App from './components/App.vue'
 
 
-// wpParams is set in functions.php
-
 const apolloProvider = createApolloProvider({
   defaultClient: new ApolloClient({
     link: createHttpLink({ uri: `/graphql` }),
@@ -14,6 +12,5 @@ const apolloProvider = createApolloProvider({
 })
 
 const app = createApp(App)
-app.config.globalProperties.asset = (asset) => `${wpParams.templateDir}/assets/${asset}`
 app.use(apolloProvider)
 app.mount('#app')