24seconds / orka

Okra is Peer to Peer LAN data sharing service

Hello

orka's Issues

Notification page

Components to cover

• Container
• NotificationRow

Build Layouts using components

Description

Components are almost ready. Now it's time to build layout. There are several pages to work on.

• #22
• #23
• #24
• #25
• #26

apply gluesql in `p2p` related logics

There are several parts to apply gluesql

• #78
• #79
• #84
• share chat messages
• #86
• handle notification

Finish Notification page logic and ui

Things to do

• render peer's name and profile based on data
• use gluesql
• open comment layout based on notification type and data

Strictly reset the redux selected rowID

Description

There are so many cases to consider to handle the selected Row ID in redux.
This is a follow up issue of #40.

• when the focus lose
• when the layout closed
• when other layout is rendered

exchange user info

when the user clicks `NotificationRow` in the `Notification layout` then `Comment layout` should be shown.

share hands up event

small improvement: peer activity layout

naive interaction: show layout pages based on proper interaction

Description

Currently all the layout pages are shown. But each layout should be shown based on proper interaction. Here are the interaction lists

• #41
• #42
• #43
• what else?

Let's do this one by one.

Write tests especially query part

Description

While developing, I found that the query part is hard to understand. It would be nice to add test cases for the better understanding.

Data manipulation PoC

Description

This issue is a big issue which contains all the data manipulation related issues.

• #54
• #56
• investigate efficient flow between hook, gluesql js and redux cancelled.

Change class component to functional component

Description

Nowadays functional component is widely used. So it's time to move to functional component.
This is going to be long issue. It's good to break down this job - per component

• 24seconds/localdrop#45
  • refer: https://reactjs.org/docs/hooks-rules.html
• 24seconds/localdrop#48

Finish MyProfileAndActivity page logic and ui

related issue: #57 .

Things to do

• Profile Edit feature
• Profile image display
• Sorting option logic
• Filtering option logic
• ActivityRow delete button
• Hover effect
• size, timestamp text display
• hands up feature

add logics to peer list layout

Description

• get the latest data for each peer then render the data type (extension)
• apply boxshadow to data extension div -> already done
• render profile images based on user data
• render user display name based on user data
• render placeholder (empty data)
• add scrollable feature to peer list
• if peer does not share the data, omit data extension rendering => need to discuss

add github, behance badge

MyProfileAndActivity page

Components

• FilterTab
• EditName
  • DisplayName
  • MiniProfile
• ActivityRow
  • DataTypeHolder

Redesign work

• #12

Design db schema

Description

Since many features are added in orka, it's good to use database; I'm thinking of using in-memory database.
Let's design the database first.

UI improvement

Description

This issue is a big issue which contains all the UI related small ~ medium issues.

• #59
• Apply hover effect for all components which need it
• Apply animations
• Add notification pop up component
• #67
• #49
• add link url style (refer linkifyjs)
• remove selectable for peer's TXT, PNG component
• what else?
• display tooltip when hover the truncated text
• #61

MyProfileAndActivity page: Modify components with new design

Since 2022-08-25, designs are renewed. Let's change some styles and design

Cannot upload files with certain filename

Filename: Amphetamine Enhancer.dmg

main page

Remaining Components

• UploadFiles component
• UploadURL component

Redesign work

• #14

Apply gluesql-js in remaining layout

make CI/CD pipeline

Description

It is good to make CI/CD pipeline so that other people can check the developing progress and can test.

• client side
• server side

My profile page

Introduce components to storybook

Description

Storybook seems good tool to share component behavior to coworker. It would be nice to integrate this in orka

• introduce CI/CD using chromatic
• write stories
  • #8
  • #10
  • #16
  • #18
  • PeerActivity page

Use grid in orka App

Description

For the consistent ux, orka App should be placed in the middle.
To achieve it, grid is good option. Let's do this!

use gluesql as in memory db

• #48
• apply gluesql in filtering activity row logic
• apply gluesql in signaling server related logics
• #77
• revisit: apply gluesql in Home tab layout
• #57
• revisit: apply gluesql in Notification tab layout
• transform snake_case field name to camelCase field name in localAPI side
• #63
• #64

Notification page

Main page

adjust some colors for fully support of light mode

share data (text) through data channel

resolve lint conflict

I'm not sure but it seems that prettier and eslint are conflicting.. Let's resolve it

Purchase orka domain

Done, now it's https://orka.run

Next step is to split url for the dev and production stage

revisit: apply gluesql in `MyProfile tab layout`

• profile edit
• filter logic

Peer activity page

Main page: Redesign component

Since 2022-08-25, designs are renewed. Let's change some styles and design

Comment page

[ADR] Write down feature spec

Description

Before designing the schema (#27 ), it is good to clarify what features are there and how it works.
Let's write down a document.

use one table for `files` and `links` table

During the development, I found that managing files and links table separately is quite hard.
Let's merge it. Table name would be sharing_data.

Comment page

Components

• Container
• CommentRow
• CommentInput

share data (file) through data channel

Finish PeerActivity page logic and ui

Things to do

• render peer's name and profile based on data
• render sharing data correctly
• render hands up data correctly
• what else?

when the user clicks `ActivityRow` in the `PeerActivity layout`, then `Comment layout` should be shown.

when the user clicks `Peer profile` in the main layout page, then `PeerActivity layout` should be shown.

Use gluesql js as a proof of concept

Description

As I already introduced db schema in #30 , it's time to use that schema with gluesql-js.