Skip to content

Commit

Permalink
Merge pull request #266 from gagan-suie/dev
Browse files Browse the repository at this point in the history
Feat: fixed naming conventions and added sections page
  • Loading branch information
gagansuie authored Feb 17, 2023
2 parents 1d6dc57 + f4d040a commit 911939a
Show file tree
Hide file tree
Showing 30 changed files with 239 additions and 124 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { tags, getTags } from '$lib/stores/channelStore'
import { onMount } from 'svelte'
import Tags from 'svelte-tags-input'
import AddCategoryDrawer from './AddCategoryDrawer.svelte'
import DrawerAddCategory from './DrawerAddCategory.svelte'
import { goto } from '$app/navigation'
import { post, put } from '$lib/api'
Expand Down Expand Up @@ -72,7 +72,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={() => (showDrawer = false)} class="drawer-overlay" />
{#if showAddCategory}
<AddCategoryDrawer
<DrawerAddCategory
bind:showAddCategory
bind:categoryIcons
bind:categories={newChannel.category} />
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Browse/SearchBar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import IconCreate from '$lib/assets/icons/IconCreate.svelte'
import IconCross from '$lib/assets/icons/IconCross.svelte'
import IconSearch from '$lib/assets/icons/IconSearch.svelte'
import CreateChannelDrawer from './CreateChannelDrawer.svelte'
import DrawerCreateChannel from './DrawerCreateChannel.svelte'
import { current_user } from '$lib/stores/authStore'
import { is_login_modal_open } from '$lib/stores/helperStore'
Expand Down Expand Up @@ -48,6 +48,6 @@
{/if}

{#if showDrawer && !searchPage}
<CreateChannelDrawer bind:showDrawer />
<DrawerCreateChannel bind:showDrawer />
{/if}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import IconDrawerLeft from '$lib/assets/icons/drawer/IconDrawerLeft.svelte'
import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
import { goto } from '$app/navigation'
import LoadingCarouselItem from '$lib/components/Browse/Sections/LoadingCarouselItem.svelte'
import LoadingItemCarousel from '$lib/components/Browse/Sections/LoadingItemCarousel.svelte'
import { onMount } from 'svelte'
import Swiper, { Navigation } from 'swiper'
Expand Down Expand Up @@ -71,7 +71,7 @@
{:else}
<div role="status" class="flex flex-row gap-1 animate-pulse">
{#each Array(5) as _, index (index)}
<LoadingCarouselItem />
<LoadingItemCarousel />
{/each}
<span class="sr-only">Loading...</span>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
import IconPlay from '$lib/assets/icons/IconPlay.svelte'
import { goto } from '$app/navigation'
import LoadingChannelItem from '$lib/components/Browse/Sections/LoadingChannelItem.svelte'
import LoadingItemChannel from '$lib/components/Browse/Sections/LoadingItemChannel.svelte'
export let title: string = '',
channels: any = undefined,
isLoading: boolean = false
isLoading: boolean = false,
sectionId: string = ''
let ref: any
$: hidden = ((channels != undefined && channels.length == 0) || channels.error) && !isLoading
Expand All @@ -34,7 +35,7 @@
<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide" class:hidden>
{#if channels && channels.length}
<div class="font-semibold m-3">
<a class="link link-secondary text-lg">{title}</a>
<a class="link link-secondary text-lg" href="/browse/{sectionId}">{title}</a>
</div>
<div class="flex flex-row">
<div class="relative flex items-center">
Expand Down Expand Up @@ -100,7 +101,7 @@
</div>
<div role="status" class="flex flex-row gap-1 animate-pulse ">
{#each Array(6) as _, index (index)}
<LoadingChannelItem />
<LoadingItemChannel />
{/each}
<span class="sr-only">Loading...</span>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import VirtualList from '@sveltejs/svelte-virtual-list'
import { techList } from '$lib/stores/channelStore'
import { goto } from '$app/navigation'
import LoadingTableItem from '$lib/components/Browse/Sections/LoadingTableItem.svelte'
import LoadingItemTable from '$lib/components/Browse/Sections/LoadingItemTable.svelte'
export let channels: any = [],
isLoading: boolean = false
Expand Down Expand Up @@ -83,7 +83,7 @@
{:else}
<!-- {#each Array(5) as _, index (index)} -->
<tr>
<LoadingTableItem />
<LoadingItemTable />
</tr>
<!-- {/each} -->
<span class="sr-only">Loading...</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
import IconPlay from '$lib/assets/icons/IconPlay.svelte'
import { goto } from '$app/navigation'
import LoadingChannelItem from '$lib/components/Browse/Sections/LoadingChannelItem.svelte'
import LoadingItemChannel from '$lib/components/Browse/Sections/LoadingItemChannel.svelte'
export let title: string = '',
users: any = undefined,
isLoading: boolean = false
isLoading: boolean = false,
sectionId: string = ''
let ref: any
$: hidden = ((users != undefined && users.length == 0) || users.error) && !isLoading
Expand Down Expand Up @@ -35,7 +36,7 @@
<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide" class:hidden>
{#if users && users.length}
<div class="font-semibold m-3">
<a class="link link-secondary text-lg">{title}</a>
<a class="link link-secondary text-lg" href="/browse/{sectionId}">{title}</a>
</div>
<div class="flex flex-row">
<div class="relative flex items-center">
Expand Down Expand Up @@ -103,7 +104,7 @@
</div>
<div role="status" class="flex flex-row gap-1 animate-pulse ">
{#each Array(6) as _, index (index)}
<LoadingChannelItem />
<LoadingItemChannel />
{/each}
<span class="sr-only">Loading...</span>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import ChatInput from '$lib/components/Channel/Chat/ChatInput.svelte'
import ChatMessage from '$lib/components/Channel/Chat/ChatMessage.svelte'
import Message from '$lib/components/Channel/Chat/Message.svelte'
import { channelMessage } from '$lib/stores/websocketStore'
import { isJsonString } from '$lib/utils'
Expand All @@ -10,8 +10,6 @@
userId: string = '',
username: string = ''
$: chatHistory = chatHistory
channelMessage.subscribe((value) => {
if (!value || !isJsonString(value)) return
const parsedData = JSON.parse(value)
Expand All @@ -36,7 +34,7 @@
</p>
<div class="flex flex-col-reverse p-3 grow h-80 overflow-y-auto">
{#each chatHistory as sender}
<ChatMessage bind:sender />
<Message bind:sender />
{/each}
</div>
<div class="flex flex-row mt-auto p-3 w-full">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import ChatProfileCard from '$lib/components/Channel/Chat/ChatProfileCard.svelte'
import ProfileCard from '$lib/components/Channel/Chat/ProfileCard.svelte'
export let sender: any
let coloredRoles: { tagColor?: any; textColor?: string }
Expand Down Expand Up @@ -29,7 +29,7 @@
}
</script>

<!-- <ChatProfileCard /> -->
<!-- <ProfileCard /> -->

<div class="menu">
<ul>
Expand Down
64 changes: 0 additions & 64 deletions src/lib/components/Channel/ChatMessage.svelte

This file was deleted.

File renamed without changes.
File renamed without changes.
83 changes: 83 additions & 0 deletions src/lib/components/Search/ItemSection.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<script lang="ts">
export let channel: any
function timeSince(date: string) {
let created: any = new Date(date)
let currentDate: any = new Date(Date.now())
var seconds = Math.floor((currentDate - created) / 1000)
var interval = seconds / 31536000
if (interval > 1) {
return Math.floor(interval) + ' years ago'
}
interval = seconds / 2592000
if (interval > 1) {
return Math.floor(interval) + ' months ago'
}
interval = seconds / 86400
if (interval > 1) {
return Math.floor(interval) + ' days ago'
}
interval = seconds / 3600
if (interval > 1) {
return Math.floor(interval) + ' hours ago'
}
interval = seconds / 60
if (interval > 1) {
return Math.floor(interval) + ' minutes ago'
}
return Math.floor(seconds) + ' seconds ago'
}
</script>

<div class="flex flex-col md:flex-row gap-4">
<a href={`/channel/${channel._id}`} class=" md:w-96 bg-gray-200">
<img
loading="lazy"
src={channel.thumbnail || 'https://via.placeholder.com/300/09f/fff.png'}
class="w-full max-h-64 border-none rounded shadow"
alt="" />
</a>

<div class="md:basis-96 flex-auto flex flex-col gap-2">
{#if Array.isArray(channel.category)}
<div class="flex flex-wrap gap-2">
{#each channel.category as cat}
<div class="badge badge-primary">{cat}</div>
{/each}
</div>
{/if}

<a href={`/channel/${channel._id}`}>
<h2 class="text-xl font-semibold dark:text-white">
{channel.title || ''}
</h2>
</a>

<p class="text-sm font-light">
{channel.memberCount || 0} Views - {timeSince(channel.createdAt)}
</p>

<a href={`/channel/${channel._id}`} class="flex items-center">
<div class="avatar">
<div class="w-8 rounded-full">
<img
loading="lazy"
src={channel.avatar || 'https://via.placeholder.com/300/09f/fff.png'}
alt="avater" />
</div>
</div>
<p class="ml-2 text-sm font-light text-center">{channel.createdBy || ''}</p>
</a>

<p class="text-sm font-light">
{channel.description ? channel.description.slice(0, 100) : ''}
</p>

{#if Array.isArray(channel.tags)}
<div class="flex flex-wrap gap-2">
{#each channel.tags as tag}
<div class="badge">{tag}</div>
{/each}
</div>
{/if}
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<script lang="ts">
import LastItemInViewport from '$lib/actions/LastItemInViewport'
import SearchItem from '$lib/components/Search/SearchItem.svelte'
export let channels: any = []
export let loadingMoreChannels: boolean = false
import ItemSearch from '$lib/components/Search/ItemSearch.svelte'
import ItemSection from '$lib/components/Search/ItemSection.svelte'
export let channels: any = [],
loadingMoreChannels: boolean = false,
isSearchPage: boolean = false
</script>

<div class="flex flex-col gap-4 px-4 md:px-24 justify-around">
{#each channels as channel}
{#if channel.isPrivate !== true}
<SearchItem {channel} />
{#if isSearchPage}
<ItemSearch {channel} />
{:else}
<ItemSection {channel} />
{/if}
{/if}
{:else}
<h2>No records found</h2>
Expand Down
27 changes: 27 additions & 0 deletions src/lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,30 @@ export const isJsonString = (str: string): boolean => {
}
return true
}

export const getSectionUrl = ({
sectionId,
query,
skip,
limit
}: {
sectionId: string
query: string
skip: number
limit: number
}): string => {
switch (sectionId) {
case 'weekly':
return `channels/weekly?searchQuery=${query}&skip=${skip}&limit=${limit}`
case 'highest-ranked':
return `users/highest-ranked?searchQuery=${query}&skip=${skip}&limit=${limit}`
case 'rising-stars':
return `users/rising-stars?searchQuery=${query}&skip=${skip}&limit=${limit}`
case 'my':
return `channels/me/hosted?searchQuery=${query}&skip=${skip}&limit=${limit}`
case 'fav':
return `channels/me/fav?searchQuery=${query}&skip=${skip}&limit=${limit}`
default:
return `channels?searchQuery=${query}&skip=${skip}&limit=${limit}`
}
}
Loading

0 comments on commit 911939a

Please sign in to comment.