DistrictCentral/imports/ui/App.svelte

<script>
    import {Meteor} from "meteor/meteor";
    import {onMount} from 'svelte';
    import {useTracker} from 'meteor/rdb:svelte-meteor-data';
    import {BlazeTemplate} from 'meteor/svelte:blaze-integration';
    import {Records} from '../api/records.js'
    import ServiceConfiguration from "meteor/service-configuration";

    let currentUser;

    onMount(async () => {
        // Meteor.subscribe('records');
    });

    // $: incompleteCount = useTracker(() => Tasks.find({checked: {$ne: true}}).count());

    $: currentUser = useTracker(() => Meteor.user());

    // const taskStore = Tasks.find({}, {sort: {createdAt: -1}});
    // $: {
    //     tasks = $taskStore;
    //     if (hideCompleted) {
    //         tasks = tasks.filter(task => !task.checked);
    //     }
    // }

    // function handleSubmit(event) {
    //     Meteor.call("tasks.insert", newTask);
    //     // Clear form
    //     newTask = "";
    // }

    function performLogin() {
	    //Login style can be "popup" or "redirect".  I am not sure we need to request and offline token.
	    Meteor.loginWithGoogle({loginStyle: "popup", requestOfflineToken: true}, (err) => {
	        if(err) {
	            console.log(err);
	        }
	        else {
	            //console.log("Logged in");
	        }
	    })
    }

    function performLogout() {
    	Meteor.logout();
    }
</script>

<div class="container">
	<header>
<!--		<h1>Todo List ({ $incompleteCount })</h1>-->
<!--		<label className="hide-completed">-->
<!--			<input-->
<!--				type="checkbox"-->
<!--				bind:checked={hideCompleted}-->
<!--			/>-->
<!--			Hide Completed Tasks-->
<!--		</label>-->

<!--		<BlazeTemplate template="loginButtons"/>-->
		{#if !$currentUser}
			<button type="button" on:click={performLogin}>Login</button>
		{:else}
			<button type="button" on:click={performLogout}>Logout</button>
		{/if}

		<!--{#if $currentUser}-->
		<!--	<form class="new-task" on:submit|preventDefault={handleSubmit}>-->
		<!--		<input-->
		<!--			type="text"-->
		<!--			placeholder="Type to add new tasks"-->
		<!--			bind:value={newTask}-->
		<!--		/>-->
		<!--	</form>-->
		<!--{/if}-->
	</header>
	<ul>
		<!--{#each tasks as task}-->
		<!--	<Task-->
		<!--		key={task._id}-->
		<!--		task={task}-->
		<!--	/>-->
		<!--{/each}-->
	</ul>
</div>