Skip to content

Commit 23d0f31

Browse files
shoaibsharifshoaibsharif
committed
pagination supported & added a shortcut to navbar to create a snippet
1 parent 640acb7 commit 23d0f31

11 files changed

+122
-59
lines changed

‎components/Snippet/SnippetList.vue

+27-19
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,32 @@
1010
</div>
1111
<div class="flex items-center">
1212
<p class="mr-2" v-if="showPublic">{{ snippet.is_public ? "Public" : null }}</p>
13-
<nuxt-link
14-
class="p-2 text-blue-500 mr-2 lg:mr-0 hover:bg-gray-400 dark:hover:bg-gray-800 rounded-full transition ease-in-out duration-150"
15-
:to="{name: 'snippets-id-edit', params: {id: snippet.id}}" v-if="snippet.owner">
16-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
17-
stroke="currentColor">
18-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
19-
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
20-
</svg>
21-
</nuxt-link>
22-
<a href="#"
23-
class="p-2 hover:bg-gray-400 dark:hover:bg-gray-800 rounded-full transition ease-in-out duration-150"
24-
@click.prevent="deleteSnippet(snippet)" v-if="snippet.owner">
13+
<client-only>
2514

26-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="h-6 w-6 text-red-500"
27-
viewBox="0 0 24 24"
28-
stroke="currentColor">
29-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
30-
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
31-
</svg>
32-
</a>
15+
<nuxt-link
16+
class="p-2 text-blue-500 mr-2 lg:mr-0 hover:bg-gray-400 dark:hover:bg-gray-800 rounded-full transition ease-in-out duration-150"
17+
:to="{name: 'snippets-id-edit', params: {id: snippet.id}}" v-if="snippet.owner">
18+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
19+
stroke="currentColor">
20+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
21+
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
22+
</svg>
23+
</nuxt-link>
24+
<a href="#"
25+
class="p-2 hover:bg-gray-400 dark:hover:bg-gray-800 rounded-full transition ease-in-out duration-150"
26+
@click.prevent="deleteSnippet(snippet)" v-if="snippet.owner">
27+
28+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="h-6 w-6 text-red-500"
29+
viewBox="0 0 24 24"
30+
stroke="currentColor">
31+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
32+
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
33+
</svg>
34+
</a>
35+
</client-only>
3336
</div>
3437
</nuxt-link>
38+
<div v-observe-visibility="visibilityChanged"></div>
3539
</div>
3640
</template>
3741

@@ -44,6 +48,10 @@ export default {
4448
showPublic: Boolean
4549
},
4650
methods: {
51+
visibilityChanged(isVisible) {
52+
if (!isVisible) return
53+
this.$emit('onVisible', "just updated")
54+
},
4755
async deleteSnippet(snippet) {
4856
await this.$axios.$delete(`/api/snippets/${snippet.id}`);
4957
this.snippets = this.snippets.filter(s => s.id !== snippet.id);

‎components/Step/StepEditor.vue

-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ export default {
8484
if (mode && mode != "null") {
8585
this.codemirror.setOption("mode", spec);
8686
require(`codemirror/mode/${mode}/${mode}`)
87-
console.log({mode, spec})
8887
} else {
8988
require(`codemirror/mode/gfm/gfm`)
9089
}

‎components/Step/StepMarkdown.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,9 @@ export default {
7272
if (mode && mode !== 'null') {
7373
return mode;
7474
}
75-
const arr = title.split('.')
76-
if (arr[arr.length - 1] && hljs.getLanguage(arr[arr.length - 1])) {
77-
console.log(arr[arr.length - 1])
78-
return arr[arr.length - 1]
75+
const getExtensionFromTitle = title.split('.')
76+
if (getExtensionFromTitle[getExtensionFromTitle.length - 1] && hljs.getLanguage(getExtensionFromTitle[getExtensionFromTitle.length - 1])) {
77+
return getExtensionFromTitle[getExtensionFromTitle.length - 1]
7978
8079
}
8180

‎components/Step/StepNavigationButton.vue

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<script>
1111
export default {
1212
props: {
13-
1413
step: {
1514
type: Object | null
1615
}

‎nuxt.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ export default {
4848
],
4949

5050
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
51-
plugins: [],
51+
plugins: [
52+
'@/plugins/visibility-observer.js'
53+
],
5254

5355
// Auto import components: https://go.nuxtjs.dev/config-components
5456
components: true,

‎package-lock.json

+29-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"npm": "^6.14.11",
2828
"nuxt": "^2.14.12",
2929
"vue-highlight.js": "^4.0.0-beta",
30-
"vue-instantsearch": "^3.4.3"
30+
"vue-instantsearch": "^3.4.3",
31+
"vue-observe-visibility": "^1.0.0"
3132
},
3233
"devDependencies": {
3334
"@nuxt/types": "^2.14.12",

‎pages/browse.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<div class="container">
1010
<h1 class="text-xl text-gray-600 dark:text-white font-medium mb-6">All snippet</h1>
11-
<snippet-list :snippets="snippets"/>
11+
<snippet-list :snippets="snippets" @onVisible="visibilityChanged"/>
1212
</div>
1313

1414
</div>
@@ -26,15 +26,26 @@ export default {
2626
},
2727
data() {
2828
return {
29-
snippets: []
29+
snippets: [],
30+
nextPage: null
31+
}
32+
},
33+
methods: {
34+
async visibilityChanged() {
35+
if (this.nextPage) {
36+
const snippets = await this.$axios.$get(this.nextPage);
37+
this.snippets.push(...snippets.data);
38+
this.nextPage = snippets?.links?.next;
39+
}
3040
}
3141
},
3242
mixins: [pagetransition],
3343
async asyncData(ctx) {
3444
const snippets = await ctx.app.$axios.$get('/api/snippets')
3545
3646
return {
37-
snippets: snippets.data
47+
snippets: snippets.data,
48+
nextPage: snippets?.links?.next
3849
}
3950
}
4051
}

‎pages/dashboard/index.vue

+16-9
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,44 @@
66
a snippet
77
</button>
88
</div>
9-
<snippet-list :snippets="snippets" showPublic/>
9+
<snippet-list :snippets="snippets" showPublic @onVisible="visibilityChanged"/>
1010
</div>
1111
</template>
1212

13-
<script lang="ts">
14-
import Vue from 'vue'
15-
import {Context} from "@nuxt/types";
13+
<script>
1614
17-
export default Vue.extend({
15+
export default {
1816
head() {
1917
return {
2018
title: "Dashboard"
2119
}
2220
},
2321
data() {
2422
return {
25-
snippets: []
23+
snippets: [],
24+
nextPage: null
2625
}
2726
},
28-
async asyncData(ctx: Context) {
27+
async asyncData(ctx) {
2928
const snippets = await ctx.$axios.$get("/api/me/snippets")
3029
return {
31-
snippets: snippets.data
30+
snippets: snippets.data,
31+
nextPage: snippets?.links?.next
3232
}
3333
},
3434
methods: {
35+
async visibilityChanged() {
36+
if (this.nextPage) {
37+
const snippets = await this.$axios.$get(this.nextPage);
38+
this.snippets.push(...snippets.data);
39+
this.nextPage = snippets?.links?.next;
40+
}
41+
},
3542
async createSnippet() {
3643
const snippet = await this.$axios.$post('/api/snippets')
3744
await this.$router.push(`/snippets/${snippet.id}/edit`)
3845
},
3946
4047
}
41-
})
48+
}
4249
</script>

0 commit comments

Comments
 (0)