vargajoe/sn-miniapp-usersearch

Example app for user search with sensenet

sn-react-typescript-search-users

Search Users app for sensenet SPA development with React and Typescript

This miniapp was in very early stage, newer version can be found among sensenet's sn-client monorepo examples.

Package content

• An example tasklist React SPA with sensenet repository login, written in Typescript ✨
• An example Jest test with Enzyme 👓
• Preconfigured Webpack build 🧱
• prettier and eslint 💅
• husky lint & prettier precommit hook ⚓

Getting started

Be sure that you have installed a GIT client, Node.JS (latest or LTS). You can use NPM or Yarn.

Using as a template

1. Clone a GIT repository from this reposiotry
2. cd into the cloned directory
3. Install the package dependencies with npm install or yarn install

Starting the dev server

1. Start the Webpack dev server with npm run start or yarn start
2. You can browse the app once the build has been finished at http://localhost:8081/

Building the project

You can simply run npm run build or yarn build to create the bundle. It will saved to the ./bundle directory

Running tests

1. Simply run npm run test or yarn test to run the tests. A coverage report will be also generated to the ./coverage directory

Application Structure

- src
  | - assets
  | | - static assets like images, fonts, etc...
  | - components
  | | - generic components like forms, buttons, inputs
  | - context
  | | - React contexts and context providers
  | - hooks
  | | - Custom React hooks like useRepository or useCurrentUser.
  | ...
  | main / container components, layouts
  | ...
  | - app.tsx - The main entry point of your application
  | - index.tsx - React and Sensenet Repository initialization
  | - style.css - generic css overrides

Netlify site

1. Log in to Netlify. If you don't have a Netlify account, sign up for free here
2. Create a new site with New site from Git button
3. Select GitHub at Continuous Deployment section
4. Authorize Netlify on GitHub modal window
5. Select repository for deploy
   1. If you don't see your repository, you can configure Netlify from the link at the bottom of the page
6. At Deploy settings you can configure
   1. from which branch it will be created
   2. Build command: npm run build
   3. Publish directory: bundle/

Recommended goodies

• ESLint extension
• Prettier extension

sn-miniapp-usersearch's Issues

improvements

⌚
estimate: 3
time spent: 5

---

• search results box is not sized correctly
• reference field does not get cleared from query
• reference field is not wired correctly (DisplayName)
• browse view has some issues in console (see attached picture)
• in search results avatar should be sized correctly and circle (use material avatar control) (see attached picture)
• use material grid system for inputs to handle responsiveness
• extend with hidden (default) field (TypeIs:User)
• browse view should be triggered by clicking anywhere on the list item

tests

⌚
estimate:
time spent:

---

code coverage should reach 90%